vibefast-cli 0.2.4 → 0.3.1

package/2/.claude/agents/ux-designer.md

@@ -0,0 +1,45 @@
+---
+name: ux-optimizer
+description: Use this agent when you need to analyze, critique, or improve user experience aspects of your application. This includes reviewing interface designs, identifying usability issues, analyzing user flows, checking accessibility compliance, optimizing interaction patterns, or creating user journey maps. The agent excels at finding subtle UX problems that frustrate users and proposing data-driven solutions.
+color: yellow
+---
+
+You are an obsessive UX optimization specialist who treats user experience design like a precise science. You dive deep into every aspect of user interaction, analyzing flows with the dedication of someone who has made UX their life's passion.
+
+You approach UX analysis with extreme methodical precision:
+
+1. **Behavioral Analysis**: You meticulously examine user behavior patterns, identifying not just what users do, but why they do it. You measure interaction times, track click patterns, and identify moments of hesitation or confusion.
+
+2. **Friction Point Detection**: You have an uncanny ability to spot even the subtlest UX issues - that extra click that shouldn't be there, the form field that's slightly too small, the loading state that leaves users uncertain. Nothing escapes your scrutiny.
+
+3. **Empathetic Reasoning**: When explaining UX improvements, you channel perfect empathy for the user. You articulate not just what's wrong, but how it makes users feel and why it matters to their experience.
+
+4. **Scientific Methodology**: You treat UX optimization like solving an elegant equation. Every recommendation is backed by:
+   - Specific user behavior data or patterns
+   - Accessibility standards (WCAG 2.1 AA minimum)
+   - Platform-specific guidelines (iOS HIG, Material Design)
+   - Cognitive load principles
+   - Response time requirements
+
+5. **Comprehensive Testing**: You consider:
+   - Different device types and screen sizes
+   - Various user personas and skill levels
+   - Edge cases and error states
+   - Performance implications of UX choices
+   - Cultural and localization factors
+
+6. **Journey Mapping**: You create detailed user journey maps when needed, identifying:
+   - Entry points and user goals
+   - Decision points and potential confusion
+   - Emotional highs and lows
+   - Opportunities for delight
+
+7. **Solution Design**: Your redesigns make every interaction feel effortless and intuitive. You provide:
+   - Specific, implementable improvements
+   - Priority rankings based on impact vs effort
+   - Before/after comparisons
+   - Success metrics to measure improvements
+
+You communicate findings with the passion of someone who genuinely loves making experiences better. You're not satisfied until every interaction feels natural, every flow is optimized, and every user feels understood and respected by the interface.
+
+Remember: Great UX isn't about making things pretty - it's about making them disappear. The best interface is the one users don't have to think about.

package/2/.claude/commands/create-app-design.md

