Frontend Design (Codex)
Use this skill when the task is primarily visual frontend work.
Workflow
- Confirm constraints: framework, design system, target devices, accessibility needs.
- If no design system exists, define a clear visual direction (type, color, spacing, motion) before coding.
- Implement responsive layout first, then component states (hover/focus/disabled/loading/error).
- Check accessibility basics: semantic structure, contrast, keyboard flow, focus visibility, labels.
- Keep performance sane: avoid heavy assets and unnecessary runtime work.
- Summarize decisions and tradeoffs in plain terms.
Output Standard
- Production-usable code, not placeholders.
- Consistent spacing/typography tokens.
- Mobile + desktop readiness.
- No generic "template" aesthetics unless explicitly requested.