BZY Design

The Agent
System

A solo designer's Claude Code infrastructure,
documented as it evolves. Hooks, skills, subagents,
and the philosophy that wires them together.

14
Shipped
6
Pending
5
Days
Current State

The System

Context Architecture
Layer 0
~/.claude/CLAUDE.md — Global identity, design philosophy, review protocol. Loaded every session.
Layer 1
project/CLAUDE.md — Project-specific build instructions, deployment config, dependencies.
Layer 2
project/DESIGN.md — Visual language: colors, typography, components, spacing. Overrides house defaults.
Layer 3
~/.claude/skills/ — Domain-specific workflows. Loaded on demand by trigger or slash command.
Hooks
6 active
Deterministic gates that fire on lifecycle events. Converts soft rules into hard enforcement.
  • block-dangerous.shPreToolUse / Bash — blocks rm -rf, force push, reset --hard
  • Sensitive file blockerPreToolUse / Edit|Write — denies .env, .local, credentials, secrets
  • check-design-md.shPreToolUse / Edit|Write — reminds to read DESIGN.md before edits
  • log-commands.shPreToolUse / Bash — logs all commands with timestamps
  • Design review agentStop — auto-triggers 3-pass review on HTML files
  • macOS notificationStop — Glass sound + directory name in notification
// Add to ~/.claude/settings.json under "hooks"
{
  "PreToolUse": [
    {
      "matcher": "Bash",
      "hooks": [
        { "type": "command", "command": "~/.claude/hooks/block-dangerous.sh" },
        { "type": "command", "command": "~/.claude/hooks/log-commands.sh" }
      ]
    },
    {
      "matcher": "Edit|Write",
      "hooks": [
        {
          "type": "command",
          "command": "jq -r '.tool_input.file_path // \"\"' | grep -qiE '(\\.env|\\.local|credentials|secrets)' && echo '{\"hookSpecificOutput\":{\"hookEventName\":\"PreToolUse\",\"permissionDecision\":\"deny\",\"permissionDecisionReason\":\"BLOCKED: sensitive file\"}}' || true"
        }
      ]
    }
  ],
  "Stop": [
    {
      "matcher": "",
      "hooks": [{
        "type": "command",
        "command": "DIR=$(basename \"$PWD\"); osascript -e \"display notification \\\"Done — $DIR\\\" with title \\\"Claude Code\\\" sound name \\\"Glass\\\"\""
      }]
    }
  ],
  "SessionStart": [
    {
      "matcher": "compact",
      "hooks": [{
        "type": "command",
        "command": "cat ~/.claude/CLAUDE.md | head -50 || true"
      }]
    }
  ]
}
Skills
6 global
Reusable workflows invoked by slash command or auto-triggered by context.
  • bzy-designHouse design system — type scale, spacing, orphan rules, boilerplate
  • design-review3-pass Apple-level review — screenshot, structure, spacing, fidelity
  • 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-review
description: |
  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.
  • design-reviewerChrome screenshot → 3-pass visual QA → PASS/FAIL verdict. Runs on Sonnet.
# Save as ~/.claude/agents/design-reviewer.md

---
name: design-reviewer
description: |
  Runs 3-pass design review on HTML deliverables.
  Triggers on: "review this", "check this design",
  "how does this look", "is this ready".
model: sonnet
tools: 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.
  • obsidianPersonal notes vault — research, references, client briefs
  • 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-tidy
description: 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.
  • Project memories6 files — DriftGrid, RecovryAI, WanderPins, BZY Finance, Tope
  • Feedback memories5 files — platform rules, OTA safety, .env protection
  • Reference memories1 file — external resource pointers
# ~/.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_testing
description: Integration tests must hit real DB
type: 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.
Changelog

Optimization Log

April 6, 2026
macOS notifications for CMUX sessions, BZY Design skill created, DESIGN.md priority rule, Ultraplan identified.
macOS Stop notification hook
Glass sound + notification with working directory name for CMUX session identification.
Done
BZY Design global skill
House design system as a reusable skill — type scale, spacing, orphan rules, HTML boilerplate.
Done
DESIGN.md priority rule
Skill reads project DESIGN.md first — client tokens override house defaults.
Done
Orphaned auto-screenshot.sh deleted
Unwired from settings.json after Stop agent consolidation.
Done
Ultraplan for multi-deliverable projects
Cloud-based planning with Opus. Use --ultraplan on next multi-page project.
Pending
Extract Style Copy Loop into skill
Move ~50 lines from CLAUDE.md into a dedicated skill to save context.
Pending
April 5, 2026
Design-reviewer subagent created, Stop agent hook wired, auto-screenshot consolidated.
Design-reviewer subagent
3-pass review with Chrome screenshots and PASS/FAIL verdicts in isolated context.
Done
Stop agent hook for auto-review
Spawns design-reviewer on Stop if HTML files were modified in session.
Done
Auto-screenshot consolidated
PostToolUse hook removed. Screenshots handled by design-reviewer subagent.
Done
April 4, 2026
Hooks suite went live. MCP overhead investigated and cleared.
Hooks suite implemented
5 scripts across PreToolUse, PostToolUse, SessionStart.
Done
MCP token overhead audit
3 custom MCPs confirmed lean. Duplicate Figma plugin disabled.
Done
Vercel deploy skill
Official vercel-labs/agent-skills package.
Pending
Skill description optimization
svg-icon-generator and writing need trigger phrases.
Pending
April 3, 2026
Specific hook implementations detailed. BRIEF.md pattern proposed.
Hook implementations specified
Detailed JSON for notification, file blocker, post-compaction reinject.
Done
BRIEF.md pattern
10-line deliverable brief. Deprioritized after Ultraplan.
Watching
April 2, 2026
First audit. Zero hooks, zero automation. Three opportunities identified.
Initial workspace audit
Baseline: 0 hooks, 3 skills, clean memory.
Done
Preview MCP over headless Chrome
More integrated browser preview with DOM inspection.
Watching
Deploy skill
Superseded by Vercel's official agent-skills package.
Pending
Shipped
Pending
Watching