ワンクリックで
writing-task-plans
// Writes structured task plans (epics with phased sub-tasks) in the tasks/ directory. Use when asked to plan, break down, or write tasks for a feature, migration, or refactor.
// Writes structured task plans (epics with phased sub-tasks) in the tasks/ directory. Use when asked to plan, break down, or write tasks for a feature, migration, or refactor.
Build and evolve Giselle Sandbox Agent apps on Next.js. Use when developers want to scaffold a new OpenClaw-like agent experience on Vercel, build workspace/artifact flows, add browser-tool interactions, or update an existing agent through reviewable file diffs. Triggers on "giselle sandbox agent", "build agent app", "workspace artifacts", "browser tool agent", "artifact download", and "update agent by diff".
Guides marketing page composition using humanistic narrative principles. Use when writing, reviewing, or structuring marketing pages, landing pages, or product story pages.
| name | writing-task-plans |
| description | Writes structured task plans (epics with phased sub-tasks) in the tasks/ directory. Use when asked to plan, break down, or write tasks for a feature, migration, or refactor. |
Creates structured, agent-executable task plans following the proven pattern in tasks/.
tasks/{epic-slug}/
├── AGENTS.md ← Epic overview (the "map")
├── phase-0-{name}.md ← First sub-task
├── phase-1-{name}.md ← Second sub-task
├── ...
└── phase-N-{name}.md ← Final sub-task
Before writing any task files, deeply understand:
package.json, tsconfig.json, build tools, linting, and folder structure of the project.AGENTS.md (Epic Overview)This is the single source of truth. It must contain ALL of the following sections:
# Epic: {Title}
> **GitHub Epic:** #{number} · **Sub-issues:** #{start}–#{end} (Phases 0–N)
## Goal
One paragraph: what the codebase looks like AFTER this epic is complete.
## Why
Why the current approach is insufficient. What benefits the new approach brings.
Use a bullet list for concrete benefits.
## Architecture Overview
A mermaid diagram (sequenceDiagram or flowchart) showing the end-state architecture.
Include all major components and their interactions.
## Package / Directory Structure
Show the relevant directory tree with annotations:
- Which directories/files are NEW
- Which are EXISTING (modified or referenced)
- Which are DELETED
## Task Dependency Graph
A mermaid flowchart showing phase dependencies.
Explicitly note which phases can run in parallel.
## Task Status
A table tracking each phase:
| Phase | Task File | Status | Description |
|---|---|---|---|
| 0 | [phase-0-xxx.md](./phase-0-xxx.md) | 🔲 TODO | Short description |
| 1 | [phase-1-xxx.md](./phase-1-xxx.md) | 🔲 TODO | Short description |
> **How to work on this epic:** Read this file first to understand the full architecture.
> Then check the status table above. Pick the first `🔲 TODO` task whose dependencies
> (see dependency graph) are `✅ DONE`. Open that task file and follow its instructions.
> When done, update the status in this table to `✅ DONE`.
## Key Conventions
Bullet list of project conventions relevant to this epic:
monorepo tool, build tool, formatter, TypeScript config, key library versions, patterns to follow.
## Existing Code Reference
A table of files the agent MUST read before working on tasks:
| File | Relevance |
|---|---|
| `path/to/file.ts` | What pattern or type to reuse from this file |
## Domain-Specific Reference (optional)
Tables or sections that capture domain knowledge needed across multiple phases
(e.g., event type mappings, API schemas, protocol details).
Always use dark fills with light text:
style NodeId fill:#1a1a2e,stroke:#00d9ff,color:#ffffff
Each phase-N-{name}.md follows this exact structure:
# Phase N: {Title}
> **GitHub Issue:** #{number} · **Epic:** [AGENTS.md](./AGENTS.md)
> **Dependencies:** Phase X (what must be complete)
> **Parallel with:** Phase Y (if applicable)
> **Blocks:** Phase Z
## Objective
One paragraph: what this phase accomplishes. Be specific.
## What You're Building
A mermaid diagram scoped to THIS phase's deliverables.
## Deliverables
Numbered list of concrete outputs. For each deliverable:
### 1. `path/to/file.ts`
Explain what to build, then show the code or type signature:
- For NEW files: show the full implementation or a detailed skeleton with all type signatures.
- For MODIFIED files: show the specific changes (what to add/replace).
- Include tables for mapping logic, decision matrices, or config values.
### 2. Next deliverable...
## Verification
How to confirm the phase is complete:
1. **Automated checks** — exact shell commands to run (build, typecheck, test).
2. **Manual test scenarios** — numbered steps with expected outcomes.
Write test scenarios as: input → action → expected output.
## Files to Create/Modify
| File | Action |
|---|---|
| `path/to/new-file.ts` | **Create** |
| `path/to/existing-file.ts` | **Modify** (what changes) |
## Done Criteria
- [ ] Checklist item matching each deliverable
- [ ] Build/typecheck commands pass
- [ ] Update the status in [AGENTS.md](./AGENTS.md) to `✅ DONE`
🔲 TODO / 🔧 IN PROGRESS / ✅ DONE in the status table. The working instruction tells agents to update status when done.tasks/{descriptive-slug}/ (e.g., plan-a-ai-sdk-provider, migrate-auth-to-clerk)phase-{N}-{short-name}.md (e.g., phase-0-package-setup.md, phase-3-session-management.md)