How do I install the Frontend skill?

Run npx skillmds@latest add jh941213/frontend-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend?

jh941213 (@jh941213) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend by jh941213 — Agent Skill

Name: Frontend
Author: jh941213

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"

jh941213 cbb1e19 2.4 KB Updated Sep 17, 2026

File contents

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

## [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

CSS variables (globals.css)
Utilities (lib/utils.ts)
UI components (components/ui/)
Layout (components/layout/)
Feature components
Page assembly
Animations

Required Dependencies

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.

---name: frontend-2description: 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"---# Frontend UI DevelopmentBuilds 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]### Components1. [Component1]: [description]2. [Component2]: [description]### Layout- Max width: [px]- Main structure: [description]```## Phase 2: ImplementationThis 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 Order1. CSS variables (globals.css)2. Utilities (lib/utils.ts)3. UI components (components/ui/)4. Layout (components/layout/)5. Feature components6. Page assembly7. Animations### Required Dependencies```bashnpm install tailwindcss @tailwindcss/typographynpm install clsx tailwind-mergenpm install framer-motionnpm install lucide-reactnpx shadcn@latest init```## Phase 3: VerificationAfter 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.```

Frequently asked questions