ccstart 2.0.1 → 2.2.0

package/template/claude/docs/ROADMAP.md

@@ -9,7 +9,6 @@ High-level overview of the project, what it does, the main features
 1. **Task Planning**
    - Study the existing codebase and understand the current state
    - Use the **planner** agent to break down complex problems and create implementation roadmaps
-   - Create a plan document in the `/plans` directory for complex features
    - Update `ROADMAP.md` to include the new task under Development
    - Priority tasks should be inserted after the last completed task
 
@@ -23,7 +22,7 @@ High-level overview of the project, what it does, the main features
    - For new tickets, use empty checkboxes and no summary section
 
 3. **Task Implementation**
-   - Use the **coder** agent for implementing features, fixing bugs, and optimizing code
+   - Use the **backend** or **frontend** agent for implementing features, fixing bugs, and optimizing code
    - Follow the specifications in the ticket file
    - Implement features and functionality following project conventions
    - Update step progress within the ticket file after each step
@@ -38,15 +37,14 @@ High-level overview of the project, what it does, the main features
 5. **Roadmap Updates**
    - Mark completed tasks with ✅ in the roadmap
    - Add reference to the ticket file (e.g., `See: /tickets/TICKET-001-user-auth.md`)
-   - Update related plan documents if applicable
 
 ## Development
 
 ### Project Setup and Boilerplate
 - [x] Create Claude Code boilerplate structure ✅
   - Set up CLAUDE.md with project instructions
-  - Create agents directory with planner, coder, and checker agents
-  - Establish docs, plans, and tickets directories
+  - Create agents directory with planner, checker, backend, and frontend agents
+  - Establish docs, skills, and tickets directories
   - Add README files to all directories
 
 ### [Add your project tasks here]

package/template/claude/docs/agent-orchestration.md

@@ -3,38 +3,44 @@
 ## Overview
 This document defines the standard workflows for orchestrating multiple agents in Claude Code to complete complex tasks efficiently. Follow these patterns to ensure consistent and thorough task execution.
 
+## Available Agents
+
+- **Planner Agent** - Strategic planning and task breakdown
+- **Checker Agent** - Quality assurance and code review
+- **Backend Agent** - FastAPI and Python backend development
+- **Frontend Agent** - React and TypeScript frontend development
+
 ## Core Agent Workflows
 
 ### 1. Feature Development Workflow
 **Purpose**: Implement new features from conception to completion
 
 **Flow**:
-1. **Researcher Agent** → Gather requirements and understand existing codebase
-2. **Planner Agent** → Create detailed implementation plan and architecture
-3. **Coder Agent** → Implement the feature following the plan
+1. **Planner Agent** → Create detailed implementation plan and architecture
+2. **Backend Agent** → Implement server-side logic (if needed)
+3. **Frontend Agent** → Implement client-side components (if needed)
 4. **Checker Agent** → Test, review, and validate the implementation
 
 **Example Prompt**:
 ```
-"I need to add user authentication to the app. First use the researcher agent to understand the current architecture, then the planner to design the auth system, coder to implement it, and checker to validate."
+"I need to add user authentication to the app. First use the planner to design the auth system, backend to implement the API, frontend for the UI, and checker to validate."
 ```
 
 ### 2. Bug Fix Workflow
 **Purpose**: Systematically identify and fix bugs
 
 **Flow**:
-1. **Researcher Agent** → Investigate the bug and find root cause
-2. **Coder Agent** → Implement the fix
+1. **Planner Agent** → Investigate the bug and plan the fix
+2. **Backend Agent** or **Frontend Agent** → Implement the fix
 3. **Checker Agent** → Verify fix and check for regressions
 
 ### 3. Refactoring Workflow
 **Purpose**: Improve code quality without changing functionality
 
 **Flow**:
-1. **Researcher Agent** → Analyze current implementation and identify improvements
-2. **Planner Agent** → Design refactoring approach
-3. **Coder Agent** → Execute refactoring
-4. **Checker Agent** → Ensure functionality remains intact
+1. **Planner Agent** → Analyze current implementation and design refactoring approach
+2. **Backend Agent** or **Frontend Agent** → Execute refactoring
+3. **Checker Agent** → Ensure functionality remains intact
 
 ### 4. API Development Workflow
 **Purpose**: Design and implement APIs
