frontend-design
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications, landing pages, dashboards, artifacts, or React/HTML/CSS UI. Generates creative, polished code that avoids generic AI aesthetics, then self-checks it against an objective accessibility and quality rubric.
Profile →npx skills add waybarrios/opencode-power-pack --skill frontend-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices, then audit it against the self-critique rubric before returning. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. ## Scope and requirements Before design thinking, classify the request and plan the appropriate ownership boundary. Ask only about missing information that materially changes structure, behavior, integration, or accessibility; when requirements are sufficient, proceed without a round trip. - **Page or application**: Plan the user journey, information architecture, content hierarchy, navigation and route context, page-level states, full-viewport responsive composition, and one coherent visual concept. - **Isolated or reusable component**: Plan its responsibility, public inputs and content, events, variants, loading/empty/error/disabled/selected states where applicable, host context, intrinsic sizing, keyboard and focus semantics, t
- Scope and requirements
- Design Thinking
- Frontend Aesthetics Guidelines
- Concrete moves (counter the defaults)
- Self-critique before returning
- Optional validation
- Notes
What does the frontend-design skill do?
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications, landing pages, dashboards, artifacts, or React/HTML/CSS UI. Generates creative, polished code that avoids generic AI aesthetics, then self-checks it against an objective accessibility and quality rubric.
How do I install it?
Run `npx skills add waybarrios/opencode-power-pack --skill frontend-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From waybarrios/opencode-power-pack, a repository with 443 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.