| name | front-end-design |
| description | Design and implement distinctive, production-ready front-end UI. Use when users ask for UI design, landing pages, components, styling, responsive layouts, accessibility, or visual polish. |
Front-End Design
Goal
Produce intentional, distinctive, and accessible interfaces that work well on mobile and desktop.
Workflow
- Clarify target users, key user journeys, and visual tone.
- Define a style direction first: typography, color system, spacing rhythm, and motion rules.
- Implement semantic HTML and a scalable CSS structure before adding visual effects.
- Ensure responsive behavior at common breakpoints and for narrow mobile screens.
- Add accessibility checks: keyboard use, focus visibility, color contrast, and alt text.
- Keep performance reasonable by minimizing layout shifts and oversized assets.
Design Rules
- Avoid generic, boilerplate layouts.
- Pick purposeful typography and a coherent visual hierarchy.
- Use CSS variables for theme tokens.
- Use animation sparingly and only to support comprehension.
- Preserve existing design systems when working in an established codebase.
Done Criteria
- UI is functional, responsive, and readable on desktop and mobile.
- Styling is consistent and not dependent on ad-hoc inline overrides.
- Core interactions are keyboard accessible.
