frontend-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)

1. Lock context quickly.

• Identify audience, core task, tone, platform, and constraints.
• If context is missing, make practical assumptions and proceed.