mantimon-tcg/.claude/skills/frontend-phase/SKILL.md

Frontend Phase Workflow Skill

Manage the phased frontend development workflow for Mantimon TCG.

Usage

/frontend-phase              # Show current phase status and next task
/frontend-phase status       # Same as above
/frontend-phase next         # Show detailed info about next incomplete task
/frontend-phase start <id>   # Mark task as in-progress
/frontend-phase done <id>    # Mark task as complete (with tests)
/frontend-phase plan         # Create detailed plan for next NOT_STARTED phase

Files

• Master Plan: frontend/PROJECT_PLAN_FRONTEND.json
• Phase Plans: frontend/project_plans/PHASE_FN_*.json

Workflow

Starting a New Phase

1. Run /frontend-phase plan to create the detailed plan for the next NOT_STARTED phase
2. Review and adjust the generated plan
3. Run /frontend-phase next to see the first task

Working on Tasks

1. Run /frontend-phase next to see task details
2. Run /frontend-phase start <task-id> to mark it in-progress
3. Implement the task following the details in the plan
4. Write tests with docstrings explaining "what" and "why"
5. Run /frontend-phase done <task-id> when complete with passing tests

Completing a Phase

When all tasks are complete:

1. Update master plan status to "COMPLETE"
2. Add completedDate
3. Increment completedPhases count

Instructions

When /frontend-phase or /frontend-phase status is invoked:

1. Read Master Plan

   frontend/PROJECT_PLAN_FRONTEND.json
   

2. Find Current Phase

   • Look for first phase with status: "in_progress" or status: "IN_PROGRESS"
   • If none, look for first phase with status: "NOT_STARTED"

3. Read Phase Plan (if exists)

   frontend/project_plans/PHASE_FN_*.json
   

4. Display Status

   ## Phase FN: [Phase Name]
   
   Status: IN_PROGRESS
   Progress: X/Y tasks complete
   
   ### Completed Tasks
   - [x] F0-001: Task name
   - [x] F0-002: Task name
   
   ### Next Task
   **F0-003: Task name**
   Category: components | Priority: 3
   Dependencies: [F0-001, F0-002]
   
   [Brief description from plan]
   
   Run `/frontend-phase next` for full details.
   

---

When /frontend-phase next is invoked:

1. Find the first task where completed: false and all dependencies are met
2. Display full task details:

   ## F0-003: Task Name
   
   **Category:** components
   **Priority:** 3
   **Dependencies:** F0-001, F0-002 (all complete)
   
   ### Description
   [Full description from plan]
   
   ### Implementation Details
   - Detail 1
   - Detail 2
   - Detail 3
   
   ### Files to Create/Modify
   - `src/components/Foo.vue` (create)
   - `src/App.vue` (modify)
   
   ### Notes
   [Any notes from the plan]
   
   ---
   Run `/frontend-phase start F0-003` to begin work.
   

---

When /frontend-phase start <task-id> is invoked:

1. Verify task exists and dependencies are met
2. Log that work is starting (no file modification needed)
3. Display the task details for reference
4. Create Claude Code tasks using TaskCreate if task has multiple sub-items

---

When /frontend-phase done <task-id> is invoked:

1. Verify tests exist and pass for the task (run npm run test)
2. Update the phase plan JSON:
   • Set completed: true
   • Set tested: true
3. Update completedTasks count in meta
4. Check if phase is complete (all tasks done)
5. If phase complete, prompt to update master plan

---

When /frontend-phase plan is invoked:

1. Find next NOT_STARTED phase in master plan
2. Read existing phase plans for format reference (check frontend/project_plans/)
3. Generate detailed plan based on:
   • Phase description and deliverables from master plan
   • Architecture patterns from frontend/CLAUDE.md
   • Existing code patterns in the codebase
   • Site plan and design system from master plan
4. Create frontend/project_plans/ directory if it doesn't exist
5. Write to frontend/project_plans/PHASE_FN_[name].json
6. Update master plan phase status to "in_progress"

Task Schema

{
  "id": "F0-001",
  "name": "Short task name",
  "description": "What this task accomplishes",
  "category": "setup|components|composables|stores|pages|game|tests|styling",
  "priority": 1,
  "completed": false,
  "tested": false,
  "dependencies": ["F0-000"],
  "files": [
    {"path": "src/components/Foo.vue", "status": "create|modify"}
  ],
  "details": [
    "Specific implementation step 1",
    "Specific implementation step 2"
  ],
  "estimatedHours": 2,
  "notes": "Optional implementation notes"
}

Phase Plan Schema

{
  "meta": {
    "phaseId": "PHASE_F0",
    "name": "Project Foundation",
    "version": "1.0.0",
    "created": "2026-01-30",
    "lastUpdated": "2026-01-30",
    "totalTasks": 8,
    "completedTasks": 0,
    "status": "in_progress"
  },
  "tasks": [
    // Array of task objects
  ]
}

Categories

Frontend-specific task categories:

Category	Description
setup	Project scaffolding, config, tooling
components	Vue components (UI, cards, game)
composables	Vue composables (useAuth, useDeck, etc.)
stores	Pinia stores
pages	Route page components
game	Phaser scenes, game objects, animations
tests	Test files and testing infrastructure
styling	Tailwind config, CSS, design system
api	API client, Socket.IO client

Rules

1. Dependencies First - Never start a task with incomplete dependencies
2. Tests Required - Every task must have tests before marking complete
3. Docstrings Required - Test docstrings explain "what" and "why"
4. Commit Approval - Never commit without user approval
5. One Task at a Time - Focus on completing current task before starting next
6. Update Plans - Keep plan files in sync with actual progress
7. Mobile-First - All UI work follows mobile-first responsive design
8. TypeScript Strict - No any types, explicit typing required

Test Command

Before marking a task complete:

cd frontend && npm run test
cd frontend && npm run lint
cd frontend && npm run typecheck

Memory Integration

After completing a task or phase, consider storing learnings:

python ~/.claude/skills/memorygraph/client.py store \
  --type solution \
  --title "Completed PHASE_F0 F0-003" \
  --content "Implemented Vue Router with auth guards..." \
  --tags "mantimon,frontend,vue-router" \
  --importance 0.6