메뉴
Initialize the design system or create new UI components with accessibility, Tailwind/shadcn integration, and documentation. Use when setting up the initial design system, adding component categories, or creating complex UI components that need design review.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build backend API endpoints, services, and database changes. Use for backend-only work like new API routes, business logic, database schema changes, or microservice patterns. Activates the Architecture Council for significant API decisions.
Implement a full-stack feature following an approved plan. Builds database layer, backend API, frontend components, and tests. Use after plan-feature has produced an approved implementation plan, or when you have a clear set of tasks to implement across the stack.
Run a comprehensive Go-to-Market and launch readiness review for a project phase. Combines marketing content audit, code quality review, performance audit, accessibility audit, infrastructure readiness, and business review with council evaluation. Use before phase launches or when GTM review issues are ready.
Fast-track an urgent fix through a streamlined pipeline. Skips Product/Feature Council, applies the fix, runs a focused review, and creates a PR with optional Deployment Council. Use for production bugs, security patches, or critical regressions that cannot wait for the full planning pipeline.
Plan a new feature from concept to approved implementation plan. Activates Product Council for strategic evaluation, then Feature Council for technical planning. Produces a documented decision and scoped task breakdown. Use when starting any new feature work.
Run a comprehensive security audit combining automated SAST scanning, STRIDE threat modeling, and attack tree analysis. Use before major releases, after security-sensitive changes, or on a regular cadence. Can audit the full codebase or specific directories.
| name | setup-design-system |
| description | Initialize the design system or create new UI components with accessibility, Tailwind/shadcn integration, and documentation. Use when setting up the initial design system, adding component categories, or creating complex UI components that need design review. |
| user-invokable | true |
Initialize or extend the project's design system with properly accessible, consistent UI components using Tailwind CSS and shadcn/ui.
Ensure we are on a feature branch based on the latest main:
git fetch origin main
If on main, create a new feature branch:
git checkout -b feature/design-system origin/main
If already on a feature branch, rebase onto latest origin/main:
git status --porcelain
If the working tree is dirty, stash before rebasing:
git stash push -m "setup-design-system: stash before rebase"
git rebase origin/main
git stash pop
If the working tree is clean, rebase directly:
git rebase origin/main
Check if a design system already exists:
packages/ui/ directory structurecomponents.json)src/index.css for @theme directives in v4, or tailwind.config.* for v3)Ask the user:
If initializing the design system or making significant structural changes, activate a Product Council subset:
Model Selection: See the Model Selection section in README.md for mapping agent model specs to Task tool parameters.
Invoke /ui-design:design-system-setup for initialization guidance.
Set up the foundation:
Design Tokens
Tailwind Configuration
Using /frontend-mobile-development:tailwind-design-system:
Component Structure
packages/ui/src/
├── components/
│ ├── primitives/ # Button, Input, Badge, Label, Switch
│ ├── layout/ # Container, Grid, Stack, Spacer, Divider
│ ├── navigation/ # Navbar, Sidebar, Breadcrumb, Tabs
│ ├── feedback/ # Alert, Toast, Modal, Dialog, Skeleton
│ ├── data-display/ # Card, Table, List, Avatar, Tooltip
│ └── forms/ # Form, FormField, Select, Checkbox, Radio
├── tokens/ # Design token definitions
├── hooks/ # Shared UI hooks (useMediaQuery, useTheme)
└── utils/ # UI utilities (cn, cva variants)
Read the existing patterns and conventions before adding new components. Match the established API patterns.
For each component needed, follow this process:
Invoke /ui-design:create-component for guided component creation.
Define the component API:
Build each component with:
any types)React.forwardRef for ref forwardingclassName prop merged with cn() utility for style overridesEvery component must include:
For each component, write:
After all components are built, run a comprehensive accessibility audit:
Invoke /ui-design:accessibility-audit on all new/modified components.
Check for:
prefers-reduced-motion media queryInvoke /ui-design:design-review to review the overall design system for:
Address any findings from the review.
Document the design system:
Commit with conventional commit format:
For new design system:
feat(ui): initialize design system with core components
For new components:
feat(ui): add <component-name> component
For design token changes:
feat(ui): update design tokens for <change-description>
[!CAUTION] This skill's work is done. Do NOT proceed to create a pull request, push to remote, or run a code review. Those are separate skills with their own workflows and checkpoints.
Present the next step to the user:
/review-code for multi-perspective quality and accessibility review before submitting/build-feature to implement the feature, then run /review-code/review-code → /submit-pr[!TIP] Pipeline:
/plan-feature→/build-featureor/build-api→/review-code→/submit-pr
/setup-design-systemcan be run at any point in the pipeline or independently. You are here — proceed to/review-codewhen ready.
Do not push the branch, create a PR, or invoke /submit-pr from within this skill.