@@ -49,41 +55,46 @@ This document defines the standard workflows for orchestrating multiple agents i
 **Purpose**: Create user interface components
 
 **Flow**:
-1. **Frontend Agent** → Design and implement UI components
-2. **Shadcn Agent** → Apply shadcn/ui styling (if using React)
+1. **Planner Agent** → Design component architecture
+2. **Frontend Agent** → Implement UI components
 3. **Checker Agent** → Test accessibility and responsiveness
 
-### 6. Blockchain Development Workflow
-**Purpose**: Develop Web3 features and smart contracts
+### 6. QA Workflow
+**Purpose**: Comprehensive quality assurance for code changes
 
 **Flow**:
-1. **Planner Agent** → Design smart contract architecture
-2. **Blockchain Agent** → Implement contracts and Web3 integration
-3. **Checker Agent** → Security audit and testing
+1. **Planner Agent** → Analyze changes and identify test requirements
+2. **Checker Agent** → Run automated tests and static analysis
+3. **Backend Agent** or **Frontend Agent** → Fix any issues found during QA
+4. **Checker Agent** → Verify fixes and perform final validation
+
+**Activities**:
+- Unit and integration testing
+- Code coverage analysis
+- Performance testing
+- Security vulnerability scanning
+- Accessibility compliance (for UI changes)
+- Cross-browser/platform testing
 
-## Orchestration Best Practices
 
-### 1. Always Start with Understanding
-- Use Researcher Agent first for non-trivial tasks
-- Understand existing code before making changes
-- Document findings in plans directory
+## Orchestration Best Practices
 
-### 2. Plan Before Implementation
-- Use Planner Agent for complex features
-- Create detailed plans in `/plans` directory
+### 1. Plan Before Implementation
+- Use Planner Agent first for non-trivial tasks
+- Create detailed plans before making changes
 - Break down large tasks into smaller tickets
 
-### 3. Sequential Execution
+### 2. Sequential Execution
 - Complete each agent's task before moving to the next
 - Use TodoWrite to track progress through the workflow
 - Don't skip agents unless explicitly instructed
 
-### 4. Validation is Mandatory
+### 3. Validation is Mandatory
 - Always end with Checker Agent
 - Run tests and linting
 - Verify all acceptance criteria
 
-### 5. Documentation Updates
+### 4. Documentation Updates
 - Update ROADMAP.md after completing workflows
 - Mark tickets as complete with summaries
 - Keep plans updated with outcomes
@@ -115,10 +126,12 @@ This document defines the standard workflows for orchestrating multiple agents i
 - Updating existing interfaces
 - Implementing design changes
 
-### When to use Blockchain Workflow:
-- Smart contract development
-- DeFi integrations
-- Web3 features
+### When to use QA Workflow:
+- After completing any feature implementation
+- Before merging code to main branch
+- When addressing production issues
+- After major refactoring
+- Before releases or deployments
 
 ## Example Multi-Agent Execution
 
@@ -126,22 +139,40 @@ This document defines the standard workflows for orchestrating multiple agents i
 User: "I need to add a payment processing feature"
 
 Claude's Response Flow:
-1. "I'll help you add payment processing. Let me start by using the researcher agent to understand your current architecture and any existing payment-related code."
-   [Uses Researcher Agent]
-
-2. "Based on my research, I'll now use the planner agent to design the payment processing system."
-   [Uses Planner Agent, creates plan in /plans]
+1. "I'll help you add payment processing. Let me start by using the planner agent to design the payment processing system."
+   [Uses Planner Agent, creates plan]
 
-3. "With the plan ready, I'll use the backend agent to implement the server-side payment processing."
+2. "With the plan ready, I'll use the backend agent to implement the server-side payment processing."
    [Uses Backend Agent]
 
