llm-multiverse-ui/.claude/commands/plan-story.md

Plan Story

You are the Story Planner agent. Your job is to create a detailed implementation plan for issue #$ARGUMENTS without writing any implementation code.

Gitea Connection

• Owner: llm-multiverse
• Repo: llm-multiverse-ui

Input

The issue number is provided as $ARGUMENTS. If empty, ask the user for an issue number.

Steps

1. Fetch Issue Details

Use mcp__gitea__issue_read to get the full issue (title, body, labels, milestone). Also fetch issue comments if any exist.

2. Read Project Context

Read these files to understand the project:

• CLAUDE.md — coding standards and workflow (if it exists)
• package.json — project dependencies and scripts
• implementation-plans/_index.md — existing plans index (if it exists)

3. Determine Technology Stack

From the project files, determine:

• Framework: React, Vue, Svelte, etc. (check package.json)
• Language: TypeScript or JavaScript
• Build tool: Vite, Next.js, Webpack, etc.
• Styling: CSS Modules, Tailwind, styled-components, etc.
• State management: Redux, Zustand, Pinia, etc.
• Testing: Vitest, Jest, Playwright, Cypress, etc.

4. Find Related Plans

From the index (if it exists), identify plans that share:

• The same feature area or component
• Overlapping affected files
• Dependency relationships (blocked-by / blocks)

Read those related plan files to understand prior decisions and patterns.

5. Explore the Codebase

Based on the issue's scope, explore relevant code:

• Use Glob to find files in affected directories
• Use Grep to find existing patterns, interfaces, types, and components
• Use Read to examine specific files mentioned in the issue or related plans
• Find similar implemented features to follow their patterns

6. Draft the Implementation Plan

The plan MUST include:

Metadata:

• Issue link, number, title
• Milestone and labels
• Status: PLANNED
• Technology (framework, language)
• Related plan references
• Blocked-by references

Acceptance Criteria:

• Copy directly from the issue body

Architecture Analysis:

• Which components/pages are affected
• Which API endpoints are involved
• Which state/stores are affected
• Dependencies on other features
• Existing patterns to follow (with file references)

Implementation Steps (phase by phase):

1. Types & Configuration — TypeScript types/interfaces, config constants, API types
2. Core Logic — Business logic, hooks, utilities, state management
3. Components — UI components, layouts, pages
4. API Integration — API calls, data fetching, error handling
5. Tests — Unit tests, component tests, E2E tests

Files to Create/Modify:

• Explicit file paths with a one-line purpose for each

Risks and Edge Cases:

• Potential issues and mitigation strategies

Important: Include type definitions, component signatures, and hook interfaces in the plan, but do NOT write actual implementation code.

7. Write the Plan File

Write the plan to implementation-plans/issue-$ARGUMENTS.md.

8. Update the Index

Create or update implementation-plans/_index.md:

• Add the new plan to the master table
• Add cross-references in the appropriate feature area section

9. Output

Display the completed plan for review.

Critical Rules

• Do NOT write implementation code — only the plan
• DO include type definitions, component signatures, and hook interfaces
• DO reference existing patterns with file paths and line numbers
• DO identify all files that need to be created or modified
• Follow the 5-phase implementation order (Types > Core Logic > Components > API Integration > Tests)
• Read CLAUDE.md for project-specific architectural constraints