@dedesfr/prompter 0.6.0 → 0.6.2

package/prompt/wireframe-generator.md

@@ -0,0 +1,219 @@
+# UI/UX Wireframe Generation Prompt
+
+# Role & Expertise
+You are a Senior UI/UX Designer and Product Designer with 15+ years of experience creating wireframes for enterprise applications, SaaS platforms, and complex data-driven systems. You have deep expertise in translating technical specifications into intuitive user interfaces, understanding database relationships, and designing for API-driven architectures.
+
+# Context
+You will be provided with technical documentation that defines a product's requirements, data structure, and system capabilities. Your task is to generate comprehensive UI/UX wireframes that accurately represent the system's functionality while ensuring optimal user experience.
+
+# Input Documents You Will Receive
+1. **Functional Specification Document (FSD)** - Defines features, user stories, business logic
+2. **Entity Relationship Diagram (ERD)** - Shows data models, relationships, cardinality
+3. **Product Requirements Document (PRD)** - Outlines product goals, user personas, success metrics
+4. **API Contract** - Specifies endpoints, request/response structures, available data
+
+# Primary Objective
+Generate detailed, annotated wireframes that:
+- Accurately represent all specified functionality
+- Reflect the underlying data model and relationships
+- Support all API operations (CRUD, filters, pagination, etc.)
+- Align with user personas and product goals
+- Follow UX best practices and accessibility standards
+
+# Systematic Process
+
+## Phase 1: Document Analysis
+1. **FSD Analysis**
+   - Extract all user stories and acceptance criteria
+   - Identify primary user flows and edge cases
+   - Map business rules that affect UI behavior
+   - Note validation requirements and error states
+
+2. **ERD Analysis**
+   - Identify all entities that require UI representation
+   - Map relationships (1:1, 1:N, M:N) to UI patterns
+   - Determine required form fields from entity attributes
+   - Identify lookup/reference data for dropdowns/selectors
+
+3. **PRD Analysis**
+   - Extract user personas and their primary goals
+   - Identify key user journeys and success metrics
+   - Note priority features vs. nice-to-haves
+   - Understand product positioning and tone
+
+4. **API Contract Analysis**
+   - Map endpoints to screens/components needed
+   - Identify filterable/sortable fields for list views
+   - Determine pagination approach from API structure
+   - Note response data available for display
+   - Identify required vs. optional fields from request schemas
+
+## Phase 2: Information Architecture
+1. Create sitemap/navigation structure
+2. Define screen inventory
+3. Map user flows between screens
+4. Identify shared components
+
+## Phase 3: Wireframe Generation
+For each screen, produce:
+- Low-fidelity wireframe layout
+- Component specifications
+- Interaction annotations
+- State variations (empty, loading, error, success)
+- Responsive behavior notes
+
+# Output Format
+
+## For Each Screen/View, Provide:
+
+### [Screen Name]
+
+**Purpose:** [What this screen accomplishes]
+
+**User Story Reference:** [Link to relevant FSD user story]
+
+**API Dependencies:**
+- `GET /endpoint` - [What it provides]
+- `POST /endpoint` - [What it submits]
+
+**Wireframe Description:**
+
+┌─────────────────────────────────────────────────────────┐
+│  [Header/Navigation]                                     │
+├─────────────────────────────────────────────────────────┤
+│                                                          │
+│  [Main Content Area - describe layout]                   │
+│                                                          │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
+│  │  Component  │  │  Component  │  │  Component  │      │
+│  │  Description│  │  Description│  │  Description│      │
+│  └─────────────┘  └─────────────┘  └─────────────┘      │
+│                                                          │
+│  [Secondary Content / Sidebar if applicable]             │
+│                                                          │
+├─────────────────────────────────────────────────────────┤
+│  [Footer/Actions]                                        │
+└─────────────────────────────────────────────────────────┘
+
+**Component Specifications:**
+
+| Component | Type | Data Source (ERD/API) | Behavior |
+|-----------|------|----------------------|----------|
+| [Name] | [Type] | [Field/Endpoint] | [Interaction] |
+
+**Form Fields (if applicable):**
+
+| Field | Type | Validation | ERD Attribute | API Field |
+|-------|------|------------|---------------|-----------|
+| [Name] | [Input type] | [Rules] | [Entity.attribute] | [request.field] |
+
+**States:**
+- **Empty State:** [Description + messaging]
+- **Loading State:** [Skeleton/spinner approach]
+- **Error State:** [Error display pattern]
+- **Success State:** [Confirmation pattern]
+
+**Annotations:**
+1. [Interaction note with numbered reference]
+2. [Accessibility consideration]
+3. [Edge case handling]
+
+**Responsive Behavior:**
+- Desktop (1200px+): [Layout]
+- Tablet (768-1199px): [Adjustments]
+- Mobile (<768px): [Mobile-specific layout]
+
+---
+
+## Complete Deliverables Structure
+
+### 1. Executive Summary
+- Product overview
+- Key user personas summary
+- Primary user journeys identified
+- Screen count and complexity assessment
+
+### 2. Information Architecture
+- Sitemap diagram (ASCII or described)
+- Navigation structure
+- User flow diagrams
+
+### 3. Screen Inventory
+| Screen | Priority | Complexity | Related Entities | Key APIs |
+|--------|----------|------------|------------------|----------|
+
+### 4. Wireframes (per screen using format above)
+
+### 5. Component Library
+- Reusable components identified
+- Pattern specifications
+- Usage guidelines
+
+### 6. Interaction Patterns
+- Navigation patterns
+- Form submission flows
+- Error handling patterns
+- Loading state patterns
+
+### 7. Data Display Patterns
+- List/table views (based on ERD collections)
+- Detail views (based on ERD entities)
+- Relationship displays (based on ERD cardinality)
+
+### 8. Traceability Matrix
+| User Story (FSD) | Screen | ERD Entities | API Endpoints |
+|------------------|--------|--------------|---------------|
+
+# Quality Standards
+
+- [ ] Every FSD user story has corresponding UI representation
+- [ ] All ERD entities with user-facing data have display screens
+- [ ] All API endpoints are utilized in appropriate screens
+- [ ] PRD user personas can complete their primary journeys
+- [ ] Forms include all required fields from API contracts
+- [ ] Validation rules from FSD/API are reflected in form specs
+- [ ] Relationships from ERD are navigable in the UI
+- [ ] Empty, loading, and error states defined for all data-dependent views
+- [ ] Responsive behavior specified for all screens
+- [ ] Accessibility considerations noted
+
+# Special Instructions
+
+1. **Data Relationship Handling:**
+   - 1:1 relationships → Inline display or expandable sections
+   - 1:N relationships → List/table with detail view
+   - M:N relationships → Multi-select interfaces or tagging
+
+2. **API-Driven Patterns:**
+   - Pagination → Match API pagination style (offset/cursor)
+   - Filtering → Create filter UI for all filterable API params
+   - Sorting → Enable sort for all sortable API fields
+   - Search → Include if API supports search endpoints
+
+3. **Form Generation Logic:**
+   - Required API fields → Required form fields with validation
+   - Optional API fields → Optional with clear labeling
+   - Enum fields → Dropdown/radio based on option count
+   - Reference fields (FK) → Searchable dropdown with API lookup
+
+4. **Error Handling:**
+   - Map API error responses to user-friendly messages
+   - Include inline validation before submission
+   - Provide recovery paths for all error states
+
+5. **Maintain Traceability:**
+   - Reference specific FSD section numbers
+   - Note ERD entity names in component specs
+   - Include API endpoint paths in screen documentation
+
+---
+
+# Begin Analysis
+
+First, I will analyze each provided document systematically, then generate the complete wireframe documentation following this structure.
+
+**Please provide:**
+1. Functional Specification Document (FSD)
+2. Entity Relationship Diagram (ERD)
+3. Product Requirements Document (PRD)
+4. API Contract/Specification

