react-useeffect
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data…
Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants
$ npx -y skills add jarrodwatts/claude-code-config --skill planning-with-files --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/planning-with-filesContext preview
The summary Claude sees to decide when to auto-load this skill.
Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants
name: planning-with-files description: Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants structured output.
Work like Manus: Use persistent markdown files as your "working memory on disk."
Before ANY complex task:
1. **Create `task_plan.md`** in the working directory 2. **Define phases** with checkboxes 3. **Update after each phase** - mark [x] and change status 4. **Read before deciding** - refresh goals in attention window
For every non-trivial task, create THREE files:
| File | Purpose | When to Update | |------|---------|----------------| | `task_plan.md` | Track phases and progress | After each phase | | `notes.md` | Store findings and research | During research | | `[deliverable].md` | Final output | At completion |
Loop 1: Create task_plan.md with goal and phases Loop 2: Research → save to notes.md → update task_plan.md Loop 3: Read notes.md → create deliverable → update task_plan.md Loop 4: Deliver final output
**Before each major action:**
Read task_plan.md # Refresh goals in attention window
**After each phase:**
Edit task_plan.md # Mark [x], update status
**When storing information:**
Write notes.md # Don't stuff context, store in file
Create this file FIRST for any complex task:
# Task Plan: [Brief Description] ## Goal [One sentence describing the end state] ## Phases - [ ] Phase 1: Plan and setup - [ ] Phase 2: Research/gather information - [ ] Phase 3: Execute/build - [ ] Phase 4: Review and deliver ## Key Questions 1. [Question to answer] 2. [Question to answer] ## Decisions Made - [Decision]: [Rationale] ## Errors Encountered - [Error]: [Resolution] ## Status **Currently in Phase X** - [What I'm doing now]
For research and findings:
# Notes: [Topic] ## Sources ### Source 1: [Name] - URL: [link] - Key points: - [Finding] - [Finding] ## Synthesized Findings ### [Category] - [Finding] - [Finding]
Never start a complex task without `task_plan.md`. This is non-negotiable.
Before any major decision, read the plan file. This keeps goals in your attention window.
After completing any phase, immediately update the plan file:
Large outputs go to files, not context. Keep only paths in working memory.
Every error goes in the "Errors Encountered" section. This builds knowledge for future tasks.
**Use 3-file pattern for:**
**Skip for:**
| Don't | Do Instead | |-------|------------| | Use TodoWrite for persistence | Create `task_plan.md` file | | State goals once and forget | Re-read plan before each decision | | Hide errors and retry | Log errors to plan file | | Stuff everything in context | Store large content in files | | Start executing immediately | Create plan file FIRST |
See [reference.md](reference.md) for:
See [examples.md](examples.md) for:
my personal claude code configuration - mostly not created by me, but sourced from many talented people in the community.
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data…
Apply rigorous coding standards. Use when writing, implementing, or reviewing code.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing,…
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design",…