@@ -0,0 +1,279 @@
+---
+allowed-tools: Read, Glob, Grep, Write, MultiEdit, TodoWrite
+description: Generate comprehensive app design document with project stage assessment
+---
+
+# Generate Application Design Document
+
+**User Request:** $ARGUMENTS
+
+## Context
+
+- Project root: !`pwd`
+- Package.json: @package.json
+- Existing design docs: !`ls -la .claude/docs/ 2>/dev/null || echo "No .claude/docs directory yet"`
+
+## Goal
+
+Create a comprehensive Application Design Document based on deep codebase analysis and user input. The document provides a high-level overview of the application's architecture, core features, user experience, and business logic while remaining technology-agnostic and focused on the "what" rather than the "how".
+
+## Process
+
+### 1. Initial Analysis
+
+- Analyze project structure and existing codebase
+- Review package.json for project name and dependencies
+- Check for existing documentation in .claude/docs/
+- Identify key application features and patterns
+- **Think deeply** about the application's purpose and architecture
+
+### 2. Codebase Deep Dive
+
+**Think harder about the application's architecture and business logic.**
+
+Analyze the codebase to understand:
+
+- **Application Structure:** Main modules, features, and components
+- **User Flows:** Authentication, navigation, key user journeys
+- **Data Models:** Conceptual relationships and entities
+- **Business Logic:** Core rules, workflows, and processes
+- **Integrations:** External services and APIs
+- **Security Patterns:** Authentication and authorization approaches
+
+_Extended thinking helps identify non-obvious patterns, understand complex business rules from code, and make strategic decisions about what aspects are most important to document._
+
+### 3. Interactive Q&A Session
+
+**CRITICAL:** Ask project stage question FIRST, then 4-7 additional questions:
+
+- Use lettered/numbered options for easy response
+- Focus on business goals and user needs
+- Gather context for proper documentation
+
+### 4. Update Project Configuration
+
+Based on project stage response:
+
+- Update `CLAUDE.md` "Project Status" section
+- Set appropriate DO/DON'T priorities for the stage
+- Document stage-specific development guidelines
+
+### 5. Generate Document
+
+Create comprehensive app design document following the standard structure
+
+### 6. Save and Organize
+
+- Create `.claude/docs/` directory if needed
+- Save as `app-design-document.md`
+- Suggest next steps (tech stack doc, PRD, etc.)
+
+## Required Questions Template
+
+### 🎯 CRITICAL: Project Stage Assessment (Ask First!)
+
+**1. What stage is your application currently in?**
+
+a) **Pre-MVP** - Building initial version, not deployed to production yet  
+ b) **MVP** - Basic version deployed and live with early users  
+ c) **Production** - Mature application with established user base  
+ d) **Enterprise** - Large scale deployment, multiple teams involved
+
+**2. Based on your selected stage, here are the development priorities:**
+
+- **Pre-MVP Priorities:**
+  - ✅ DO: Core functionality, security basics, input validation, working features
+  - ❌ DON'T: Unit tests, performance optimization, accessibility polish, perfect code
+  - 🚀 Focus: Ship fast with security, iterate based on feedback
+
+- **MVP Priorities:**
+  - ✅ DO: Critical path testing, basic monitoring, user feedback loops
+  - ❌ DON'T: Comprehensive test coverage, advanced patterns, premature optimization
+  - 🚀 Focus: Stability for early users, rapid iteration
+
+- **Production Priorities:**
+  - ✅ DO: Testing, monitoring, performance, accessibility, documentation
+  - ❌ DON'T: Skip security reviews, ignore technical debt
+  - 🚀 Focus: Reliability, scalability, user experience
+
+- **Enterprise Priorities:**
+  - ✅ DO: Comprehensive testing, security audits, team coordination, compliance
+  - ❌ DON'T: Skip documentation, ignore code standards
+  - 🚀 Focus: Team efficiency, maintainability, compliance
+
+### 📋 Context-Specific Questions (Ask 4-7 based on analysis)
+
+**3. Application Purpose & Users**
+
+- What is the primary problem your application solves?
+- Who are your target users and what are their main goals?
+
+**4. Unique Value Proposition**
+
+- What makes your application unique compared to existing solutions?
+- What's your competitive advantage?
+
+**5. User Roles & Permissions**
+
+- What different types of users interact with your system?
+- Examples: end users, admins, moderators, content creators, viewers
+
+**6. Core User Journeys**
+
+- What are the 2-3 most critical user flows?
+- Example: Sign up → Create content → Share → Get feedback
+
+**7. Business Model & Growth**
+
+- How does this application generate value?
+- Options: SaaS subscription, marketplace, freemium, advertising, one-time purchase
+
+**8. Integration Ecosystem**
+
+- What external services must you integrate with?
+- Examples: payment processors, email services, analytics, social platforms
+
+**9. Scale & Performance Goals**
+
+- What scale are you planning for in the next 12 months?
+- Users: dozens, hundreds, thousands, millions?
+- Geographic: local, national, global?
+
+**10. Success Metrics**
+
+- How will you measure if your application is successful?
+- Examples: user retention, revenue, engagement, conversion rates
+
+## Document Structure
+
+The generated document must follow this high-level structure:
+
+### **Introduction**
+
+- Application overview and purpose
+- Target audience and user base
+- Core value proposition
+- Business context and goals
+
+### **Core Features**
+
+- **Feature Category 1:** (e.g., User Management)
+  - Purpose and user benefit
+  - Key functionalities
+  - User experience considerations
+- **Feature Category 2:** (e.g., Content Creation)
+  - Purpose and user benefit
+  - Key functionalities
+  - User experience considerations
+- **[Additional feature categories as needed]**
+
+### **User Experience**
+
+- User personas and roles
+- Key user journeys and flows
+- Interface design principles
+- Accessibility and usability considerations
+
+### **System Architecture**
+
+- High-level system components
+- Data flow and relationships
+- Integration points and external services
+- Security and privacy approach
+
+### **Business Logic**
+
+- Core business rules and processes
+- Data models and relationships (conceptual)
+- Workflow and state management
+- Validation and business constraints
+
+### **Future Considerations**
+
+- Planned enhancements and features
+- Scalability considerations
+- Potential integrations
+- Long-term vision and roadmap
+
+## Target Audience
+
+The document should be accessible to:
+
+- **Business stakeholders** who need to understand the application's purpose and capabilities
+- **Product managers** planning features and roadmaps
+- **Designers** creating user interfaces and experiences
+- **New developers** joining the project who need a high-level understanding
+- **Technical leaders** making architectural decisions
+
+The language should be clear, business-focused, and avoid technical implementation details.
+
+## Writing Principles
+
+### DO:
+
+- **Business Focus:** Describe WHAT the application does, not HOW
+- **User Value:** Emphasize benefits and outcomes for users
+- **Clear Language:** Write for non-technical stakeholders
+- **Visual Thinking:** Use diagrams and flows where helpful
+- **Future Ready:** Consider growth and evolution paths
+
+### DON'T:
+
+- **Technical Details:** No code snippets or implementation specifics
+- **Technology Stack:** Save for tech-stack.md document
+- **Database Schemas:** Keep data models conceptual
+- **API Specifications:** Focus on capabilities, not endpoints
+- **Performance Metrics:** Describe goals, not technical benchmarks
+
+## Output
+
+- **Format:** Markdown (`.md`)
+- **Location:** `.claude/docs/`
+- **Filename:** `app-design-document.md`
+
+## Execution Steps
+
+### 1. Start with Analysis
+
+- Use Read, Glob, and Grep to explore the codebase
+- Identify key features and patterns
+- Look for existing documentation
+- **Use extended thinking:** "Think deeply about this codebase's architecture, business purpose, and how different components work together to serve users"
+
+### 2. Interactive Q&A
+
+- **MUST ASK PROJECT STAGE FIRST**
+- Present questions with numbered/lettered options
+- Wait for user responses before proceeding
+
+### 3. Update Project Status
+
+```markdown
+## Project Status
+
+**Current Stage**: [Stage from user response]
+
+### DO Care About (Production-Ready Foundation)
+
+[Stage-specific priorities]
+
+### DO NOT Care About (Skip for Velocity)
+
+[Stage-specific items to skip]
+
+### Development Approach
+
+[Stage-specific development focus]
+```
+
+### 4. Generate Document
+
+- Follow the standard structure
+- Tailor content to project stage
+- Keep language accessible
+
+### 5. Save and Next Steps
+
+- Create directory: `mkdir -p .claude/docs`
+- Save document: `.claude/docs/app-design-document.md`
+- Suggest: "Would you like me to create a technical stack document next?"

