| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with strong art direction. Use when building or restyling web components, pages, dashboards, landing pages, React apps, HTML/CSS layouts, or any UI where originality, polish, and visual quality are critical. Enforce anti-slop rules, layout diversity, typography quality, and interaction design. |
Build real, production-grade frontend code with intentional visual direction.
Counter common GPT/Codex failure modes: text-heavy layouts, repeated structure, generic style fallback, and shallow interactions.
Prioritize user constraints over this skill: framework, libraries, coding style, architecture, and file conventions always win.
This skill defines design outcomes and quality bars, not mandatory implementation tooling.
Portability and Conflict Resolution (Required)
- Apply design guidance through the user's chosen stack and conventions.
- Do not force specific tools or libraries unless the user asks for them.
- Express decisions as transferable intent (hierarchy, rhythm, contrast, interaction feedback), then map to local primitives.
- Implement tokens/themes using the project's native system (variables, utility config, theme objects, component tokens, etc.).
- If preferences are missing, choose a minimal-dependency approach and keep it easy to migrate.
- Reuse existing project patterns before introducing new abstractions.
Workflow (Required)
- Lock context quickly.
- Identify audience, core task, tone, platform, and constraints.
- If context is missing, make practical assumptions and proceed.
- Generate three distinct directions internally before coding.
- Force real divergence in composition, type system, and color strategy.
- Pick one direction and commit.
- Define a direction contract before implementation.
- Concept statement (one sharp phrase).
