[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:
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user