package/src/cli/index.ts

@@ -4,19 +4,26 @@ import { UpdateCommand } from '../commands/update.js';
 import { ListCommand } from '../commands/list.js';
 import { GuideCommand } from '../commands/guide.js';
 import { UpgradeCommand } from '../commands/upgrade.js';
+import { ApiContractGeneratorCommand } from '../commands/api-contract-generator.js';
+import { ErdGeneratorCommand } from '../commands/erd-generator.js';
+import { FsdGeneratorCommand } from '../commands/fsd-generator.js';
+import { TddGeneratorCommand } from '../commands/tdd-generator.js';
+import { TddLiteGeneratorCommand } from '../commands/tdd-lite-generator.js';
+import { WireframeGeneratorCommand } from '../commands/wireframe-generator.js';
+import { DocumentExplainerCommand } from '../commands/document-explainer.js';
 
 const program = new Command();
 
 program
     .name('prompter')
     .description('Enhance prompts directly in your AI coding workflow')
-    .version('0.6.0');
+    .version('0.6.2');
 
 program
     .command('init')
     .description('Initialize Prompter in your project')
     .option('--tools <tools...>', 'Specify AI tools to configure (antigravity, claude, codex, github-copilot, opencode, kilocode)')
-    .option('--prompts <prompts...>', 'Specify prompts to install (ai-humanizer, epic-single, prd-agent-generator, prd-generator, product-brief, qa-test-scenario, skill-creator, story-single)')
+    .option('--prompts <prompts...>', 'Specify prompts to install (ai-humanizer, api-contract-generator, document-explainer, epic-single, erd-generator, fsd-generator, prd-agent-generator, prd-generator, product-brief, qa-test-scenario, skill-creator, story-single, tdd-generator, tdd-lite-generator, wireframe-generator)')
     .option('--no-interactive', 'Run without interactive prompts')
     .action(async (options) => {
         const initCommand = new InitCommand();
@@ -56,4 +63,60 @@ program
         await upgradeCommand.execute();
     });
 
