# Frontend Design

Transform UI style requirements into production-ready frontend code with systematic...

- Repository: https://github.com/jjyaoao/HelloAgents (3333 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-06
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add jjyaoao/HelloAgents --skill frontend-design -g -a claude-code -y`
Codex: `npx skills add jjyaoao/HelloAgents --skill frontend-design -g -a codex -y`
Cursor: `npx skills add jjyaoao/HelloAgents --skill frontend-design -g -a cursor -y`
Gemini CLI: `npx skills add jjyaoao/HelloAgents --skill frontend-design -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 to code"

**DO NOT use for:**
- Backend API development
- Pure logic/algorithm implementation
- Non-visual code tasks

---

## Skill Architecture

This skill provides:

1. **SKILL.md** (this file): Core methodology and guidelines
2. **examples/css/**: Production-ready CSS examples
   - `tokens.css` - Design token system
   - `components.css` - Reusable component styles
   - `utilities.css` - Utility classes
3. **examples/typescript/**: TypeScript implementation examples
   - `design-tokens.ts` - Type-safe token definitions
   - `theme-provider.tsx` - Theme management
   - `sample-components.tsx` - Component examples
4. **templates/**: Quick-start templates
   - `tailwind-config.js` - Tailwind configuration
   - `globals.css` - Global styles template

---

The rest: https://github.com/jjyaoao/HelloAgents/blob/HEAD/skills/frontend-design/SKILL.md