phase-5-design-system
Skill for building platform-independent design systems. Develops consistent component libraries for all UI frameworks. Use proactively when user needs consistent UI components. Triggers: design system, component library, design tokens, 디자인 시스템, 컴포넌트 라이브러리, デザインシステム, コンポーネントライブラリ, 设计系统, 组件库, sistema de diseño, biblioteca de componentes, système de design, bibliothèque de composants, Design-System, Komponentenbibliothek, sistema di design, libreria di componenti Do NOT use for: one-off UI changes, Starter level
소스 정보
- 저장소
- ww-w-ai/bkit-gemini
- 최근 소스 활동
- 2026년 3월 11일 04:41
- 감지된 SKILL.md 언어
- 영어
- 스타
- 66
- 포크
- 16
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- phase-5-design-system
- classification
- C
- description
- Skill for building platform-independent design systems. Develops consistent component libraries for all UI frameworks. Use proactively when user needs consistent UI components. Triggers: design system, component library, design tokens, 디자인 시스템, 컴포넌트 라이브러리, デザインシステム, コンポーネントライブラリ, 设计系统, 组件库, sistema de diseño, biblioteca de componentes, système de design, bibliothèque de composants, Design-System, Komponentenbibliothek, sistema di design, libreria di componenti Do NOT use for: one-off UI changes, Starter level
- user-invocable
- true
- argument-hint
- allowed-tools
- ["read_file","write_file","replace","glob","grep_search","google_web_search"]
- imports
- []
- agents
- {"frontend":"frontend-architect"}
- context
- session
- memory
- project
- pdca-phase
- design
# Phase 5: Design System
> Build a consistent component library
## Components
### 1. Design Tokens
```css
:root {
/* Colors */
--color-primary: #3b82f6;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-error: #ef4444;
/* Typography */
--font-sans: 'Inter', sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-8: 2rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
}
```
### 2. Base Components
```typescript
// components/ui/button.tsx
interface ButtonProps {
variant: 'primary' | 'secondary' | 'outline';
size: 'sm' | 'md' | 'lg';
children: React.ReactNode;
onClick?: () => void;
}
export function Button({ variant, size, children, onClick }: ButtonProps) {
return (
<button
className={cn('btn', `btn-${variant}`, `btn-${size}`)}
onClick={onClick}
>
{children}
</button>
);
}
```
### 3. Component Categories
- **Primitives**: Button, Input, Select, Checkbox
- **Layout**: Container, Grid, Stack, Flex
- **Navigation**: Navbar, Sidebar, Tabs, Breadcrumb
- **Feedback**: Alert, Toast, Modal, Spinner
- **Data Display**: Table, Card, List, Badge
## Tools
- shadcn/ui (recommended)
- Tailwind CSS
- Radix UI primitives
## Output
Save components to: `components/ui/`
## Next Phase
After completion: `/phase-6-ui-integration`
GitHub에서 보기