> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Best Practices

> Tips for organizing, writing guidelines, and building component libraries

## Organizing Design Systems

### By Project Type

* Create separate systems for different app categories
* Example: "E-commerce UI", "Admin Dashboard", "Marketing Pages"

### By Brand

* One system per brand or client
* Example: "Acme Corp Design System", "Client XYZ UI Kit"

### By Platform

* Separate systems for web, mobile, or desktop
* Example: "iOS Components", "Web App UI", "Desktop Toolkit"

## Writing Effective Guidelines

### Be Specific

* Don't just say "use primary color"
* Specify exact hex codes and usage contexts

### Include Examples

```markdown theme={null}
## Button Styles

### Primary Button
- Background: #0066FF
- Text: #FFFFFF
- Padding: 12px 24px
- Border Radius: 8px
- Use for primary actions like "Sign Up", "Continue", "Submit"

### Secondary Button
- Background: transparent
- Text: #0066FF
- Border: 1px solid #0066FF
- Use for secondary actions like "Cancel", "Go Back"
```

### Document "Why" Not Just "What"

```markdown theme={null}
## Spacing

We use an 8px grid system because:
- Creates visual rhythm and harmony
- Easier for developers to remember
- Scales consistently across screen sizes
- Aligns with major design tools (Figma, Sketch)
```

## Building Your Component Library

### Start Small

* Begin with 5-10 core components
* Buttons, inputs, cards, navigation
* Expand as needed

### Focus on Reusability

* Make components flexible with props
* Avoid hardcoded values
* Use composition patterns

### Document Props

```typescript theme={null}
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
}
```

### Test in Context

* Use components in real projects
* Iterate based on actual usage
* Collect feedback from team members