ReddRadar
Agent skill
aico-frontend-plan
Create ATOMIC implementation plan for a single frontend task. Each step has exact code and verification command. IMPORTANT: This skill creates MICRO-LEVEL atomic steps, NOT macro architecture plans. For architecture planning or feature scoping, use EnterPlanMode instead. Use this skill when: - Running /frontend.plan command - User explicitly asks for "atomic steps", "step-by-step plan with verification" - Have a specific task from docs/reference/frontend/tasks/ and need implementation steps - Need granular steps: Setup (create files) → Implementation (write code) → Test (verify) → Commit DO NOT use for: - Architecture planning (use EnterPlanMode) - General development planning - Feature scoping or estimation Output: Present plan to user (not saved to file), each step includes Files, Action, and Verify command.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/aico-frontend-plan-yellinzero-aico
SKILL.md
Plan
Language Configuration
Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.
Process
- Read task: Get task details from
docs/reference/frontend/tasks/{story}.md - Read design: Load related design from
docs/reference/frontend/designs/ - Read constraints: Load
docs/reference/frontend/constraints.md - Break into atomic steps:
- Start with file creation/setup
- One section/feature per step
- Include verification for each step
- End with commit
- Keep steps atomic: One action per step
- Present plan to user (do not save to file)
Plan Format
# [Task Name] - Implementation Plan
> Project: [project-name]
> Created: YYYY-MM-DD
> Task: [task description]
> Design: docs/reference/frontend/designs/[name].md
> Estimated steps: N
## Step 1: [Action]
**Files**:
- Create: `src/components/[Name].tsx`
- Modify: `src/pages/[Page].tsx:L10-L20`
**Action**:
[Exact code or action to take]
**Verify**:
```bash
[verification command]
```
Expected: [expected output]
Step N: Commit
git add [files]
git commit -m "feat: [description]"
## Step Granularity
Each step = ONE atomic action:
| Good Steps | Bad Steps |
|------------|-----------|
| Create component file with imports | Create component with all logic |
| Add component skeleton (empty return) | Implement entire component |
| Implement single section | Implement all sections |
| Write one test case | Write all tests |
## Step Types
### Setup Step
```markdown
**Files**: Create: `src/components/ProfileCard.tsx`
**Action**: Create file with basic structure
**Verify**: `npx tsc --noEmit` → No errors
Implementation Step
**Files**: Modify: `src/components/ProfileCard.tsx:L8-L10`
**Action**: Implement header section with Avatar and name
**Verify**: `npm run dev` → Component renders correctly
Test Step
**Files**: Create: `src/components/__tests__/ProfileCard.test.tsx`
**Action**: Write unit test for profile name rendering
**Verify**: `npm test ProfileCard` → 1 test passed
Key Rules
- ALWAYS include verification command for each step
- MUST keep steps to 2-5 minutes of work
- ALWAYS end with a commit step
- NEVER combine multiple actions into one step
Common Mistakes
- ❌ Steps too large → ✅ One action per step
- ❌ Skip verification → ✅ Every step has verify command
- ❌ Vague actions → ✅ Include exact code
- ❌ No commit step → ✅ Always end with git commit
Didn't find tool you were looking for?