@testcompany/screen-templates

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

Installation

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

Available Templates

HomePage

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

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.

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.

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

<SettingsPage 
  userName="Jane Smith"
  userEmail="[email protected]"
  showSidebar={true}
  initialSettings={{
    notifications: true,
    darkMode: false,
    language: 'English'
  }}
/>

Using with v0

Basic Template Usage

1. Import the template you want to start with:

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:

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:

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

# 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