About frontend-design
A skill for designing and building production-grade frontends with distinctive visual styles. It is intended for executable frontend tasks and returns concrete design decisions and action notes.
Key features
- 01Production-grade frontend design
- 02Distinctive visual direction
- 03Concrete implementation actions
Use cases
- 01Designing a frontend experience
- 02Building a production-ready interface
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/frontend-designin Claude Code to confirm it loaded.
Bundled filesLICENSE.txt
Details
From the project READMEfrontend-design
Purpose
Design and build production-grade frontends with bold, distinctive aesthetics.
Routing
- Use when: Use when the user asks to design and build production-grade frontends with bold, distinctive aesthetics.
- Do not use when: Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.
- Outputs: Outcome from frontend-design: task-specific result plus concrete action notes.
- Success criteria: Returns concrete actions and decisions matching the requested task, with no fabricated tool-side behavior.
Trigger Examples
Positive
- Use the frontend-design skill for this request.
- Help me with frontend-design.
- Use when the user asks to design and build production-grade frontends with bold, distinctive aesthetics.
- frontend-design: provide an actionable result.
Negative
- Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.
- Do not use frontend-design for unrelated requests.
- This request is outside frontend-design scope.
- This is conceptual discussion only; no tool workflow is needed.
Runtime Prompt
- Current runtime prompt length: 4071 characters.
- Runtime prompt is defined directly in
../frontend-design.json.
Comments
Markdown supported