front-end-design

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

1. Clarify target users, key user journeys, and visual tone.
2. Define a style direction first: typography, color system, spacing rhythm, and motion rules.
3. Implement semantic HTML and a scalable CSS structure before adding visual effects.
4. Ensure responsive behavior at common breakpoints and for narrow mobile screens.
5. Add accessibility checks: keyboard use, focus visibility, color contrast, and alt text.
6. 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.