[2.26.3] Design-iterator: auto-load skills, smaller iterations

- Added "Step 0: Discover and Load Design Skills (MANDATORY)"
- Discovers skills from all locations (plugin, global, project)
- Maps user context to relevant skills (Swiss → swiss-design, etc.)
- Changed iteration approach: ONE change per iteration, not 3-5
- Updated output format: focus on single most impactful change
- Added rule: "If you can't identify ONE clear improvement, stop"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: kieranklaassen

plugins/compound-engineering/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "compound-engineering",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "description": "AI-powered development tools. 27 agents, 21 commands, 14 skills, 1 MCP server for code review, research, design, and workflow automation.",
   "author": {
     "name": "Kieran Klaassen",

plugins/compound-engineering/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to the compound-engineering plugin will be documented in thi
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.26.3] - 2026-01-14
+
+### Changed
+
+- **`design-iterator` agent** - Now auto-loads design skills at start of iterations
+  - Added "Step 0: Discover and Load Design Skills (MANDATORY)" section
+  - Discovers skills from ~/.claude/skills/, .claude/skills/, and plugin cache
+  - Maps user context to relevant skills (Swiss design → swiss-design skill, etc.)
+  - Reads SKILL.md files to load principles into context before iterating
+  - Extracts key principles: grid specs, typography rules, color philosophy, layout principles
+  - Skills are applied throughout ALL iterations for consistent design language
+
+---
+
 ## [2.26.2] - 2026-01-14
 
 ### Changed

plugins/compound-engineering/agents/design/design-iterator.md

@@ -126,42 +126,94 @@ For each iteration, output:
 ```
 ## Iteration N/Total
 
-**Current State Analysis:**
-- [What's working well]
-- [What could be improved]
+**What's working:** [Brief - don't over-analyze]
 
-**Changes This Iteration:**
-1. [Specific change 1]
-2. [Specific change 2]
-3. [Specific change 3]
+**ONE thing to improve:** [Single most impactful change]
 
-**Implementation:**
-[Make the code changes]
+**Change:** [Specific, measurable - e.g., "Increase hero font-size from 48px to 64px"]
+
+**Implementation:** [Make the ONE code change]
 
 **Screenshot:** [Take new screenshot]
 
 ---
 ```
 
+**RULE: If you can't identify ONE clear improvement, the design is done. Stop iterating.**
+
 ## Important Guidelines
 
-- Make 3-5 meaningful changes per iteration, not too many
-- Each iteration should be noticeably different but cohesive
+- **SMALL CHANGES ONLY** - Make 1-2 targeted changes per iteration, never more
+- Each change should be specific and measurable (e.g., "increase heading size from 24px to 32px")
+- Before each change, decide: "What is the ONE thing that would improve this most right now?"
 - Don't undo good changes from previous iterations
 - Build progressively - early iterations focus on structure, later on polish
 - Always preserve existing functionality
 - Keep accessibility in mind (contrast ratios, semantic HTML)
+- If something looks good, leave it alone - resist the urge to "improve" working elements
 
 ## Starting an Iteration Cycle
 
 When invoked, you should:
 
-1. **Load relevant design skills first** - Check if the user mentions a specific style (e.g., "Swiss design", "minimalist", "Stripe-style") and load any available skills that match. Use the Skill tool to invoke design-related skills before starting iterations.
-2. Confirm the target component/file path
-3. Confirm the number of iterations requested (default: 10)
-4. Optionally confirm any competitor sites to research
-5. Set up browser with `browser_resize` for appropriate viewport
-6. Begin the iteration cycle
+### Step 0: Discover and Load Design Skills (MANDATORY)
+
+**ALWAYS discover and load relevant design skills before starting iterations.** This ensures you have the best practices, patterns, and principles loaded into context.
+
+**1. Discover ALL available design skills:**
+
+```bash
+# Check all skill locations for design-related skills
+ls ~/.claude/skills/ 2>/dev/null | grep -iE "(design|style|ui|ux|frontend|swiss|aesthetic)"
+ls .claude/skills/ 2>/dev/null | grep -iE "(design|style|ui|ux|frontend|swiss|aesthetic)"
+find ~/.claude/plugins/cache -path "*/skills/*" -name "*.md" 2>/dev/null | xargs grep -l -iE "(design|style|visual|typography|grid|layout)" | head -20
+```
+
+**2. Load skills based on context:**
+
+| User Mentions | Skills to Load |
+|---------------|----------------|
+| "Swiss design", "minimalist", "grid" | `swiss-design`, `swiss-design-skill` |
+| "frontend", "web", "UI" | `frontend-design` |
+| "Stripe", "Linear", "Vercel" | Research competitor + `frontend-design` |
+| General design work | Load ALL available design skills |
+
+**3. For each relevant skill found, READ the SKILL.md file:**
+
+```bash
+# Read skill documentation to load principles into context
+cat ~/.claude/skills/swiss-design/SKILL.md
+cat ~/.claude/skills/frontend-design/SKILL.md
+# etc.
+```
+
+**4. Extract and apply key principles:**
+
+After reading each skill, note the key design principles to follow during iterations:
+- Grid system specifications (columns, gutters, baseline)
+- Typography rules (scale, alignment, hierarchy)
+- Color philosophy (palette, accent usage)
+- Layout principles (asymmetry, whitespace, balance)
+- Anti-patterns to avoid
+
+**Example skill loading flow:**
+
+```
+1. User asks to improve design with "Swiss style"
+2. Search: ls ~/.claude/skills/ | grep -i swiss
+3. Found: swiss-design/
+4. Read: cat ~/.claude/skills/swiss-design/SKILL.md
+5. Extract: 8px baseline, 12-column grid, flush-left alignment, one typeface
+6. Apply these principles in ALL subsequent iterations
+```
+
+### Step 1-5: Continue with iteration cycle
+
+1. Confirm the target component/file path
+2. Confirm the number of iterations requested (default: 10)
+3. Optionally confirm any competitor sites to research
+4. Set up browser with `agent-browser` for appropriate viewport
+5. Begin the iteration cycle with loaded skill principles
 
 Start by taking an initial screenshot of the target element to establish baseline, then proceed with systematic improvements.