-4. "Now I'll use the frontend agent to create the payment UI components."
+3. "Now I'll use the frontend agent to create the payment UI components."
    [Uses Frontend Agent]
 
-5. "Finally, let me use the checker agent to verify the implementation and ensure security."
+4. "Finally, let me use the checker agent to verify the implementation and ensure security."
    [Uses Checker Agent]
 ```
 
+### QA Workflow Example
+
+```
+User: "Can you run QA on the authentication feature we just implemented?"
+
+Claude's Response Flow:
+1. "I'll perform comprehensive QA on the authentication feature. Let me start with the planner agent to analyze what was changed and what needs testing."
+   [Uses Planner Agent to review changes]
+
+2. "Now I'll use the checker agent to run automated tests and perform security analysis."
+   [Uses Checker Agent - finds issues with password validation]
+
+3. "I found some issues with password validation. Let me use the backend agent to fix these."
+   [Uses Backend Agent to implement fixes]
+
+4. "Now let me run the checker agent again to verify all issues are resolved."
+   [Uses Checker Agent - all tests pass]
+
+5. "QA complete! All tests are passing, security checks are clean, and the authentication feature is ready for deployment."
+```
+
 ## Workflow Customization
 
 You can create custom workflows by:
@@ -149,4 +180,4 @@ You can create custom workflows by:
 2. Adding conditional paths based on findings
 3. Creating specialized workflows for your project
 
-Remember: The goal is systematic, thorough task completion with proper validation at each step.
+Remember: The goal is systematic, thorough task completion with proper validation at each step.

package/template/claude/skills/commit/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: commit
+description: Generate and execute git commits following conventional commit format. Use when the user wants to commit changes, create a commit, or says "/commit". Analyzes staged/unstaged changes and creates properly formatted commit messages with type, optional scope, and descriptive subject.
+---
+
+# Commit Skill
+
+Generate conventional commit messages and execute commits automatically.
+
+## Workflow
+
+1. Run `git status` (never use `-uall` flag) and `git diff` to analyze changes
+2. Run `git log --oneline -5` to see recent commit style
+3. Determine the appropriate commit type and scope from the changes
+4. Stage all relevant changes with `git add`
+5. Create the commit with a properly formatted message
+
+## Commit Format
+
+```
+<type>(<scope>): <subject>
+
+<body>
+
+<footer>
+```
+
+### Types
+
+| Type | Use for |
+|------|---------|
+| `feat` | New feature or functionality |
+| `fix` | Bug fix |
+| `docs` | Documentation only |
+| `style` | Formatting, semicolons, no code change |
+| `refactor` | Code change that neither fixes nor adds |
+| `test` | Adding or modifying tests |
+| `chore` | Maintenance, deps, build process |
+| `perf` | Performance improvements |
+
+### Scope
+
+Optional. Include when it adds clarity about what area is affected:
+- `feat(auth):` - authentication related
+- `fix(api):` - API related
+- `docs:` - scope omitted when obvious
+
+### Subject
+
+- Imperative mood ("add" not "added" or "adds")
+- No period at end
+- Max 50 characters
+- Focus on the "why" not the "what"
+
+### Body (optional)
+
+Add when the subject alone doesn't fully explain the change. Wrap at 72 characters.
+
+### Footer (optional)
+
+- Breaking changes: `BREAKING CHANGE: description`
+- Issue references: `Closes #123`
+
+## Commit Message Construction
+
+Use a HEREDOC for proper formatting:
+
+```bash
+git commit -m "$(cat <<'EOF'
+<type>(<scope>): <subject>
+
+<body if needed>
+EOF
+)"
+```
+
+## Examples
+
+Single file change:
+```
+fix(auth): handle expired tokens gracefully
+```
+
+Multiple related changes:
+```
+feat(api): add email notifications for shipped orders
+
+Send confirmation email when order status changes to shipped.
+Includes tracking number and estimated delivery date.
+```
+
+Breaking change:
+```
+refactor(config)!: migrate to environment-based configuration
+
+BREAKING CHANGE: config.json no longer supported, use .env files
+```

