frontend-design-review

Frontend Design Review

Use this skill when Codex should behave like a design-aware front-end implementer instead of a generic code editor.

Inputs to gather first

Read the highest-signal design inputs available before changing code:

1. Nearest repository DESIGN.md
2. Workspace or repo design shortlist docs when present
3. Figma links, node IDs, screenshots, or reference images
4. Repository design files under design/
5. Existing component library and tokens
6. Product spec, UX flow, or acceptance notes in repo docs, Notion, or Google Drive

If a design source is missing, say so explicitly and continue with the strongest remaining source instead of pretending the design is fully specified.

Working rules

1. Start from system constraints, not ad hoc CSS:
   • identify framework, styling approach, component library, and token source
   • prefer existing components and tokens over one-off values
2. Break UI work into four layers:
   • layout
   • components
   • states
   • responsive behavior
3. Cover non-happy paths by default when relevant:
   • default
   • hover
   • focus-visible
   • active
   • loading
   • empty
   • error
   • disabled
   • success