Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From frontend-design
Generates distinctive, production-grade frontend interfaces with bold aesthetics, distinctive typography, and context-aware implementation. Avoids generic AI aesthetics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design:frontend-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.
Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.
Claude automatically uses this skill for frontend work. Creates production-ready code with:
"Create a dashboard for a music streaming app"
"Build a landing page for an AI security startup"
"Design a settings panel with dark mode"
Use this skill whenever doing frontend design work to ensure the resulting interface is modern, distinctive, and high quality.
Guides collaborative design exploration before implementation: explores context, asks clarifying questions, proposes approaches, and writes a design doc for user approval.
Creates structured, bite-sized implementation plans from specs or requirements before writing code. Useful for breaking down multi-step tasks into testable steps with file structure and task boundaries.
Synthesizes the current conversation into a structured spec (PRD) and publishes it to the project issue tracker with a ready-for-agent label, without interviewing the user.
npx claudepluginhub andersonlimahw/lemon-ai-hub --plugin frontend-design