package/2/.claude/commands/create-prd-interactive.md

@@ -0,0 +1,113 @@
+---
+allowed-tools: Bash, Read, Write, Glob, Grep, Task, TodoWrite, mcp__taskmaster-ai__parse_prd
+description: Generate a PRD interactively with clarifying questions for complex features
+---
+
+# Generate a Product Requirements Document (PRD)
+
+## Context
+
+- **User Request:** $ARGUMENTS
+- **Project Root:** !`pwd`
+- **Existing PRDs:** !`ls -la .claude/docs/prd-*.md 2>/dev/null || echo "No existing PRDs found"`
+- **Project Status:** @CLAUDE.md#project-status
+- **Tech Stack:** @.claude/docs/tech-stack.md
+- **Project Structure:** !`bash .claude/scripts/tree.sh`
+- **PRD Template:** @.taskmaster/templates/example_prd.md
+
+## Goal
+
+To create a detailed Product Requirements Document (PRD) in Markdown format. The PRD should be clear, actionable, and suitable for a junior developer to understand and implement.
+
+## Process
+
+1. **Analyze Feature Request:** Think deeply about the user's feature request and its implications for the codebase.
+
+2. **Codebase Analysis:**
+   - Search for relevant existing code patterns
+   - Review components that might be affected
+   - Identify potential integration points
+   - Consider architectural impacts
+
+3. **Ask Clarifying Questions:**
+   - Ask 4-6 targeted questions based on codebase analysis
+   - Provide lettered/numbered options for easy response
+   - Focus on understanding the "what" and "why", not the "how"
+
+4. **Generate PRD:**
+   - Follow the example PRD structure exactly
+   - Include all required sections from the template
+   - Ensure clarity for junior developers
+
+5. **Save and Next Steps:**
+   - Save as `prd-[feature-name].md` in `.claude/docs/`
+   - Suggest running Task Master parse command
+
+## Clarifying Questions Framework
+
+Adapt questions based on the specific feature request provided above. Consider these areas:
+
+- **Problem/Goal:** "What problem does this feature solve for the user?" or "What is the main goal we want to achieve with this feature?"
+- **Target User:** "Who is the primary user of this feature?"
+- **Core Functionality:** "Can you describe the key actions a user should be able to perform with this feature?"
+- **User Stories:** "Could you provide a few user stories? (e.g., As a [type of user], I want to [perform an action] so that [benefit].)"
+- **User Experience:** "Describe the user journey and key user flows for this feature"
+- **Scope/Boundaries:** "Are there any specific things this feature _should not_ do (non-goals)?"
+- **Technical Integration:** "What existing systems or components should this integrate with?"
+- **Data Requirements:** "What kind of data does this feature need to display or manipulate?"
+- **Design/UI:** "Are there any existing design patterns or UI guidelines to follow?" or "Can you describe the desired look and feel?"
+- **Development Phases:** "Should this be built in phases? What's the MVP vs future enhancements?"
+- **Dependencies:** "What needs to be built first? Are there logical dependencies?"
+- **Success Criteria:** "How will we know when this feature is successfully implemented?"
+- **Edge Cases:** "Are there any potential risks or technical challenges we should consider?"
+
+## PRD Structure Requirements
+
+The PRD must follow the exact structure from @.taskmaster/templates/example_prd.md:
+
+### `<context>` Section
+
+1. **Overview:** High-level overview of the product/feature, what problem it solves, who it's for, and why it's valuable
+2. **Project Context:** Include the standard project status information. CRITICIAL: DO NOT forget this section. Read the mentioned files if needed.
+3. **Core Features:** List and describe the main features, including what each does, why it's important, and how it works at a high level
+4. **User Experience:** Describe user personas, key user flows, and UI/UX considerations
+
+### `<PRD>` Section
+
+1. **Technical Architecture:** System components, data models, APIs and integrations, infrastructure requirements
+2. **Development Roadmap:** Break down into phases (MVP requirements, future enhancements) focusing on scope and detailing exactly what needs to be built
+3. **Logical Dependency Chain:** Define the logical order of development, which features need to be built first, getting quickly to something usable/visible, properly pacing and scoping each feature without time estimates
+4. **Risks and Mitigations:** Technical challenges, figuring out the MVP that can be built upon, resource constraints
+5. **Appendix:** Research findings, technical specifications, additional information
+
+## Target Audience
+
+Assume the primary reader of the PRD is a **junior developer**. Therefore, requirements should be explicit, unambiguous, and avoid jargon where possible. Provide enough detail for them to understand the feature's purpose and core logic.
+
+## Output
+
+- **Format:** Markdown (`.md`)
+- **Location:** `.claude/docs/`
+- **Filename:** `prd-[feature-name].md`
+
+## Final Instructions
+
+1. **Think deeply** about the feature request and its architectural implications
+2. **Do NOT start implementing** - only create the PRD document
+3. **Ask clarifying questions** with lettered/numbered options
+4. **Generate complete PRD** following the template structure exactly
+5. **Save the PRD** to `.claude/docs/prd-[feature-name].md`
+6. **Suggest next step:** "Use `/parse` or `task-master parse-prd .claude/docs/prd-[feature-name].md` to convert this PRD into Task Master tasks"
+
+## Example Usage
+
+```
+/project:prd user authentication system
+```
+
+This will:
+
+1. Analyze the codebase for existing auth patterns
+2. Ask questions about auth requirements
+3. Generate a comprehensive PRD
+4. Save it as `prd-user-authentication.md`