+program
+    .command('api-contract-generator')
+    .description('Generate API Contract workflow files')
+    .action(async () => {
+        const command = new ApiContractGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('erd-generator')
+    .description('Generate ERD workflow files')
+    .action(async () => {
+        const command = new ErdGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('fsd-generator')
+    .description('Generate FSD workflow files')
+    .action(async () => {
+        const command = new FsdGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('tdd-generator')
+    .description('Generate TDD workflow files')
+    .action(async () => {
+        const command = new TddGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('tdd-lite-generator')
+    .description('Generate TDD-Lite workflow files')
+    .action(async () => {
+        const command = new TddLiteGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('wireframe-generator')
+    .description('Generate Wireframe workflow files')
+    .action(async () => {
+        const command = new WireframeGeneratorCommand();
+        await command.execute();
+    });
+
+program
+    .command('document-explainer')
+    .description('Generate Document Explainer workflow files')
+    .action(async () => {
+        const command = new DocumentExplainerCommand();
+        await command.execute();
+    });
+
 program.parse();

package/src/commands/api-contract-generator.ts

@@ -0,0 +1,118 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import { PrompterConfig, PROMPTER_DIR, PROMPTER_MARKERS } from '../core/config.js';
+import { registry } from '../core/configurators/slash/index.js';
+
+interface ApiContractGeneratorOptions {
+    tools?: string[];
+    noInteractive?: boolean;
+}
+
+export class ApiContractGeneratorCommand {
+    async execute(options: ApiContractGeneratorOptions = {}): Promise<void> {
+        const projectPath = process.cwd();
+
+        // Check if initialized
+        if (!await PrompterConfig.prompterDirExists(projectPath)) {
+            console.log(chalk.red('\n❌ Prompter is not initialized in this project.\n'));
+            console.log(chalk.gray('   Run `prompter init` first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        console.log(chalk.blue('\n📝 Generating API Contract Generator workflow files...\n'));
+
+        // Detect currently configured tools
+        const configuredTools = await this.detectConfiguredTools(projectPath);
+        
+        if (configuredTools.length === 0) {
+            console.log(chalk.yellow('⚠️  No tools configured yet.\n'));
+            console.log(chalk.gray('   Run `prompter init` to configure AI tools first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        // Generate api-contract-generator workflow files for all configured tools
+        let successCount = 0;
+        let failCount = 0;
+
+        for (const toolId of configuredTools) {
+            const configurator = registry.get(toolId);
+            if (configurator) {
+                try {
+                    // Generate only the api-contract-generator workflow file
+                    const body = configurator['getBody']('api-contract-generator');
+                    const relativePath = configurator['getRelativePath']('api-contract-generator');
+                    const filePath = path.join(projectPath, relativePath);
+                    
+                    // Ensure directory exists
+                    await fs.mkdir(path.dirname(filePath), { recursive: true });
+                    
+                    // Check if file exists
+                    const fileExists = await this.fileExists(filePath);
+                    
+                    if (fileExists) {
+                        console.log(chalk.yellow('⚠️') + ` ${chalk.cyan(relativePath)} already exists, skipping`);
+                        continue;
+                    }
+                    
+                    // Get frontmatter if needed
+                    const frontmatter = configurator['getFrontmatter']('api-contract-generator');
+                    const sections: string[] = [];
+                    if (frontmatter) {
+                        sections.push(frontmatter.trim());
+                    }
+                    sections.push(`${PROMPTER_MARKERS.start}\n${body}\n${PROMPTER_MARKERS.end}`);
+                    const content = sections.join('\n') + '\n';
+                    
+                    await fs.writeFile(filePath, content, 'utf-8');
+                    console.log(chalk.green('✓') + ` Created ${chalk.cyan(relativePath)}`);
+                    successCount++;
+                } catch (error) {
+                    console.log(chalk.red('✗') + ` Failed to create files for ${toolId}: ${error}`);
+                    failCount++;
+                }
+            }
+        }
+
+        // Success message
+        console.log(chalk.green(`\n✅ API Contract Generator workflow files created successfully!\n`));
+        console.log(chalk.blue('Next steps:'));
+        console.log(chalk.gray('  1. Use /api-contract-generator in your AI tool to create API contracts'));
+        console.log(chalk.gray('  2. API contracts will be saved to prompter/<slug>/api-contract.md\n'));
+    }
+
+    private async fileExists(filePath: string): Promise<boolean> {
+        try {
+            await fs.access(filePath);
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    private async detectConfiguredTools(projectPath: string): Promise<string[]> {
+        const configuredTools: string[] = [];
+        const allConfigurators = registry.getAll();
+
+        for (const configurator of allConfigurators) {
+            const targets = configurator.getTargets();
+            let hasFiles = false;
+
+            for (const target of targets) {
+                const filePath = path.join(projectPath, target.path);
+                if (await this.fileExists(filePath)) {
+                    hasFiles = true;
+                    break;
+                }
+            }
+
+            if (hasFiles) {
+                configuredTools.push(configurator.toolId);
+            }
+        }
+
+        return configuredTools;
+    }
+}

package/src/commands/document-explainer.ts

@@ -0,0 +1,118 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import { PrompterConfig, PROMPTER_MARKERS } from '../core/config.js';
+import { registry } from '../core/configurators/slash/index.js';
+
+interface DocumentExplainerOptions {
+    tools?: string[];
+    noInteractive?: boolean;
+}
+
+export class DocumentExplainerCommand {
+    async execute(options: DocumentExplainerOptions = {}): Promise<void> {
+        const projectPath = process.cwd();
+
+        // Check if initialized
+        if (!await PrompterConfig.prompterDirExists(projectPath)) {
+            console.log(chalk.red('\n❌ Prompter is not initialized in this project.\n'));
+            console.log(chalk.gray('   Run `prompter init` first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        console.log(chalk.blue('\n📖 Generating document explainer workflow files...\n'));
+
+        // Detect currently configured tools
+        const configuredTools = await this.detectConfiguredTools(projectPath);
+
+        if (configuredTools.length === 0) {
+            console.log(chalk.yellow('⚠️  No tools configured yet.\n'));
+            console.log(chalk.gray('   Run `prompter init` to configure AI tools first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        // Generate document-explainer workflow files for all configured tools
+        let successCount = 0;
+        let failCount = 0;
+
+        for (const toolId of configuredTools) {
+            const configurator = registry.get(toolId);
+            if (configurator) {
+                try {
+                    // Generate only the document-explainer workflow file
+                    const body = configurator['getBody']('document-explainer');
+                    const relativePath = configurator['getRelativePath']('document-explainer');
+                    const filePath = path.join(projectPath, relativePath);
+
+                    // Ensure directory exists
+                    await fs.mkdir(path.dirname(filePath), { recursive: true });
+
+                    // Check if file exists
+                    const fileExists = await this.fileExists(filePath);
+
+                    if (fileExists) {
+                        console.log(chalk.yellow('⚠️') + ` ${chalk.cyan(relativePath)} already exists, skipping`);
+                        continue;
+                    }
+
+                    // Get frontmatter if needed
+                    const frontmatter = configurator['getFrontmatter']('document-explainer');
+                    const sections: string[] = [];
+                    if (frontmatter) {
+                        sections.push(frontmatter.trim());
+                    }
+                    sections.push(`${PROMPTER_MARKERS.start}\n${body}\n${PROMPTER_MARKERS.end}`);
+                    const content = sections.join('\n') + '\n';
+
+                    await fs.writeFile(filePath, content, 'utf-8');
+                    console.log(chalk.green('✓') + ` Created ${chalk.cyan(relativePath)}`);
+                    successCount++;
+                } catch (error) {
+                    console.log(chalk.red('✗') + ` Failed to create files for ${toolId}: ${error}`);
+                    failCount++;
+                }
+            }
+        }
+
+        // Success message
+        console.log(chalk.green(`\n✅ Document explainer workflow files created successfully!\n`));
+        console.log(chalk.blue('Next steps:'));
+        console.log(chalk.gray('  1. Use /document-explainer in your AI tool to analyze complex documents'));
+        console.log(chalk.gray('  2. Provide your document content to get a comprehensive breakdown and insights\n'));
+    }
+
+    private async fileExists(filePath: string): Promise<boolean> {
+        try {
+            await fs.access(filePath);
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    private async detectConfiguredTools(projectPath: string): Promise<string[]> {
+        const configuredTools: string[] = [];
+        const allConfigurators = registry.getAll();
+
+        for (const configurator of allConfigurators) {
+            const targets = configurator.getTargets();
+            let hasFiles = false;
+
+            for (const target of targets) {
+                const filePath = path.join(projectPath, target.path);
+                if (await this.fileExists(filePath)) {
+                    hasFiles = true;
+                    break;
+                }
+            }
+
+            if (hasFiles) {
+                configuredTools.push(configurator.toolId);
+            }
+        }
+
+        return configuredTools;
+    }
+}

package/src/commands/erd-generator.ts

@@ -0,0 +1,118 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import { PrompterConfig, PROMPTER_DIR, PROMPTER_MARKERS } from '../core/config.js';
+import { registry } from '../core/configurators/slash/index.js';
+
+interface ErdGeneratorOptions {
+    tools?: string[];
+    noInteractive?: boolean;
+}
+
+export class ErdGeneratorCommand {
+    async execute(options: ErdGeneratorOptions = {}): Promise<void> {
+        const projectPath = process.cwd();
+
+        // Check if initialized
+        if (!await PrompterConfig.prompterDirExists(projectPath)) {
+            console.log(chalk.red('\n❌ Prompter is not initialized in this project.\n'));
+            console.log(chalk.gray('   Run `prompter init` first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        console.log(chalk.blue('\n📝 Generating ERD Generator workflow files...\n'));
+
+        // Detect currently configured tools
+        const configuredTools = await this.detectConfiguredTools(projectPath);
+        
+        if (configuredTools.length === 0) {
+            console.log(chalk.yellow('⚠️  No tools configured yet.\n'));
+            console.log(chalk.gray('   Run `prompter init` to configure AI tools first.\n'));
+            process.exitCode = 1;
+            return;
+        }
+
+        // Generate erd-generator workflow files for all configured tools
+        let successCount = 0;
+        let failCount = 0;
+
+        for (const toolId of configuredTools) {
+            const configurator = registry.get(toolId);
+            if (configurator) {
+                try {
+                    // Generate only the erd-generator workflow file
+                    const body = configurator['getBody']('erd-generator');
+                    const relativePath = configurator['getRelativePath']('erd-generator');
+                    const filePath = path.join(projectPath, relativePath);
+                    
+                    // Ensure directory exists
+                    await fs.mkdir(path.dirname(filePath), { recursive: true });
+                    
+                    // Check if file exists
+                    const fileExists = await this.fileExists(filePath);
+                    
+                    if (fileExists) {
+                        console.log(chalk.yellow('⚠️') + ` ${chalk.cyan(relativePath)} already exists, skipping`);
+                        continue;
+                    }
+                    
+                    // Get frontmatter if needed
+                    const frontmatter = configurator['getFrontmatter']('erd-generator');
+                    const sections: string[] = [];
+                    if (frontmatter) {
+                        sections.push(frontmatter.trim());
+                    }
+                    sections.push(`${PROMPTER_MARKERS.start}\n${body}\n${PROMPTER_MARKERS.end}`);
+                    const content = sections.join('\n') + '\n';
+                    
+                    await fs.writeFile(filePath, content, 'utf-8');
+                    console.log(chalk.green('✓') + ` Created ${chalk.cyan(relativePath)}`);
+                    successCount++;
+                } catch (error) {
+                    console.log(chalk.red('✗') + ` Failed to create files for ${toolId}: ${error}`);
+                    failCount++;
+                }
+            }
+        }
+
+        // Success message
+        console.log(chalk.green(`\n✅ ERD Generator workflow files created successfully!\n`));
+        console.log(chalk.blue('Next steps:'));
+        console.log(chalk.gray('  1. Use /erd-generator in your AI tool to create ERDs'));
+        console.log(chalk.gray('  2. ERDs will be saved to prompter/<slug>/erd.md\n'));
+    }
+
+    private async fileExists(filePath: string): Promise<boolean> {
+        try {
+            await fs.access(filePath);
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    private async detectConfiguredTools(projectPath: string): Promise<string[]> {
+        const configuredTools: string[] = [];
+        const allConfigurators = registry.getAll();
+
+        for (const configurator of allConfigurators) {
+            const targets = configurator.getTargets();
+            let hasFiles = false;
+
+            for (const target of targets) {
+                const filePath = path.join(projectPath, target.path);
+                if (await this.fileExists(filePath)) {
+                    hasFiles = true;
+                    break;
+                }
+            }
+
+            if (hasFiles) {
+                configuredTools.push(configurator.toolId);
+            }
+        }
+
+        return configuredTools;
+    }
+}