npm package: @florianbonnet/screen-templates
Description: Pre-built screen templates for rapid prototyping and development. Works seamlessly with design systems and v0.
Author: Florian Bonnet via Claude
Latest version: 1.0.0

# @testcompany/screen-templates

Pre-built screen templates for rapid prototyping and development. Works seamlessly with @testcompany/design-system and v0.

## Installation

```bash
npm install @testcompany/screen-templates @testcompany/design-system
```

## Available Templates

### HomePage
A dashboard homepage with welcome message, quick actions, and recent activity overview.

```jsx
import { HomePage } from '@testcompany/screen-templates';

<HomePage 
  userName="Jane Smith"
  showWelcomeCard={true}
  showQuickActions={true}
  showRecentActivity={true}
/>
```

### ChatScreen  
Full-featured chat interface with sidebar for conversation history and real-time messaging.

```jsx
import { ChatScreen } from '@testcompany/screen-templates';

<ChatScreen 
  userName="John Doe"
  assistantName="AI Helper"
  showSidebar={true}
  messages={customMessages}
/>
```

### SettingsPage
Comprehensive settings page with sidebar navigation and multiple configuration sections.

```jsx
import { SettingsPage } from '@testcompany/screen-templates';

<SettingsPage 
  userName="Jane Smith"
  userEmail="jane@example.com"
  showSidebar={true}
  initialSettings={{
    notifications: true,
    darkMode: false,
    language: 'English'
  }}
/>
```

## Using with v0

### Basic Template Usage

1. Import the template you want to start with:

```jsx
import { HomePage } from '@testcompany/screen-templates';

export default function MyDashboard() {
  return <HomePage />;
}
```

2. Use this prompt template in v0:

```
Start with this screen template and modify it:

```jsx
import { HomePage } from '@testcompany/screen-templates';

// Current template
<HomePage showWelcomeCard={true} />
```

Changes needed:
- [Describe your specific requirements]
- Only use components from @testcompany/design-system
- Maintain the overall structure but customize the content

Constraints:
- Keep responsive design
- Use consistent styling patterns
- Follow the existing component patterns
```

### Advanced Customization

For more complex modifications:

```
Import and customize this template:

```jsx
import { ChatScreen } from '@testcompany/screen-templates';
import { Button, Card } from '@testcompany/design-system';

// Base template with custom additions
function MyCustomChat() {
  return (
    <ChatScreen 
      userName="User"
      showSidebar={false}
    />
  );
}
```

Add these features:
1. File upload capability in the message input
2. Voice message recording button
3. Message reactions/emoji responses

Requirements:
- Only use @testcompany/design-system components
- Maintain existing chat functionality  
- Keep the overall UI consistent
```

## Template Catalog

View all available templates:

```jsx
import { templateCatalog } from '@testcompany/screen-templates';

console.log(templateCatalog);
// Returns array of all templates with metadata
```

Get components used by a template:

```jsx
import { getTemplateComponents } from '@testcompany/screen-templates';

const components = getTemplateComponents('Home Page');
// Returns: ['Container', 'Header', 'Card', 'Button', ...]
```

## Template Structure

Each template includes:

- **Component**: React component with customizable props
- **Metadata**: Name, category, complexity, estimated time
- **Design System Components**: List of used components
- **Usage Examples**: Code snippets for v0 integration
- **Tags**: Searchable keywords

## Best Practices for v0

1. **Start with Templates**: Always begin with an existing template rather than building from scratch
2. **Use Component Constraints**: Specify which design system components to use
3. **Maintain Structure**: Keep the overall layout patterns when making modifications  
4. **Incremental Changes**: Make small, specific changes rather than complete rewrites

## Development

```bash
# Build the package
npm run build

# Watch for changes
npm run dev
```

## Adding New Templates

1. Create template in `src/templates/YourTemplate/`
2. Export from main index
3. Add to templateCatalog
4. Include usage examples and metadata