[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>
This commit is contained in:
Kieran Klaassen
2026-01-14 21:18:54 -08:00
parent d1defc2e57
commit be8e5f3ba2
3 changed files with 84 additions and 18 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "compound-engineering", "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.", "description": "AI-powered development tools. 27 agents, 21 commands, 14 skills, 1 MCP server for code review, research, design, and workflow automation.",
"author": { "author": {
"name": "Kieran Klaassen", "name": "Kieran Klaassen",

View File

@@ -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/), 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). 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 ## [2.26.2] - 2026-01-14
### Changed ### Changed

View File

@@ -126,42 +126,94 @@ For each iteration, output:
``` ```
## Iteration N/Total ## Iteration N/Total
**Current State Analysis:** **What's working:** [Brief - don't over-analyze]
- [What's working well]
- [What could be improved]
**Changes This Iteration:** **ONE thing to improve:** [Single most impactful change]
1. [Specific change 1]
2. [Specific change 2]
3. [Specific change 3]
**Implementation:** **Change:** [Specific, measurable - e.g., "Increase hero font-size from 48px to 64px"]
[Make the code changes]
**Implementation:** [Make the ONE code change]
**Screenshot:** [Take new screenshot] **Screenshot:** [Take new screenshot]
--- ---
``` ```
**RULE: If you can't identify ONE clear improvement, the design is done. Stop iterating.**
## Important Guidelines ## Important Guidelines
- Make 3-5 meaningful changes per iteration, not too many - **SMALL CHANGES ONLY** - Make 1-2 targeted changes per iteration, never more
- Each iteration should be noticeably different but cohesive - 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 - Don't undo good changes from previous iterations
- Build progressively - early iterations focus on structure, later on polish - Build progressively - early iterations focus on structure, later on polish
- Always preserve existing functionality - Always preserve existing functionality
- Keep accessibility in mind (contrast ratios, semantic HTML) - 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 ## Starting an Iteration Cycle
When invoked, you should: 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. ### Step 0: Discover and Load Design Skills (MANDATORY)
2. Confirm the target component/file path
3. Confirm the number of iterations requested (default: 10) **ALWAYS discover and load relevant design skills before starting iterations.** This ensures you have the best practices, patterns, and principles loaded into context.
4. Optionally confirm any competitor sites to research
5. Set up browser with `browser_resize` for appropriate viewport **1. Discover ALL available design skills:**
6. Begin the iteration cycle
```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. Start by taking an initial screenshot of the target element to establish baseline, then proceed with systematic improvements.