# Frontend

> Big-tech style (Stripe, Vercel, Apple) UI development. From planning to implementation in one go. Triggers: "frontend", "create UI", "create page", "create component", "landing page", "dashboard UI" Anti-triggers: "backend API", "database", "CLI tools"

- Skill: `jh941213/frontend-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jh941213/frontend-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jh941213/frontend-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jh941213 (https://skillmd.com/u/jh941213)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jh941213/frontend-2

---


# Frontend UI Development

Builds big-tech style (Stripe, Vercel, Apple) frontend UI from **planning to implementation** in one go.

## Workflow

```
/frontend [requirements]
    |
1. Write design specification (planning)
    |
2. User confirmation
    |
3. Implement in the frontend-developer context
    |
4. Verify results
```

## Phase 1: Planning

### Design Style Selection
| Style | Characteristics | Suitable For |
|-------|----------------|--------------|
| **Stripe** | Gradients, bright tones, subtle animations | Payments, SaaS, landing |
| **Vercel** | Dark mode, minimal, monotone | Developer tools |
| **Apple** | Wide margins, typography emphasis | Product showcase |
| **Linear** | Dark, purple accents | Productivity apps |
| **Notion** | Bright tones, icon usage | Docs/collaboration |

### Specification Template
```markdown
## [Project Name] Design Spec

### Style: [Selected Style]

### Colors
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
- Border: #[hex]
- Accent: #[hex]

### Typography
- Display: [font] / [size]
- Body: [font] / [size]

### Components
1. [Component1]: [description]
2. [Component2]: [description]

### Layout
- Max width: [px]
- Main structure: [description]
```

## Phase 2: Implementation

This skill runs in the `frontend-developer` context (via `context: fork` + `agent` in the frontmatter). Proceed with the implementation directly — do not spawn the agent again.

### Implementation Order
1. CSS variables (globals.css)
2. Utilities (lib/utils.ts)
3. UI components (components/ui/)
4. Layout (components/layout/)
5. Feature components
6. Page assembly
7. Animations

### Required Dependencies
```bash
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init
```

## Phase 3: Verification

After implementation:
- [ ] No TypeScript errors
- [ ] Build succeeds
- [ ] Responsive verified
- [ ] Accessibility verified

## Usage Examples

```
/frontend Create a login page. Vercel style, with email/password input form and social login buttons.
```

```
/frontend Create a dashboard. Stripe style, with sidebar + main content area + chart cards.
```