frontend
3
总安装量
3
周安装量
#59040
全站排名
安装命令
npx skills add https://github.com/jh941213/my-claude-code-asset --skill frontend
Agent 安装分布
opencode
3
gemini-cli
3
github-copilot
3
codex
3
kimi-cli
3
amp
3
Skill 文档
íë¡ í¸ìë UI ê°ë°
ë¹ í í¬ ì¤íì¼(Stripe, Vercel, Apple)ì íë¡ í¸ìë UI를 íëë â 구íê¹ì§ í ë²ì ì§íí©ëë¤.
ìí¬íë¡ì°
/frontend [ìì²ì¬í]
â
1. ëìì¸ ê·ê²© ìì± (íëë)
â
2. ì¬ì©ì íì¸
â
3. frontend-developer ìì´ì í¸ë¡ 구í
â
4. ê²°ê³¼ ê²ì¦
Phase 1: íëë
ëìì¸ ì¤íì¼ ì í
| ì¤íì¼ | í¹ì§ | ì í©í ì©ë |
|---|---|---|
| Stripe | ê·¸ë¼ë°ì´ì , ë°ì í¤, 미ë¬í ì ëë©ì´ì | ê²°ì , SaaS, ëë© |
| Vercel | ë¤í¬ëª¨ë, 미ëë©, ëª¨ë ¸í¤ | ê°ë°ì ë구 |
| Apple | ëì ì¬ë°±, íì´í¬ ê°ì¡° | ì í ìê° |
| Linear | ë¤í¬, ë³´ë¼ì ì ì¼í¸ | ìì°ì± ì± |
| Notion | ë°ì í¤, ìì´ì½ íì© | 문ì/íì |
ê·ê²©ì í í릿
## [íë¡ì í¸ëª
] ëìì¸ ê·ê²©
### ì¤íì¼: [ì íí ì¤íì¼]
### 컬ë¬
- Primary: #[hex]
- Background: #[hex]
- Text: #[hex]
- Border: #[hex]
- Accent: #[hex]
### íì´í¬
- Display: [í°í¸] / [í¬ê¸°]
- Body: [í°í¸] / [í¬ê¸°]
### ì»´í¬ëí¸
1. [ì»´í¬ëí¸1]: [ì¤ëª
]
2. [ì»´í¬ëí¸2]: [ì¤ëª
]
### ë ì´ìì
- Max width: [px]
- 주ì 구조: [ì¤ëª
]
Phase 2: 구í
frontend-developer ìì´ì í¸ë¥¼ í¸ì¶íì¬ êµ¬íí©ëë¤.
구í ìì
- CSS ë³ì (globals.css)
- ì í¸ë¦¬í° (lib/utils.ts)
- UI ì»´í¬ëí¸ (components/ui/)
- ë ì´ìì (components/layout/)
- ê¸°ë¥ ì»´í¬ëí¸
- íì´ì§ 조립
- ì ëë©ì´ì
íì ìì¡´ì±
npm install tailwindcss @tailwindcss/typography
npm install clsx tailwind-merge
npm install framer-motion
npm install lucide-react
npx shadcn@latest init
Phase 3: ê²ì¦
구í ìë£ í:
- TypeScript ìë¬ ìì
- ë¹ë ì±ê³µ
- ë°ìí íì¸
- ì ê·¼ì± íì¸
ì¬ì© ìì
/frontend ë¡ê·¸ì¸ íì´ì§ ë§ë¤ì´ì¤. Vercel ì¤íì¼ë¡, ì´ë©ì¼/ë¹ë°ë²í¸ ì
ë ¥ í¼ê³¼ ìì
ë¡ê·¸ì¸ ë²í¼ í¬í¨.
/frontend ëìë³´ë ë§ë¤ì´ì¤. Stripe ì¤íì¼ë¡, ì¬ì´ëë° + ë©ì¸ ì½í
ì¸ ìì + ì°¨í¸ ì¹´ëë¤.