Examples & Recipes

This section provides practical examples and recipes for common PUPT use cases. Each example includes the complete prompt file and usage instructions.

Code Generation

React Component Generator

Generate consistent React components with customizable features.

---
title: React Component Generator
tags: [react, component, frontend]
variables:
  - name: componentName
    type: input
    message: "Component name:"
    validate: "^[A-Z][a-zA-Z0-9]*$"
    default: "MyComponent"
    
  - name: includeProps
    type: confirm
    message: "Include props interface?"
    default: true
    
  - name: includeTests
    type: confirm
    message: "Generate test file?"
    default: true
---

# Generate React Component: {{componentName}}

Create a new functional React component with the following specifications:

## Component: `{{componentName}}`

Create the component at: `src/components/{{componentName}}/{{componentName}}.tsx`

{{#if includeProps}}
Include a TypeScript interface for props with proper documentation.
{{/if}}

The component should:
- Use modern React patterns (hooks, functional components)
- Include proper error boundaries
- Be fully typed with TypeScript
- Export as default

{{#if includeTests}}
## Tests

Create a test file at: `src/components/{{componentName}}/{{componentName}}.test.tsx`

Include tests for:
- Component rendering
- Props handling
- User interactions
- Edge cases
{{/if}}

API Client Generator

Generate type-safe API clients from specifications.

---
title: TypeScript API Client
tags: [api, typescript, client]
variables:
  - name: serviceName
    type: input
    message: "Service name:"
    default: "APIClient"
    
  - name: baseUrl
    type: input
    message: "Base URL:"
    default: "https://api.example.com"
    
  - name: authType
    type: select
    message: "Authentication type:"
    choices: ["None", "API Key", "Bearer Token", "OAuth2"]
    
  - name: endpoints
    type: editor
    message: "List endpoints (one per line, format: METHOD /path):"
---

# Generate TypeScript API Client: {{serviceName}}

## Configuration
- Service: {{serviceName}}
- Base URL: {{baseUrl}}
- Authentication: {{authType}}

## Endpoints to implement:
{{endpoints}}

## Requirements

1. Create a fully typed TypeScript client
2. Include request/response interfaces
3. Implement proper error handling with custom error classes
4. Add retry logic with exponential backoff
5. Include request/response interceptors
6. Support cancellation via AbortController

{{#if (eq authType "API Key")}}
## API Key Authentication
- Accept API key in constructor
- Add to request headers: `X-API-Key: ${apiKey}`
{{/if}}

{{#if (eq authType "Bearer Token")}}
## Bearer Token Authentication
- Accept token in constructor or via method
- Add Authorization header: `Bearer ${token}`
- Include token refresh logic
{{/if}}

Generate clean, well-documented code following TypeScript best practices.

Documentation

README Generator

Create comprehensive README files for projects.

---
title: README Generator
tags: [documentation, readme]
variables:
  - name: projectName
    type: input
    message: "Project name:"
    required: true
    
  - name: description
    type: input
    message: "Short description:"
    required: true
    
  - name: projectType
    type: select
    message: "Project type:"
    choices: ["Library", "Application", "CLI Tool", "API", "Other"]
    
  - name: badges
    type: multiselect
    message: "Include badges:"
    choices: ["Build Status", "Coverage", "NPM Version", "License", "Downloads"]
    
  - name: sections
    type: multiselect
    message: "Include sections:"
    choices: ["Installation", "Usage", "API", "Examples", "Contributing", "License"]
---

# Generate README for: {{projectName}}

Create a comprehensive README.md with the following:

## Project Information
- **Name**: {{projectName}}
- **Type**: {{projectType}}
- **Description**: {{description}}

## Badges to include:
{{badges}}

## Sections to include:
{{sections}}

## Requirements:

1. Use clear, concise language
2. Include code examples with syntax highlighting
3. Add a table of contents for easy navigation
4. Follow README best practices
5. Make it scannable with proper headings
6. Include relevant emoji for visual appeal (sparingly)

{{#if (includes sections "Installation")}}
### Installation Section
- Include multiple package managers (npm, yarn, pnpm)
- Add system requirements if applicable
- Include any setup steps
{{/if}}

{{#if (includes sections "API")}}
### API Documentation
- Document all public methods
- Include parameter types and return values
- Add usage examples for each method
{{/if}}

Generate a professional README that makes the project easy to understand and use.

API Documentation

Generate comprehensive API documentation.

---
title: API Documentation Generator
tags: [api, documentation]
variables:
  - name: apiName
    type: input
    message: "API name:"
    
  - name: version
    type: input
    message: "API version:"
    default: "v1"
    
  - name: format
    type: select
    message: "Documentation format:"
    choices: ["OpenAPI", "Markdown", "Postman Collection"]
    
  - name: includeExamples
    type: confirm
    message: "Include request/response examples?"
    default: true
---

# Generate API Documentation: {{apiName}} {{version}}

Create {{format}} documentation for the API with:

## API Overview
- Name: {{apiName}}
- Version: {{version}}
- Format: {{format}}

## Requirements:

1. Document all endpoints with:
   - HTTP method and path
   - Description and purpose
   - Request parameters (path, query, body)
   - Response format and status codes
   - Error responses

{{#if includeExamples}}
2. Include examples:
   - cURL commands
   - Request/response bodies
   - Common use cases
{{/if}}

3. Add authentication details
4. Include rate limiting information
5. Document versioning strategy

Make the documentation clear, complete, and easy to follow.

Code Review

Pull Request Review

Comprehensive pull request analysis.

---
title: Pull Request Review
tags: [review, pr, git]
variables:
  - name: prUrl
    type: input
    message: "Pull request URL or description:"
    
  - name: focusAreas
    type: multiselect
    message: "Focus areas:"
    choices: ["Security", "Performance", "Code Style", "Testing", "Documentation", "Architecture"]
    
  - name: severity
    type: select
    message: "Review depth:"
    choices: ["Quick scan", "Standard review", "Deep dive"]
---

# Pull Request Review

## PR Information:
{{prUrl}}

## Review Focus Areas:
{{focusAreas}}

## Review Depth: {{severity}}

Please review this pull request and provide feedback on:

{{#if (includes focusAreas "Security")}}
### Security
- Check for potential vulnerabilities
- Review authentication/authorization
- Look for sensitive data exposure
- Verify input validation
{{/if}}

{{#if (includes focusAreas "Performance")}}
### Performance
- Identify potential bottlenecks
- Check for N+1 queries
- Review algorithm efficiency
- Memory usage concerns
{{/if}}

{{#if (includes focusAreas "Code Style")}}
### Code Style
- Consistency with project conventions
- Naming conventions
- Code organization
- Readability improvements
{{/if}}

{{#if (includes focusAreas "Testing")}}
### Testing
- Test coverage adequacy
- Edge case handling
- Test quality and maintainability
- Missing test scenarios
{{/if}}

Provide actionable feedback with specific examples and suggestions for improvement.

Code Refactoring

Analyze code for refactoring opportunities.

---
title: Code Refactoring Analysis
tags: [refactor, code-quality]
variables:
  - name: codeFile
    type: file
    message: "Select file to analyze:"
    filter: "*.{js,ts,jsx,tsx,py,java,go}"
    
  - name: targetMetrics
    type: multiselect
    message: "Target improvements:"
    choices: ["Readability", "Performance", "Maintainability", "Testability", "Type Safety"]
---

# Refactoring Analysis

## File: {{codeFile}}

## Target Improvements: {{targetMetrics}}

Analyze the code and suggest refactoring to improve:

{{#each targetMetrics}}
### {{this}}
{{#if (eq this "Readability")}}
- Simplify complex expressions
- Improve variable and function names
- Break down large functions
- Add helpful comments where needed
{{/if}}
{{#if (eq this "Performance")}}
- Optimize algorithms
- Reduce unnecessary computations
- Improve data structure choices
- Minimize memory allocations
{{/if}}
{{#if (eq this "Maintainability")}}
- Reduce coupling
- Improve cohesion
- Apply SOLID principles
- Extract reusable components
{{/if}}
{{/each}}

Provide specific before/after code examples for each suggestion.

Testing

Test Case Generator

Generate comprehensive test cases.

---
title: Test Case Generator
tags: [testing, qa]
variables:
  - name: testTarget
    type: input
    message: "What are you testing?"
    
  - name: testFramework
    type: select
    message: "Test framework:"
    choices: ["Jest", "Vitest", "Mocha", "Pytest", "JUnit"]
    
  - name: testTypes
    type: multiselect
    message: "Types of tests:"
    choices: ["Unit", "Integration", "E2E", "Performance", "Security"]
---

# Generate Test Cases

## Target: {{testTarget}}
## Framework: {{testFramework}}
## Test Types: {{testTypes}}

Generate comprehensive test cases covering:

{{#if (includes testTypes "Unit")}}
### Unit Tests
- Test individual functions/methods
- Mock dependencies
- Test edge cases
- Verify error handling
{{/if}}

{{#if (includes testTypes "Integration")}}
### Integration Tests
- Test component interactions
- Verify data flow
- Test with real dependencies
- Check system boundaries
{{/if}}

Include:
1. Test descriptions
2. Setup and teardown
3. Assertions
4. Edge cases
5. Error scenarios

Follow {{testFramework}} best practices and conventions.

DevOps

CI/CD Pipeline

Generate CI/CD pipeline configurations.

---
title: CI/CD Pipeline Generator
tags: [devops, ci, cd]
variables:
  - name: platform
    type: select
    message: "CI/CD platform:"
    choices: ["GitHub Actions", "GitLab CI", "Jenkins", "CircleCI", "Travis CI"]
    
  - name: projectType
    type: select
    message: "Project type:"
    choices: ["Node.js", "Python", "Java", "Go", "Docker"]
    
  - name: deployTarget
    type: select
    message: "Deployment target:"
    choices: ["AWS", "Google Cloud", "Azure", "Heroku", "Self-hosted"]
    
  - name: stages
    type: multiselect
    message: "Pipeline stages:"
    choices: ["Lint", "Test", "Build", "Security Scan", "Deploy", "Notify"]
---

# Generate {{platform}} Pipeline

## Project: {{projectType}}
## Deploy to: {{deployTarget}}
## Stages: {{stages}}

Create a CI/CD pipeline configuration with:

{{#each stages}}
### {{this}} Stage
{{#if (eq this "Lint")}}
- Code style checking
- Static analysis
- Commit message validation
{{/if}}
{{#if (eq this "Test")}}
- Unit tests
- Integration tests
- Coverage reporting
{{/if}}
{{#if (eq this "Security Scan")}}
- Dependency vulnerability scan
- Code security analysis
- Secret detection
{{/if}}
{{#if (eq this "Deploy")}}
- Environment-specific deployments
- Rollback capability
- Health checks
{{/if}}
{{/each}}

Include:
- Caching for dependencies
- Parallel job execution where possible
- Proper secret management
- Clear failure notifications

Docker Configuration

Generate Docker configurations.

---
title: Docker Setup Generator
tags: [docker, devops, containerization]
variables:
  - name: appType
    type: select
    message: "Application type:"
    choices: ["Node.js", "Python", "Java Spring", "Go", "Ruby on Rails"]
    
  - name: includeCompose
    type: confirm
    message: "Include docker-compose?"
    default: true
    
  - name: services
    type: multiselect
    message: "Additional services:"
    choices: ["PostgreSQL", "MySQL", "MongoDB", "Redis", "Elasticsearch"]
---

# Generate Docker Configuration

## Application: {{appType}}
## Services: {{services}}

Create Docker configuration files:

## Dockerfile
- Multi-stage build for {{appType}}
- Security best practices (non-root user)
- Minimal final image size
- Proper layer caching

{{#if includeCompose}}
## docker-compose.yml
- Application service
{{#each services}}
- {{this}} service with proper configuration
{{/each}}
- Network isolation
- Volume management
- Environment variables
{{/if}}

Include:
- Health checks
- Logging configuration
- Resource limits
- Development vs production configs

Workflow Automation

Git Hooks

Automate development workflows with Git hooks.

---
title: Git Hooks Setup
tags: [git, automation, hooks]
variables:
  - name: hooks
    type: multiselect
    message: "Select hooks to implement:"
    choices: ["pre-commit", "commit-msg", "pre-push", "post-merge"]
    
  - name: preCommitChecks
    type: multiselect
    message: "Pre-commit checks:"
    choices: ["Lint", "Format", "Tests", "Type Check", "Security Scan"]
---

# Setup Git Hooks

## Hooks to implement: {{hooks}}

{{#if (includes hooks "pre-commit")}}
### pre-commit hook
Checks to run: {{preCommitChecks}}

- Prevent commits with failing checks
- Run only on changed files
- Provide clear error messages
- Allow bypass with --no-verify
{{/if}}

{{#if (includes hooks "commit-msg")}}
### commit-msg hook
- Validate commit message format
- Enforce conventional commits
- Check message length
- Add ticket numbers if needed
{{/if}}

{{#if (includes hooks "pre-push")}}
### pre-push hook
- Run full test suite
- Check for console.log/debugger
- Verify no sensitive data
- Ensure branch protection
{{/if}}

Create hook scripts that are:
- Fast and reliable
- Easy to understand
- Well documented
- Cross-platform compatible

Best Practices

Prompt Organization

1. Use descriptive filenames: api-client-generator.md, not prompt1.md
2. Group by category: Create subdirectories for different types
3. Version your prompts: Use git to track changes
4. Share common patterns: Extract reusable templates

Variable Naming

variables:
  # Good: Clear, specific names
  - name: componentName
  - name: includeTests
  - name: deploymentTarget
  
  # Avoid: Generic names
  - name: input1
  - name: option
  - name: thing

Template Structure

1. Start with context: What you're generating and why
2. Be specific: Clear requirements and constraints
3. Include examples: Show desired output format
4. Add validation: Use regex patterns for inputs

Sharing Prompts

Create a git repository for team prompts:

# Create prompts repository
mkdir team-prompts && cd team-prompts
git init

# Organize by category
mkdir -p {frontend,backend,devops,docs}

# Add README
echo "# Team Prompt Library" > README.md

# Share with team
git remote add origin git@github.com:team/prompts.git
git push -u origin main

# Team members install
pt install git@github.com:team/prompts.git

Advanced Recipes

Multi-Stage Prompts

Chain prompts together for complex workflows:

# Generate API spec
pt run -s "api spec" > api-spec.md

# Generate client from spec
pt run -s "api client" -f api-spec.md > client.ts

# Generate tests
pt run -s "api tests" -f client.ts > client.test.ts

Conditional Templates

Use Handlebars conditions for dynamic content:

{{#if (eq environment "production")}}
  # Production Configuration
  - Enable monitoring
  - Set up alerts
  - Configure backups
{{else}}
  # Development Configuration
  - Enable debug mode
  - Use local services
  - Disable caching
{{/if}}

Custom Validators

Add complex validation to variables:

variables:
  - name: email
    type: input
    validate: "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$"
    
  - name: port
    type: input
    validate: "^([1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$"
    
  - name: version
    type: input
    validate: "^v?\\d+\\.\\d+\\.\\d+(-[a-zA-Z0-9]+)?$"

These examples demonstrate the flexibility and power of PUPT for various development workflows. Customize them for your specific needs and share your own recipes with the community!