package/template/claude/skills/create-pr/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: create-pr
+description: Create GitHub pull requests with properly structured descriptions. Use when the user explicitly asks to create a PR, open a pull request, or says "/create-pr". Analyzes commits and changes to generate clear PR descriptions with summary, changes list, and UI changes when applicable.
+---
+
+# Create PR Skill
+
+Create GitHub pull requests with structured descriptions.
+
+## Workflow
+
+1. Run `git status` to check for uncommitted changes and remote tracking
+2. Run `git diff <base-branch>...HEAD` to see all changes since branching
+3. Run `git log <base-branch>..HEAD --oneline` to see all commits
+4. Analyze changes to draft PR title and description
+5. Push branch if needed with `git push -u origin <branch>`
+6. Create PR with `gh pr create`
+
+## PR Format
+
+**Title:** Use conventional commit format: `<type>(<scope>): <subject>`
+
+**Body:**
+```markdown
+## Summary
+<What this PR does and why - 1-3 sentences>
+
+## Changes
+- <Specific change 1>
+- <Specific change 2>
+- <Specific change 3>
+
+## UI Changes
+<Text description of visual/layout changes - omit section if no UI changes>
+```
+
+## Creating the PR
+
+Use HEREDOC for proper formatting:
+
+```bash
+gh pr create --title "<type>(<scope>): <subject>" --body "$(cat <<'EOF'
+## Summary
+<description>
+
+## Changes
+- <change 1>
+- <change 2>
+EOF
+)"
+```
+
+## Examples
+
+**Backend PR:**
+```markdown
+## Summary
+Add email notifications when orders are shipped. Customers receive
+an automated email with tracking information when their order status
+changes to "shipped".
+
+## Changes
+- Add `ShippingNotificationService` to handle email dispatch
+- Integrate with SendGrid API for email delivery
+- Add email template for shipping confirmation
+- Update `OrderController` to trigger notification on status change
+```
+
+**PR with UI changes:**
+```markdown
+## Summary
+Add dark mode toggle to application settings.
+
+## Changes
+- Add `ThemeContext` for managing theme state
+- Create `DarkModeToggle` component in settings page
+- Update CSS variables for dark theme colors
+- Persist theme preference to localStorage
+
+## UI Changes
+- New toggle switch in Settings > Appearance section
+- Toggle positioned right-aligned with "Dark Mode" label on left
+- Switch uses primary brand color when enabled
+```

package/template/claude/skills/create-ticket/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: create-ticket
+description: Create task tickets with proper numbering, template structure, and ticket-list.md updates. Use when the user wants to create a ticket, add a task, or says "/create-ticket". Automatically finds the next ticket number, creates the ticket file, and updates the centralized ticket list.
+---
+
+# Create Ticket Skill
+
+Create properly numbered tickets with consistent structure.
+
+## Workflow
+
+1. Scan `claude/tickets/` for existing `TICKET-XXX-*.md` files
+2. Determine next ticket number (highest + 1, or 001 if none)
+3. Create ticket file at `claude/tickets/TICKET-XXX-description.md`
+4. Update `claude/tickets/ticket-list.md` with new entry
+
+## Finding Next Ticket Number
+
+```bash
+ls claude/tickets/TICKET-*.md 2>/dev/null | grep -oE 'TICKET-[0-9]+' | sort -t'-' -k2 -n | tail -1
+```
+
+If no tickets exist, start with `TICKET-001`.
+
+## Ticket Template
+
+```markdown
+# TICKET-XXX: [Title]
+
+## Description
+[Detailed description of the task]
+
+## Acceptance Criteria
+- [ ] Criterion 1
+- [ ] Criterion 2
+- [ ] Criterion 3
+
+## Priority
+High/Medium/Low
+
+## Status
+Todo
+
+## Notes
+[Any additional context or notes]
+```
+
+## Updating ticket-list.md
+
+Add entry to appropriate priority section:
+
+```markdown
+### High Priority
+- 🔴 [TICKET-XXX](./TICKET-XXX-description.md) - Title here
+```
+
+**Status emojis:**
+| Status | Emoji |
+|--------|-------|
+| Todo | 🔴 |
+| In Progress | 🟡 |
+| Done | 🟢 |
+| Blocked | 🔵 |
+| Cancelled | ⚫ |
+
+## File Naming
+
+Convert title to kebab-case for filename:
+- "User Authentication" → `TICKET-001-user-authentication.md`
+- "Fix API Bug" → `TICKET-002-fix-api-bug.md`
+
+## Example
+
+User: "Create a ticket for adding user authentication"
+
+Creates `claude/tickets/TICKET-001-user-authentication.md`:
+```markdown
+# TICKET-001: User Authentication
+
+## Description
+Implement user authentication system for the application.
+
+## Acceptance Criteria
+- [ ] Users can register with email/password
+- [ ] Users can log in and receive session token
+- [ ] Protected routes require authentication
+
+## Priority
+High
+
+## Status
+Todo
+
+## Notes
+Consider using JWT for session management.
+```
+
+Updates `claude/tickets/ticket-list.md`:
+```markdown
+### High Priority
+- 🔴 [TICKET-001](./TICKET-001-user-authentication.md) - User Authentication
+```

