メニュー
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"
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend |
| description | 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" |
| user-invocable | true |
| disable-model-invocation | false |
| context | fork |
| agent | frontend-developer |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
Builds big-tech style (Stripe, Vercel, Apple) frontend UI from planning to implementation in one go.
/frontend [requirements]
|
1. Write design specification (planning)
|
2. User confirmation
|
3. Implement with frontend-developer agent
|
4. Verify results
| 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 |
## [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]
Calls the frontend-developer agent for implementation.
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init
After implementation:
/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.
현재 브랜치의 변경사항 코드 리뷰. Codex + Claude 듀얼 리뷰. 트리거: "리뷰", "review", "검토", "코드 리뷰", "PR 리뷰", "변경사항 확인" 안티-트리거: "구현", "코드 작성", "빌드"
코드 단순화 및 리팩토링 — 변경된 코드를 리뷰하고 불필요한 추상화, 중복, 복잡성을 제거합니다. Triggers on: 단순화, simplify, 리팩토링, 코드 정리, 코드 개선. NOT for: 새 기능 추가, 버그 수정.
작업 완료 후 코드 검증 (타입체크, 린트, 테스트, 빌드). Triggers on: 검증, verify, 테스트 돌려, 빌드 확인, 타입체크. NOT for: E2E 테스트, 코드 작성, 구현.
Ralph Loop 병렬 버전. 여러 에이전트가 worktree에서 동시에 PRD 항목을 처리한다. 트리거: "병렬 실험", "autodev parallel", "동시에 실험", "워크트리 실험", "병렬 랄프" 안티-트리거: "순차 실험", "하나씩"
Ralph Loop 기반 자율 개발 루프. Stop Hook이 세션 종료를 가로채어 PRD 항목을 하나씩 완료하며 자동 커밋한다. 트리거: "autodev", "자율 개발", "밤새 돌려", "랄프 루프", "ralph loop", "자동 개발" 안티-트리거: "직접 구현해", "한번만 해", "수동"
변경사항 커밋, 푸시, PR 생성을 한 번에 수행하는 워크플로우. 트리거: "커밋", "PR 만들어", "푸시해", "PR 생성", "commit and push", "커밋하고 푸시", "PR 올려" 안티-트리거: "코드 리뷰", "git log 확인", "diff 보여줘", "브랜치 목록"