frontend-design
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
npx skills add jjyaoao/HelloAgents --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.
# Frontend Design Skill — Systematic & Creative Web Development **Skill Location**: `{project_path}/skills/frontend-design/` This skill transforms vague UI style requirements into executable, production-grade frontend code through a systematic design token approach while maintaining creative excellence. It ensures visual consistency, accessibility compliance, and maintainability across all deliverables. --- ## When to Use This Skill (Trigger Patterns) **MUST apply this skill when:** - User requests any website, web application, or web component development - User mentions design styles: "modern", "premium", "minimalist", "dark mode", "SaaS-style" - Building dashboards, landing pages, admin panels, or any web UI - User asks to "make it look better" or "improve the design" - Creating component libraries or design systems - User specifies frameworks: React, Vue, Svelte, Next.js, Nuxt, etc. - Converting designs/mockups to code - User mentions: Tailwind CSS, shadcn/ui, Material-UI, Chakra UI, etc. **Trigger phrases:** - "build a website/app/component" - "create a dashboard/landing page" - "design a UI for..." - "make it modern/clean/premium" - "style this with..." - "convert this design
- When to Use This Skill (Trigger Patterns)
- Skill Architecture
- Core Principles (Non-Negotiable)
- 1. Dual-Mode Thinking: System + Creativity
- 2. Tokens-First Methodology
- 3. Tech Stack Flexibility
- 4. Tailwind CSS Best Practices
- Implementation Workflow
- Phase 1: Design Analysis & Token Definition
- Phase 2: Component Development
- Phase 3: Page Assembly
- Phase 4: Quality Assurance
- Design Direction Templates
- 1. Minimal Premium SaaS (Most Universal)
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
What does the frontend-design skill do?
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
How do I install it?
Run `npx skills add jjyaoao/HelloAgents --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 jjyaoao/HelloAgents, a repository with 2,615 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.