commit 42b99b32d2f318bd967736e2e8bf8a5204de1aaa Author: Zhongwei Li Date: Sun Nov 30 08:29:00 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..b695ad1 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,15 @@ +{ + "name": "context-master", + "description": "Universal context management and planning system. PROACTIVELY activate for: (1) ANY complex task requiring planning, (2) Multi-file projects/websites/apps, (3) Architecture decisions, (4) Research tasks, (5) Refactoring, (6) Long coding sessions, (7) Tasks with 3+ sequential steps. Provides: optimal file creation order, context-efficient workflows, extended thinking delegation (23x context efficiency), Claude Sonnet 4.5 token budgeting, recursive delegation patterns, clear-and-verify production workflows, passive deep analysis architecture, progressive task decomposition, cross-platform Windows/Git Bash support, and prevents redundant work. Saves 62% context on average. Essential for maintaining session performance and analytical depth.", + "version": "2.2.0", + "author": { + "name": "Josiah Siegel", + "email": "JosiahSiegel@users.noreply.github.com" + }, + "skills": [ + "./skills" + ], + "commands": [ + "./commands" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..be1b3c9 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# context-master + +Universal context management and planning system. PROACTIVELY activate for: (1) ANY complex task requiring planning, (2) Multi-file projects/websites/apps, (3) Architecture decisions, (4) Research tasks, (5) Refactoring, (6) Long coding sessions, (7) Tasks with 3+ sequential steps. Provides: optimal file creation order, context-efficient workflows, extended thinking delegation (23x context efficiency), Claude Sonnet 4.5 token budgeting, recursive delegation patterns, clear-and-verify production workflows, passive deep analysis architecture, progressive task decomposition, cross-platform Windows/Git Bash support, and prevents redundant work. Saves 62% context on average. Essential for maintaining session performance and analytical depth. diff --git a/commands/plan-project.md b/commands/plan-project.md new file mode 100644 index 0000000..3367237 --- /dev/null +++ b/commands/plan-project.md @@ -0,0 +1,161 @@ +--- +description: Plan optimal file creation order for multi-file projects before implementation +--- + +## CRITICAL GUIDELINES + +### Windows File Path Requirements + +**MANDATORY: Always Use Backslashes on Windows for File Paths** + +When using Edit or Write tools on Windows, you MUST use backslashes (`\`) in file paths, NOT forward slashes (`/`). + +**Examples:** +- WRONG: `D:/repos/project/file.tsx` +- CORRECT: `D: epos\project ile.tsx` + +This applies to: +- Edit tool file_path parameter +- Write tool file_path parameter +- All file operations on Windows systems + +### Windows/Git Bash Path Conversion + +When using Git Bash on Windows, automatic path conversion may occur: +- Unix paths (`/foo`) convert to Windows paths automatically +- This usually works transparently +- See WINDOWS_GIT_BASH_GUIDE.md for advanced scenarios and troubleshooting + +### Documentation Guidelines + +**NEVER create new documentation files unless explicitly requested by the user.** + +- **Priority**: Update existing README.md files rather than creating new documentation +- **Repository cleanliness**: Keep repository root clean - only README.md unless user requests otherwise +- **Style**: Documentation should be concise, direct, and professional +- **User preference**: Only create additional .md files when user specifically asks + +--- + +# Plan Project + +## Purpose +Before creating any files in a multi-file project (3+ related files), this command helps you plan the optimal creation order, identify dependencies, and prevent redundant work. + +## When to Use +- Creating websites with multiple pages +- Building applications with multiple components +- Projects with shared dependencies (CSS, config files) +- API implementations with multiple endpoints +- Documentation sets with multiple files +- Any task involving 3+ related files + +## Instructions + +### Step 1: Extended Thinking for Architecture +IMMEDIATELY use extended thinking to analyze the project: + +``` +"Think hard about the architecture for this [project type]: +- What files are needed and what is their purpose? +- What are the shared dependencies (CSS, config, base classes)? +- What is the optimal creation order and why? +- What are the cross-file references? +- What could go wrong if we create files in the wrong order?" +``` + +### Step 2: Create Architecture Plan +Based on the thinking, create a plan following this template: + +``` +ARCHITECTURE PLAN: + +FILES NEEDED: + - [filename]: [purpose] + - [filename]: [purpose] + +SHARED DEPENDENCIES (must be created first): + - [dependency]: [what files need this] + +CREATION ORDER (numbered with reasoning): + 1. [file] - Reason: [why this first] + 2. [file] - Reason: [why this second] + 3. [file] - Reason: [why this third] + +CROSS-FILE REFERENCES: + - [file A] references [file B] via [method] + +POTENTIAL ISSUES TO AVOID: + - [what could go wrong] + - [common mistake] +``` + +### Step 3: Announce the Plan to User +Tell the user your file creation order before starting: + +``` +"I'll create these files in this order: +1. [file] - [reason] +2. [file] - [reason] +3. [file] - [reason] +... + +This order ensures all dependencies are in place before files that need them." +``` + +### Step 4: Create Files in Optimal Order +Follow the plan: +- Create foundation files first (CSS, config, base classes) +- Create dependent files after their dependencies exist +- Keep consistent naming and structure +- Add comments about dependencies + +### Step 5: Verify +After creating all files, verify: +- All file paths are correct +- CSS/JS references load properly +- Navigation between pages works +- Cross-file dependencies resolve +- No broken links or missing file references + +## Key Principles + +**Foundations First:** +- CSS files before HTML files that use them +- Configuration files before code that needs them +- Base classes before derived classes + +**Core Before Features:** +- index.html before other pages +- main.js before feature modules +- Core API before additional endpoints + +**Structure Before Content:** +- HTML structure before detailed content +- API structure before implementation details +- Component scaffolds before full logic + +## Token Savings +- Without planning: ~8,000 tokens (redundant work + fixes) +- With planning: ~3,000 tokens (efficient creation) +- **Savings: ~5,000 tokens (62% reduction) per project** + +## Example: Portfolio Website + +**User Request:** "Create a portfolio with home, about, projects, and contact pages" + +**Your Response:** +1. Use extended thinking to plan +2. Announce: "I'll create: 1. styles.css, 2. index.html, 3. about.html, 4. projects.html, 5. contact.html" +3. Create files in that order +4. Verify all HTML files reference styles.css correctly + +**Result:** Efficient, no refactoring needed! + +## Windows/Git Bash Notes + +On Windows with Git Bash: +- Path planning uses forward slashes (Unix format) +- Actual file creation uses backslashes (Windows format) +- Verification handles both formats automatically +- See WINDOWS_GIT_BASH_GUIDE.md for detailed guidance diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..15d6f29 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,69 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:JosiahSiegel/claude-code-marketplace:plugins/context-master", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "7ddb096e56abe2a195ece63dfbac05afb31b082d", + "treeHash": "d5baaf9d6206e38117776537c2d402aeed9a7cf8f954852844e54f9f46c12e61", + "generatedAt": "2025-11-28T10:11:48.923920Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "context-master", + "description": "Universal context management and planning system. PROACTIVELY activate for: (1) ANY complex task requiring planning, (2) Multi-file projects/websites/apps, (3) Architecture decisions, (4) Research tasks, (5) Refactoring, (6) Long coding sessions, (7) Tasks with 3+ sequential steps. Provides: optimal file creation order, context-efficient workflows, extended thinking delegation (23x context efficiency), Claude Sonnet 4.5 token budgeting, recursive delegation patterns, clear-and-verify production workflows, passive deep analysis architecture, progressive task decomposition, cross-platform Windows/Git Bash support, and prevents redundant work. Saves 62% context on average. Essential for maintaining session performance and analytical depth.", + "version": "2.2.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "ee27fbcb2b33b4aa550a0384313274722974a234792788592578ffb0ff4addf5" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "fad7d91b913e787f376a76234773b24374638565bae3f5e4a9ef548f4bb6df58" + }, + { + "path": "commands/plan-project.md", + "sha256": "aecd3e2b1e9b0c1a68ad713fd4d140062a70b34c9c5b7dcdf8261d6afc5cc59e" + }, + { + "path": "skills/context-master/SKILL.md", + "sha256": "6acfe436b0072903e7cb5e6534dcf3f2bbcaa4c385d474e8687f79a86a0e9f45" + }, + { + "path": "skills/context-master/references/agent-skills-integration-2025.md", + "sha256": "1f724bffe009fbca12d34a8125a2fc99f04e6dec8aa6b6107f29ce6bb0c36339" + }, + { + "path": "skills/context-master/references/context_strategies.md", + "sha256": "d326fc1d2443b8b6b888fd325f0cf8efe4d012fe862dccfecfde20fecf22cf75" + }, + { + "path": "skills/context-master/references/subagent_patterns.md", + "sha256": "44d625b12e7ce06a8305b857048f65119320d69fd0c7b95bd2d0a1a0af1eaa58" + }, + { + "path": "skills/context-master/scripts/create_subagent.py", + "sha256": "78a5052af6120100c48b0689028b5d3dfa742f128ac853e7c88b886b11434fcd" + }, + { + "path": "skills/context-master/scripts/generate_claude_md.py", + "sha256": "3aa3eda5cd9ebd75344c540a9d8e31970c64540c7ab51c0a6867028f498fa8a2" + } + ], + "dirSha256": "d5baaf9d6206e38117776537c2d402aeed9a7cf8f954852844e54f9f46c12e61" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/context-master/SKILL.md b/skills/context-master/SKILL.md new file mode 100644 index 0000000..c4ba505 --- /dev/null +++ b/skills/context-master/SKILL.md @@ -0,0 +1,1661 @@ +--- +name: context-master +description: "Universal context management and planning system. PROACTIVELY activate for: (1) ANY complex task requiring planning, (2) Multi-file projects/websites/apps, (3) Architecture decisions, (4) Research tasks, (5) Refactoring, (6) Long coding sessions, (7) Tasks with 3+ sequential steps. Provides: optimal file creation order, context-efficient workflows, extended thinking delegation (23x context efficiency), passive deep analysis architecture, progressive task decomposition, and prevents redundant work. Saves 62% context on average. Essential for maintaining session performance and analytical depth." +--- + +# Context Master + +## 🚨 CRITICAL GUIDELINES + +### Windows File Path Requirements + +**MANDATORY: Always Use Backslashes on Windows for File Paths** + +When using Edit or Write tools on Windows, you MUST use backslashes (`\`) in file paths, NOT forward slashes (`/`). + +**Examples:** +- āŒ WRONG: `D:/repos/project/file.tsx` +- āœ… CORRECT: `D:\repos\project\file.tsx` + +This applies to: +- Edit tool file_path parameter +- Write tool file_path parameter +- All file operations on Windows systems + +### Documentation Guidelines + +**NEVER create new documentation files unless explicitly requested by the user.** + +- **Priority**: Update existing README.md files rather than creating new documentation +- **Repository cleanliness**: Keep repository root clean - only README.md unless user requests otherwise +- **Style**: Documentation should be concise, direct, and professional - avoid AI-generated tone +- **User preference**: Only create additional .md files when user specifically asks for documentation + + + +--- + +Universal context management and planning system for complex tasks, long coding sessions, and efficient workflow optimization. + +--- + +## ⚔ TL;DR QUICK START (Read This First) + +**For ANY multi-file project, follow these 5 steps:** + +``` +1ļøāƒ£ STOP - Don't create files yet +2ļøāƒ£ PLAN - Use "think hard" OR create planning document +3ļøāƒ£ ANNOUNCE - Tell user your file creation order +4ļøāƒ£ CREATE - Make files in optimal order (dependencies first) +5ļøāƒ£ VERIFY - Check all references work +``` + +**Example:** +``` +User: "Create a portfolio with home, about, projects pages" + +āœ“ Step 1: STOP [Don't immediately create index.html] +āœ“ Step 2: PLAN [Think: Need styles.css + 3 HTML files, CSS first] +āœ“ Step 3: ANNOUNCE ["I'll create: 1. styles.css, 2. index.html, 3. about.html, 4. projects.html"] +āœ“ Step 4: CREATE [Make them in that order] +āœ“ Step 5: VERIFY [Check all HTML files link to styles.css correctly] + +Result: Done efficiently, no refactoring needed! +``` + +**Token savings: ~5,000 tokens (62%) vs doing it wrong** + +**Continue reading below for detailed guidance...** + +--- + +## Overview + +This skill provides comprehensive context management, planning strategies, and workflow optimization for ANY complex coding task, not just multi-file projects. + +**MUST use this skill for:** +- āœ… ANY complex task requiring planning or strategy +- āœ… Multi-file projects (HTML, CSS, JS, APIs, apps, docs) +- āœ… Architecture or design decisions +- āœ… Research tasks requiring analysis +- āœ… Refactoring work +- āœ… Long coding sessions (context optimization) +- āœ… Tasks with 3+ sequential steps + +**What this skill provides:** +- **Optimal file creation order** - Which files to create first, dependency management +- **Context-efficient workflows** - 62% average context savings +- **Extended thinking delegation** - 23x context efficiency for deep analysis +- **Passive deep thinking architecture** - Get analytical depth without context cost +- **Progressive task decomposition** - Break complex tasks into manageable phases +- **Planning frameworks** - Think before coding, prevent redundant work +- **Session optimization** - Maintain performance in long interactions + +**This skill activates automatically for:** +- Complex tasks requiring planning ("build...", "create...", "implement...") +- Architecture decisions ("should we use...", "which approach...") +- Research requests ("research...", "analyze...", "compare...") +- Refactoring work ("refactor...", "improve...", "optimize...") +- Multi-step workflows (any task with 3+ steps) +- Long coding sessions (automatic context monitoring) + +--- + +# āš ļø MANDATORY FIRST STEP - READ THIS BEFORE DOING ANYTHING āš ļø + +## šŸ›‘ STOP - DO THIS FIRST šŸ›‘ + +**IMMEDIATELY use extended thinking to plan. Do NOT create any files yet.** + +**Your exact next output MUST be:** + +``` +"Think hard about the architecture for this [project type]: +- What files are needed and what is their purpose? +- What are the shared dependencies (CSS, config, base classes)? +- What is the optimal creation order and why? +- What are the cross-file references? +- What could go wrong if we create files in the wrong order?" +``` + +**After the extended thinking completes, THEN announce your plan to the user.** + +**DO NOT create files until you:** +1. āœ… Complete extended thinking +2. āœ… Announce the plan to the user +3. āœ… Get their acknowledgment (or proceed if plan is sound) + +--- + +## šŸŽÆ PLANNING METHOD OPTIONS + +**You have TWO equally effective planning approaches:** + +### Option A: Extended Thinking (Pure Mental Planning) +``` +"Think hard about the architecture for this [project]: +- What files are needed? +- What is the optimal creation order? +- What dependencies exist?" +``` + +**Best for:** Quick projects, straightforward structures, when planning fits in thinking block + +### Option B: Planning Document (Structured Written Plan) +``` +Use bash_tool or create an artifact for the planning document: + +ARCHITECTURE_PLAN.md: +- Files needed: [list] +- Creation order: [numbered list] +- Dependencies: [diagram/list] +- Potential issues: [list] +``` + +**Best for:** Complex projects, when you want a reference document, when planning is extensive + +**Both work equally well!** Choose based on project complexity and your preference. + +**Example using bash_tool for planning:** +```bash +cat > ARCHITECTURE_PLAN.md << 'EOF' +# Portfolio Website Architecture + +## Files Needed +1. styles.css - Shared styling +2. index.html - Home page +3. about.html - About page +4. projects.html - Projects page +5. contact.html - Contact page + +## Creation Order +1. styles.css (shared dependency, created first) +2. index.html (references styles.css) +3. about.html (references styles.css) +4. projects.html (references styles.css) +5. contact.html (references styles.css) + +## Cross-References +- All HTML files link to styles.css via +- All pages navigate to each other via +EOF +``` + +**Benefit of planning document:** You can reference it throughout the project, and it serves as documentation. + +---## šŸ’° WHY THIS MATTERS: Token Savings + +**Without planning:** +- Create files → Realize structure is wrong → Refactor → More explanations +- **Cost: ~8,000 tokens** (redundant work + explanations + fixes) + +**With planning (this skill):** +- Think first → Create files in optimal order → Done correctly first time +- **Cost: ~3,000 tokens** (efficient creation only) + +**šŸ’” Savings: ~5,000 tokens (62% reduction) per multi-file project** + +Over a long session with multiple projects, this compounds significantly. + +### Real-World Token Savings by Project Size + +**Small Project (3-4 files) - Portfolio Website** +``` +Without planning: ~6,000 tokens + - Create HTML → Add inline styles → Extract CSS → Update refs +With planning: ~2,500 tokens + - Plan → Create CSS → Create HTML with refs +šŸ’° Savings: ~3,500 tokens (58%) +``` + +**Medium Project (7-8 files) - Multi-page App** +``` +Without planning: ~12,000 tokens + - Create pages → Realize shared components → Refactor → Fix imports +With planning: ~4,500 tokens + - Plan → Create shared → Create pages → No refactoring +šŸ’° Savings: ~7,500 tokens (63%) +``` + +**Large Project (20+ files) - Full Application** +``` +Without planning: ~35,000 tokens + - Create files randomly → Multiple refactoring cycles → Fix dependencies +With planning: ~12,000 tokens + - Plan architecture → Create in optimal order → Minimal fixes +šŸ’° Savings: ~23,000 tokens (66%) +``` + +**Context window capacity:** +- Standard: 200K tokens +- With planning: Can complete 16-17 medium projects +- Without planning: Can complete only 7-8 medium projects +- **Effective capacity increase: 2.1x** + +---## 🚨 ACTIVATION TRIGGERS (You are seeing one of these RIGHT NOW) + +If the user's request includes ANY of these phrases, this skill activated for a reason: + +- āœ… "create a website with..." ← **YOU ARE HERE** +- āœ… "build 3+ pages/files" +- āœ… "make a [type] application" +- āœ… "create [home/about/contact] pages" +- āœ… "build an API with..." +- āœ… "generate documentation for..." + +**→ Your NEXT output should be extended thinking about architecture, NOT file creation** + +--- + +## šŸ“Š POST-PROJECT REFLECTION (Optional But Valuable) + +**After completing a multi-file project, take a moment to assess the context savings:** + +### Quick Self-Assessment Questions + +``` +1. Did you plan before creating files? [Yes/No] + +2. How many files did you create? [Number] + +3. Did you have to refactor or fix file references? [Yes/No] + +4. If you planned first: + - Estimated context used: ~[2,500-4,500] tokens for [3-8] files + +5. If you created without planning: + - You likely used: ~[6,000-12,000] tokens + - Potential savings missed: ~[3,500-7,500] tokens +``` + +### Success Indicators + +**āœ… You used the skill effectively if:** +- Created foundation files (CSS, config) before dependent files +- No major refactoring needed after file creation +- All file references worked on first try +- Could describe file creation order before starting +- Spent more time planning than fixing + +**āš ļø You could improve if:** +- Had to go back and add shared dependencies +- Needed to refactor file structure after creation +- Found broken references between files +- Created files in no particular order +- Spent more time fixing than planning + +### Context Savings Calculator + +**Estimate your actual savings:** +``` +Files created: [N] +Did planning: [Yes/No] + +If Yes: + Tokens used: ~(N Ɨ 350) + 500 for planning + Tokens saved: ~(N Ɨ 800) + Efficiency: ~70% + +If No: + Tokens used: ~(N Ɨ 1,150) + Missed savings: ~(N Ɨ 800) + Next time: Plan first! +``` + +**Example for 5-file project:** +- With planning: ~2,250 tokens +- Without planning: ~5,750 tokens +- Actual savings: ~3,500 tokens (60%) + +This reflection helps you recognize when the skill is working and when to apply it more strictly next time! + +--- + +## āœ“ REQUIRED WORKFLOW CHECKLIST + +**For EVERY multi-file project, follow this exact sequence:** + +``` +☐ Step 1: THINK FIRST - Use "think hard" to plan architecture + (List all files, determine optimal order, identify dependencies) + +☐ Step 2: ANNOUNCE THE PLAN - Tell user the file creation order + ("I'll create files in this order: 1. CSS, 2. index.html, 3...") + +☐ Step 3: CREATE FOUNDATION FILES - Shared dependencies first + (CSS files, config files, base classes) + +☐ Step 4: CREATE DEPENDENT FILES - Files that use the foundations + (HTML pages that reference CSS, components that use base classes) + +☐ Step 5: VERIFY - Check all references/imports work +``` + +**DO NOT skip Step 1. ALWAYS think before creating files.** + +--- + +## šŸ”“ COMMON MISTAKE TO AVOID + +**WRONG APPROACH (what you might do without this skill):** +``` +User: "Create a portfolio with home, about, and projects pages" +You: [Creates index.html] +You: [Creates about.html] +You: [Creates projects.html] +You: [Realizes CSS should be shared, has to refactor] +Result: Wasted effort, redundant work +``` + +**CORRECT APPROACH (what you MUST do with this skill):** +``` +User: "Create a portfolio with home, about, and projects pages" +You: "Think hard about the architecture first..." + [Plans: Need 1 CSS file + 3 HTML files, CSS should come first] +You: "I'll create files in this order: 1. styles.css, 2. index.html, 3. about.html, 4. projects.html" +You: [Creates files in that order] +Result: Efficient, no redundant work +``` + +--- + +## āŒ MORE ANTI-PATTERNS (What NOT to Do) + +### Anti-Pattern 1: Creating JS Modules Before Main App File +**Wrong:** +``` +1. Create utils.js +2. Create helpers.js +3. Create api.js +4. Create app.js (main file that imports all the above) +Problem: Had to keep going back to app.js to add imports +``` + +**Right:** +``` +1. Think about module structure +2. Create app.js (with import statements planned) +3. Create utils.js (knowing what app.js needs) +4. Create helpers.js (knowing what app.js needs) +5. Create api.js (knowing what app.js needs) +Benefit: App.js structured correctly from the start +``` + +### Anti-Pattern 2: Writing Inline Styles Then Extracting Later +**Wrong:** +``` +1. Create index.html with inline styles +2. Create about.html with inline styles +3. Realize styles are duplicated +4. Extract to styles.css +5. Update all HTML files to reference it +Problem: Redundant work, had to edit multiple files +``` + +**Right:** +``` +1. Think: These pages will share styling +2. Create styles.css first +3. Create HTML files that reference styles.css +Benefit: No duplication, no refactoring needed +``` + +### Anti-Pattern 3: Building Components Before Data Structure +**Wrong:** +``` +1. Create UserProfile.jsx component +2. Create UserList.jsx component +3. Realize data structure is unclear +4. Go back and modify components to match data +Problem: Components built on assumptions +``` + +**Right:** +``` +1. Think about data structure first +2. Create types.js or schema.js +3. Create components that use defined data structure +Benefit: Components built correctly from the start +``` + +### Anti-Pattern 4: Creating Pages Before Shared Layout +**Wrong:** +``` +1. Create home.html with full layout +2. Create about.html with full layout +3. Realize layout should be shared +4. Extract to layout component/template +5. Refactor all pages +Problem: Major refactoring required +``` + +**Right:** +``` +1. Think: Pages will share layout +2. Create layout.html or Layout component +3. Create pages that use the layout +Benefit: DRY from the start +``` + +### Anti-Pattern 5: Creating Config Files Last +**Wrong:** +``` +1. Create multiple files with hardcoded values +2. Realize config should be centralized +3. Create config.js +4. Update all files to use config +Problem: Config scattered, hard to change +``` + +**Right:** +``` +1. Think: What values will be used across files? +2. Create config.js first +3. Create other files that import config +Benefit: Centralized configuration from start +``` + +--- + +# šŸ“– PART 1: UNIVERSAL GUIDANCE (All Users - Web, API, CLI) + +**The sections below apply to ALL users. Read these first regardless of your environment.** + +--- + +## Core Principles (All Environments) + +### 1. Extended Thinking for Complex Tasks + +Use extended thinking to keep reasoning separate from main context: + +**Trigger phrases:** +- `"think about..."` - Standard extended thinking +- `"think hard about..."` - More thorough analysis +- `"think harder about..."` - Deep analysis +- `"ultrathink..."` - Maximum thinking budget + +**When to use:** +- Planning complex implementations +- Analyzing multiple approaches +- Design decisions with tradeoffs +- Any task requiring deep reasoning + +**Benefit:** Reasoning happens in separate blocks that don't clutter your main context. + +### 2. Artifacts for Content Offloading + +Create artifacts for substantial content instead of inline responses: + +**Use artifacts for:** +- Code files (>20 lines) +- Documents, reports, articles +- Data analysis results +- Complex visualizations +- Any reusable content + +**Why it works:** Content lives in artifacts, not the conversation context. + +### 3. Progressive Task Decomposition + +Break complex requests into phases: + +**Instead of:** +"Build me a complete app with authentication, database, and frontend" + +**Do this:** +``` +Phase 1: "think about the architecture for this app" +[Review architecture plan] + +Phase 2: "Create the database schema" +[Review schema] + +Phase 3: "Build the authentication system" +[Continue phase by phase] +``` + +**Benefit:** Each phase has fresh context, no accumulation of old decisions. + +### 4. Explicit Context Boundaries + +Signal when to start fresh: + +- "Let's start fresh with a new approach" +- "Setting aside the previous discussion..." +- "Here's a new angle on this problem..." + +**In Claude Code:** Use `/clear` command +**In web/API:** Explicitly state context reset + +## Multi-File Project Planning (Critical Section) + +**šŸ“Œ QUICK REMINDER: Did you think first? If not, go back to "STOP - DO THIS FIRST" above.** + +**When creating any project with 3+ related files, ALWAYS start with this planning workflow:** + +### Step 1: Architecture Planning + +**Choose your planning method (both equally effective):** + +**Method A: Extended Thinking** +``` +"Think hard about the architecture for this [project]: +- What files are needed and their purpose? +- What are shared dependencies? +- What is optimal creation order? +- What are cross-file references? +- What could go wrong?" +``` + +**Method B: Planning Document** +``` +Create ARCHITECTURE_PLAN.md (via bash_tool or artifact): +- Files needed with purposes +- Shared dependencies +- Numbered creation order with reasoning +- Cross-file reference map +- Potential issues to avoid +``` + +**Before creating any files, use extended thinking OR create planning document with this template:** + +``` +ARCHITECTURE PLAN TEMPLATE: + +ā–” FILES NEEDED: + - [filename]: [purpose] + - [filename]: [purpose] + - [filename]: [purpose] + +ā–” SHARED DEPENDENCIES (must be created first): + - [dependency]: [what files need this] + +ā–” CREATION ORDER (numbered with reasoning): + 1. [file] - Reason: [why this first] + 2. [file] - Reason: [why this second] + 3. [file] - Reason: [why this third] + +ā–” CROSS-FILE REFERENCES: + - [file A] references [file B] via [method] + - [file C] imports [file D] via [method] + +ā–” POTENTIAL ISSUES TO AVOID: + - [what could go wrong] + - [common mistake] +``` + +**Example filled template for portfolio website:** + +``` +ARCHITECTURE PLAN: + +ā–” FILES NEEDED: + - styles.css: Shared styling for all pages + - index.html: Home page with navigation + - about.html: About page + - projects.html: Portfolio showcase + - contact.html: Contact form + +ā–” SHARED DEPENDENCIES: + - styles.css: All HTML files need this for consistent styling + +ā–” CREATION ORDER: + 1. styles.css - Reason: Shared dependency, all HTML files will reference it + 2. index.html - Reason: Main entry point, establishes structure + 3. about.html - Reason: References styles.css which now exists + 4. projects.html - Reason: References styles.css which now exists + 5. contact.html - Reason: References styles.css which now exists + +ā–” CROSS-FILE REFERENCES: + - All HTML files link to styles.css via + - All HTML pages link to each other via + +ā–” POTENTIAL ISSUES TO AVOID: + - Creating HTML before CSS → Would require going back to add links + - Inline styles in HTML → Would require extraction later + - Inconsistent navigation → Hard to maintain across files +``` + +**Use this template in your extended thinking output.** + +### Step 2: Optimal File Creation Order + +**General principles:** + +1. **Foundations first** - Shared dependencies before dependents + - CSS files before HTML files that use them + - Configuration files before code that needs them + - Base classes before derived classes + +2. **Core before features** - Essential files before optional ones + - index.html before other pages + - main.js before feature modules + - Core API before additional endpoints + +3. **Structure before content** - Layout before details + - HTML structure before detailed content + - API structure before implementation details + - Component scaffolds before full logic + +**Common file creation orders:** + +**Website project:** +``` +1. styles.css (shared styling) +2. index.html (home page - references styles.css) +3. about.html (references styles.css) +4. projects.html (references styles.css) +5. contact.html (references styles.css) +6. script.js (if needed) +``` + +**React application:** +``` +1. package.json (dependencies) +2. App.js (main component) +3. components/Header.js (layout components) +4. components/Footer.js +5. pages/Home.js (page components) +6. pages/About.js +7. styles/main.css +``` + +**Backend API:** +``` +1. config.js (configuration) +2. database.js (DB connection) +3. models/User.js (data models) +4. routes/auth.js (route handlers) +5. routes/api.js +6. server.js (entry point) +``` + +### Step 3: Create Files with Awareness + +**As you create each file:** +- Reference what's already been created +- Note what future files will depend on this one +- Keep consistent naming and structure +- Add comments about dependencies + +### Step 4: Verify and Test + +**After creating all files, perform these verification checks:** + +#### āœ“ File Path Verification +``` +ā–” Check all file paths are correct + - CSS links: (not "style.css" or "css/styles.css") + - JS scripts: