Skip to main content
skillsmp

Menú

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

Ir a la instalación

Datos de origen

Repositorio
ww-w-ai/bkit-gemini
Última actividad en el origen
11 de marzo de 2026 a las 04:41
Idioma detectado de SKILL.md
inglés
Estrellas
66
Forks
16

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Mostrando SKILL.md

SKILL.md
Instrucciones de origen · Vista previa de solo lectura
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`
Ver en GitHub
Volver a la búsquedaVolver a la instalación