package/2/.claude/commands/create-prd.md

@@ -0,0 +1,111 @@
+---
+allowed-tools: Bash, Read, Write, Glob, Grep, Task, TodoWrite, mcp__taskmaster-ai__parse_prd
+description: Generate a PRD directly without questions for simple, well-defined features
+---
+
+# Generate a Quick Product Requirements Document (PRD)
+
+## Context
+
+- **User Request:** $ARGUMENTS
+- **Project Root:** !`pwd`
+- **Existing PRDs:** !`ls -la .claude/docs/prd-*.md 2>/dev/null || echo "No existing PRDs found"`
+- **Project Status:** @CLAUDE.md#project-status
+- **Project Structure:** !`bash .claude/scripts/tree.sh`
+- **Tech Stack:** @.claude/docs/tech-stack.md
+- **PRD Template:** @.taskmaster/templates/example_prd.md
+
+## Goal
+
+To quickly create a Product Requirements Document (PRD) without asking clarifying questions. Best suited for simple, well-defined features where requirements are clear.
+
+## Process
+
+1. **Analyze Feature Request:**
+   - Think deeply about the user's feature request
+   - Make reasonable assumptions based on common patterns
+   - Review existing codebase for context
+
+2. **Codebase Analysis:**
+   - Search for relevant existing code patterns
+   - Review components that might be affected
+   - Identify potential integration points
+   - Consider architectural impacts
+
+3. **Generate PRD Immediately:**
+   - Follow the example PRD structure exactly
+   - Include all required sections from the template
+   - Make reasonable assumptions for unclear requirements
+   - Document assumptions clearly in the PRD
+
+4. **Save and Next Steps:**
+   - Save as `prd-[feature-name].md` in `.claude/docs/`
+   - Suggest running Task Master parse command
+
+## PRD Structure Requirements
+
+The PRD must follow the exact structure from @.taskmaster/templates/example_prd.md:
+
+### `<context>` Section
+
+1. **Overview:** High-level overview of the product/feature, what problem it solves, who it's for, and why it's valuable
+2. **Project Context:** Include the standard project status information. CRITICAL: DO NOT forget this section. Read the mentioned files if needed.
+3. **Core Features:** List and describe the main features, including what each does, why it's important, and how it works at a high level
+4. **User Experience:** Describe user personas, key user flows, and UI/UX considerations
+
+### `<PRD>` Section
+
+1. **Technical Architecture:** System components, data models, APIs and integrations, infrastructure requirements
+2. **Development Roadmap:** Break down into phases (MVP requirements, future enhancements) focusing on scope and detailing exactly what needs to be built
+3. **Logical Dependency Chain:** Define the logical order of development, which features need to be built first, getting quickly to something usable/visible, properly pacing and scoping each feature without time estimates
+4. **Risks and Mitigations:** Technical challenges, figuring out the MVP that can be built upon, resource constraints
+5. **Appendix:** Research findings, technical specifications, additional information
+
+## Assumptions Section
+
+When using quick mode, include an "Assumptions" section at the beginning of the PRD documenting:
+
+- Key assumptions made about requirements
+- Default choices for ambiguous features
+- Suggested areas that may need refinement
+
+## Final Instructions
+
+1. **Think deeply** about the feature request and make intelligent assumptions
+2. **Do NOT ask questions** - proceed directly to PRD generation
+3. **Document assumptions** clearly in the PRD
+4. **Generate complete PRD** following the template structure exactly
+5. **Save the PRD** to `.claude/docs/prd-[feature-name].md`
+6. **Suggest next step:** "Use `/parse` or `task-master parse-prd .claude/docs/prd-[feature-name].md` to convert this PRD into Task Master tasks"
+
+## Example Usage
+
+```
+/project:prd-quick user profile page with avatar upload
+```
+
+This will:
+
+1. Analyze the codebase for existing user/profile patterns
+2. Make assumptions about profile fields and avatar requirements
+3. Generate a comprehensive PRD immediately
+4. Save it as `prd-user-profile-page.md`
+5. Document all assumptions made
+
+## When to Use Quick Mode
+
+✅ **Good for:**
+
+- Simple CRUD features
+- Standard UI components
+- Well-defined integrations
+- Features with clear precedent in codebase
+
+❌ **Avoid for:**
+
+- Complex architectural changes
+- Features with many unknowns
+- Security-critical features
+- Features affecting multiple systems
+
+For complex features, use `/project:prd` for the full interactive process.