Frontend, Design, Motion, and Accessibility
Frontend quality is one cluster with separate checks: product intent, visual taste, implementation correctness, motion behavior, accessibility, and browser verification. Source: User request, 2026-06-27; Taste Enforcement - Anti-Slop Frontend Rules
When To Use This
Use this page when the task changes a user-facing web surface, design system, animation, responsive layout, interaction, or accessibility behavior. Source: Frontend and Design Skills, 2026-06-27
Decision Matrix
| Need | Route | Verification |
|---|---|---|
| Product/UI direction | Design/taste skills and Taste Enforcement - Anti-Slop Frontend Rules | Rendered artifact review |
| React/Next implementation | React/Next skills | Typecheck/build/tests |
| Motion | Motion-specific skills | Browser and reduced-motion check |
| Accessibility | Frontend and Design Skills | Keyboard/semantic/contrast proof |
| Browser evidence | Browser Automation and QA | Screenshot/console/test proof |
Core Model
Do not split visual polish from implementation proof. A frontend change is good only when it matches the product intent, renders correctly, behaves accessibly, and verifies in the browser. Source: Taste Enforcement - Anti-Slop Frontend Rules, 2026-06-27
Tool And Skill Routing
Use frontend/design skills for art direction and implementation, motion skills for animation libraries, Frontend and Design Skills for semantics and keyboard behavior, and browser QA tools for rendered proof. Generated packs should load the canonical cluster before specialist tool pages. Source: scripts/generate-agent-packs.ts, 2026-06-27
Failure Modes
- Shipping a pretty screenshot with broken keyboard behavior.
- Adding motion without reduced-motion handling.
- Treating design review as separate from runtime proof.
- Letting generated UI copy explain itself instead of making controls obvious.
Evidence And Timeline
Proof should include build/typecheck or relevant test, browser verification, and explicit notes for accessibility or motion when the change touches those surfaces. Source: Browser Automation and QA; Frontend and Design Skills
Concept Position
| Field | Value |
|---|---|
| Concept family | Agent harness and runtime primitives |
| Concept owned | Frontend quality is one cluster with separate checks: product intent, visual taste, implementation correctness, motion behavior, accessibil... |
| Category map | Concept System Map |
Timeline
- 2026-07-01 | Concepts category refresh added this page to the Agent harness and runtime primitives family, linked it to Concept System Map, and kept it standalone because it owns this reusable mental model: Frontend quality is one cluster with separate checks: product intent, visual taste, implementation correctness, motion behavior, accessibil... Source: User request, 2026-07-01
- 2026-06-27 | Canonical cluster page created to keep frontend, design, motion, and accessibility connected in one synthesis while preserving specialist skills. Source: User request, 2026-06-27