writingBlog articles and copywriting — professional, concise, narrative-driven
svg-precisionDeterministic SVG generation with validation and rendering
svg-icon-generatorAuto-activating for SVG icon work
remotion-best-practicesRules for Remotion video projects
# Save as ~/.claude/skills/your-skill/SKILL.md
---
name: design-reviewdescription: |
Full design review as a senior designer.Use when the user says "review", "check this","how does this look", or "/review".
---
You are a senior design reviewer. Run a 3-pass
visual review on HTML deliverables.
## Pass 1 — Structure & Layout
- Container fills completely? No background bleed?
- Content distributes well vertically?
- No large unintentional empty zones?
## Pass 2 — Spacing & Alignment
- Consistent gaps, no cramped areas
- Typography: readable sizes, clear hierarchy
- Contrast: text readable on all backgrounds
## Pass 3 — Visual Fidelity
- Colors, border-radius, font sizes, weights
- No clipping, overflow, or content cutoff
- No orphan words on any line
## Output**PASS** or **FAIL** with one-line per pass.
If FAIL: list every issue with file path.
Subagents
1 active
Specialized agents with isolated context windows. Run reviews and analysis without polluting the main session.
# Save as ~/.claude/agents/design-reviewer.md
---
name: design-reviewerdescription: |
Runs 3-pass design review on HTML deliverables.Triggers on: "review this", "check this design","how does this look", "is this ready".model: sonnettools: Read, Bash, Glob
---
You are a senior design reviewer. Run a rigorous
3-pass visual review and return a structured verdict.
## Pass 0 — Screenshot
Take a headless Chrome screenshot:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless --disable-gpu \
--screenshot="/tmp/review-$(date +%s).png" \
--window-size=1920,1080 \
--force-device-scale-factor=2 \
--hide-scrollbars "{url}"
Read the screenshot. All passes reference what
you actually SEE, not what you assume from code.
## Output**Verdict: PASS** or **Verdict: FAIL**
One-line summary per pass.
If FAIL: specific issues with file paths.
MCP Servers
3 custom
External tool integrations. Kept lean — each server adds token overhead to every turn.
wikiAI research wiki — maintained via /research skill
driftgridCustom MCP for the design iteration platform
// Add to ~/.claude/settings.json under "mcpServers"
{
"mcpServers": {
"obsidian": {
"command": "npx",
"args": ["-y", "mcp-obsidian", "/path/to/vault"]
}
}
}
// Keep it lean. Each tool ≈ 200 tokens of overhead.// 3-5 custom MCPs is the sweet spot.// System MCPs (Figma, Preview) use deferred loading.
Scheduled Tasks
2 daily
Automated agents that run on schedule. Maintenance and research without manual triggering.
daily-project-tidyMemory validation, plan archival, index checks, project status sweep
agent-workflow-optimizationWeb research + daily recommendations — this page is the output
# Create via: /schedule# Or save as ~/.claude/scheduled-tasks/my-task/SKILL.md
---
name: daily-project-tidydescription: Daily context maintenance and project status sweep
---
You are a maintenance agent. Your job is to keep
the context architecture clean.
## Tasks
1. MEMORY CHECK — Read every .md file in
~/.claude/projects/*/memory/. Flag duplicates.
2. PLAN CLEANUP — Archive plans older than
14 days that aren't referenced in MEMORY.md.
3. INDEX VALIDATION — Verify all file paths
in MEMORY.md actually exist.
4. PROJECT STATUS SWEEP — For each project:
git log, CLAUDE.md, next steps, resume command.
5. REPORT — Append to maintenance-log.md.
Memory
12 files
Persistent, file-based memory that compounds across conversations. Indexed by MEMORY.md.
# ~/.claude/projects/{scope}/memory/MEMORY.md# This is the INDEX — one line per memory file.
# Project Memory
## Projects
- [Project A status](project_a.md) — what's active
- [Project B status](project_b.md) — what's next
## Feedback
- [Don't mock the DB](feedback_testing.md) — use real DB
- [No trailing summaries](feedback_terse.md) — user preference
# Each memory file has this frontmatter:
---
name: feedback_testingdescription: Integration tests must hit real DBtype: feedback
---
Don't mock the database in integration tests.
**Why:** Prior incident where mock/prod divergence
masked a broken migration.
**How to apply:** All test files under /tests/
must use the real database connection.
Why It Works
Principles
Hooks over instructions
CLAUDE.md rules are suggestions. Hooks are law. Anything that must happen every time gets a hook.
Context is a budget
Every token in context is a token not available for reasoning. Skills load on demand. Subagents get isolated windows.
Sessions compound
The file-back rule: every session updates DESIGN.md, CLAUDE.md, or MEMORY.md. The next session starts smarter.
Separate concerns
CLAUDE.md is how to build. DESIGN.md is how it looks. Skills are how to do specific things. They never overlap.
Get Started
Steal This
Set up a design review system
Creates the skill, subagent, and Stop hook so every HTML file gets reviewed before you see it.
Create a design review system for my Claude Code setup:
1. Create a skill at ~/.claude/skills/design-review/SKILL.md that defines a 3-pass visual review process (structure, spacing, fidelity) with headless Chrome screenshots as ground truth.
2. Create a subagent at ~/.claude/agents/design-reviewer.md that runs the review in an isolated context window with PASS/FAIL verdicts.
3. Add a Stop hook to ~/.claude/settings.json that auto-triggers the review when HTML files were modified in the session.
4. Add a macOS notification hook on Stop so I know when work is done.
Bootstrap a design system skill
Encodes your personal design language into a reusable skill that bootstraps every new project.
Create a design system skill at ~/.claude/skills/my-design/SKILL.md that encodes my house style:
- Typography: [your font], with a graduated type scale from 14px to 56px
- Spacing: generous margins (120-160px on 1920px canvases), section padding 80-120px
- Colors: near-black background, near-white text, one accent color per project
- Layout: single HTML file with embedded CSS, CSS custom properties for all tokens
- Include a boilerplate HTML template with Google Fonts import and :root variables
The skill should check for a project DESIGN.md first and let it override any defaults. If no DESIGN.md exists, use house defaults and generate one.
Add safety hooks
Block dangerous commands, protect sensitive files, and log everything. The foundation of any agent setup.
Set up safety hooks in my ~/.claude/settings.json:
1. PreToolUse hook on Bash that blocks: rm -rf, git reset --hard, git push --force, git checkout ., DROP TABLE, and curl|sh patterns.
2. PreToolUse hook on Edit|Write that denies changes to .env, .env.local, credentials, and secrets files.
3. PreToolUse hook on Bash that logs every command to ~/.claude/command-log.txt with ISO timestamps.
4. SessionStart hook on "compact" that re-injects the first 50 lines of CLAUDE.md after context compaction.
Create the hook scripts in ~/.claude/hooks/ and wire them in settings.json.
Set up daily maintenance
A scheduled agent that validates memory, archives stale plans, and sweeps project status every day.
Create a daily maintenance scheduled task using /schedule that:
1. Reads every memory file in ~/.claude/projects/*/memory/ and flags any content that's duplicated in a project-level CLAUDE.md or DESIGN.md.
2. Archives any plan in ~/.claude/plans/ that hasn't been modified in 14+ days and isn't referenced in MEMORY.md.
3. Validates all file paths in MEMORY.md actually exist. Flags broken references.
4. For each project directory: runs git log --oneline --since="7 days ago", reads CLAUDE.md for context, and summarizes activity level + next steps.
5. Appends findings to ~/.claude/maintenance-log.md.
Create the context architecture
Set up the 3-layer CLAUDE.md / DESIGN.md / Skills separation that keeps every session focused.
Help me set up a 3-layer context architecture for my Claude Code projects:
Layer 0 — ~/.claude/CLAUDE.md: Global rules that apply to every session. Keep it under 200 lines. Include: who I am, communication preferences, code philosophy, and any mandatory review processes.
Layer 1 — project/CLAUDE.md: Project-specific build instructions. Include: tech stack, deployment config, dependencies, project structure, and how to run things.
Layer 2 — project/DESIGN.md: Visual language for design projects. Include: colors (with CSS custom property names), typography (font, scale, weights), spacing system, and component patterns.
Also create a MEMORY.md index at ~/.claude/projects/-Users-{me}/memory/MEMORY.md to track cross-project context.
The rule: CLAUDE.md is how to build, DESIGN.md is how it looks, Skills are how to do specific things. They never overlap.