package/template/claude/skills/design-feature/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: design-feature
+description: Guide feature development through contract establishment and UI design phases. Use when discussing, designing, or planning a new feature that is not yet implemented. Ensures requirements are clarified, acceptance criteria defined, and UI layouts drafted before any code is written.
+---
+
+# Design Feature Skill
+
+Guide new feature development through structured planning phases before implementation.
+
+## Workflow
+
+### Phase 1: Contract Establishment
+
+Before any design or code, establish the feature contract:
+
+1. **Clarify requirements** - Ask questions to fully understand the feature
+2. **Define scope** - What is and isn't included
+3. **Set acceptance criteria** - Specific, testable conditions for completion
+4. **Identify constraints** - Technical limitations, dependencies, edge cases
+
+Output a contract summary:
+
+```markdown
+## Feature Contract: [Feature Name]
+
+### Scope
+- [What's included]
+- [What's excluded]
+
+### Acceptance Criteria
+- [ ] Criterion 1
+- [ ] Criterion 2
+- [ ] Criterion 3
+
+### Constraints
+- [Technical constraints]
+- [Dependencies]
+```
+
+### Phase 2: UI Design
+
+After contract agreement, draft the UI layout in `claude/docs/UI_LAYOUT.md`.
+
+Include:
+
+1. **Desktop layout** - Full-width design
+2. **Mobile layout** - Responsive/stacked design
+3. **Component hierarchy** - Parent-child relationships
+4. **Interactions** - User actions and responses
+5. **Required assets** - Icons, images, fonts
+
+UI Layout template:
+
+```markdown
+# [Feature Name] - UI Layout
+
+## Desktop Layout
+
+```
+┌─────────────────────────────────────┐
+│  Header                             │
+├─────────────────────────────────────┤
+│  Component A    │  Component B      │
+│                 │                   │
+├─────────────────────────────────────┤
+│  Footer                             │
+└─────────────────────────────────────┘
+```
+
+## Mobile Layout
+
+```
+┌─────────────┐
+│  Header     │
+├─────────────┤
+│ Component A │
+├─────────────┤
+│ Component B │
+├─────────────┤
+│  Footer     │
+└─────────────┘
+```
+
+## Component Hierarchy
+
+- ParentComponent
+  - ChildComponent1
+  - ChildComponent2
+    - GrandchildComponent
+
+## Interactions
+
+| Action | Response |
+|--------|----------|
+| Click X | Shows Y |
+| Hover Z | Highlights |
+
+## Required Assets
+
+- [ ] Icon: description
+- [ ] Image: description
+```
+
+## Process Flow
+
+1. User describes feature idea
+2. Ask clarifying questions (no assumptions)
+3. Draft and agree on contract
+4. Draft UI layout in `claude/docs/UI_LAYOUT.md`
+5. Review UI together, adjust as needed
+6. Only after agreement, proceed to implementation