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

```json
{
  "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

```json
{
  "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:
```bash
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:
```bash
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
```