Design System / UI Package Template

Use this template when documenting design system or UI component packages.

MANDATORY: Before using this template, analyze the current project to identify:

1. Component library location - Run: find . -name "components" -type d | head -5
2. UI framework - Run: grep -r "react\|vue\|angular\|svelte" package.json | head -3
3. Styling approach - Run: find . -name "*.css" -o -name "*.scss" -o -name "*.styled.*" | head -5
4. Build tool - Run: ls -la *storybook* vite.config.* webpack.config.* rollup.config.* 2>/dev/null
5. Design tokens - Run: find . -name "*token*" -o -name "*theme*" | grep -v node_modules | head -5

Adaptive Template Structure

## Design System
- Components: `[DETECTED_COMPONENTS_PATH]/**`
- Design tokens: `[DETECTED_TOKENS_PATH]` OR "No design tokens found"
- [COMPONENT_GALLERY_COMMAND] OR "No component gallery setup found"
- Examples:
  - [EXAMPLE_COMPONENT_1]: `[ACTUAL_PATH_FROM_PROJECT]`
  - [EXAMPLE_COMPONENT_2]: `[ACTUAL_PATH_FROM_PROJECT]`

Detection Instructions

Component Organization

Before documenting, run discovery commands to identify:

• Components directory structure (don't assume src/components/)
• Design token files (could be .json, .js, .ts, CSS variables)
• Theme configuration location
• Styling approach used in the project

Development Commands

Analyze package.json scripts to identify:

• Storybook command: grep -r "storybook" package.json
• Build command: grep -r "build.*ui\|build.*components" package.json
• Test command: grep -r "test.*components\|test.*ui" package.json

Technology-Specific Patterns

React Projects: Look for .tsx, styled-components, emotion Vue Projects: Look for .vue, scoped styles
Angular Projects: Look for .component.ts, Angular Material Web Components: Look for custom element definitions

Usage Pattern Examples

Import Patterns (Adapt Based on Actual Project)

// Example based on what you find in existing files
import { [ComponentName] } from '[ACTUAL_IMPORT_PATH]';

Component API Design (Copy from Existing)

• Find the most well-structured component in the project
• Copy its prop patterns and API design
• Reference it as the standard to follow

Anti-Patterns for Design Systems

• Don't assume React/TypeScript (check what's actually used)
• Don't hardcode paths without verification
• Don't reference Storybook if it doesn't exist
• Don't document patterns not used in this specific project