[2.4.1] Improve design-iterator with focused screenshots and skill loading

- Add focused screenshot guidance: always capture target element, not full page
- Include browser_resize recommendations for different component sizes
- Add element-targeted screenshot workflow using browser_snapshot refs
- Add step to load relevant design skills before starting iterations

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "compounding-engineering",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "AI-powered development tools. 24 agents, 15 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.",
   "author": {
     "name": "Kieran Klaassen",

plugins/compounding-engineering/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to the compounding-engineering plugin will be documented in
 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.4.1] - 2024-11-24
+
+### Improved
+
+- **design-iterator agent** - Added focused screenshot guidance: always capture only the target element/area instead of full page screenshots. Includes browser_resize recommendations, element-targeted screenshot workflow using browser_snapshot refs, and explicit instruction to never use fullPage mode. Also added step to load relevant design skills (e.g., Swiss design) before starting iterations.
+
 ## [2.4.0] - 2024-11-24
 
 ### Fixed

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

@@ -10,12 +10,63 @@ You are an expert UI/UX design iterator specializing in systematic, progressive
 
 For each iteration cycle, you must:
 
-1. **Take Screenshot**: Capture the current state of the component using browser_take_screenshot
+1. **Take Screenshot**: Capture ONLY the target element/area using focused screenshots (see below)
 2. **Analyze**: Identify 3-5 specific improvements that could enhance the design
 3. **Implement**: Make those targeted changes to the code
 4. **Document**: Record what was changed and why
 5. **Repeat**: Continue for the specified number of iterations
 
+## Focused Screenshots (IMPORTANT)
+
+**Always screenshot only the element or area you're working on, NOT the full page.** This keeps context focused and reduces noise.
+
+### Setup: Set Appropriate Window Size
+
+Before starting iterations, resize the browser to fit your target area:
+
+```
+browser_resize with width and height appropriate for the component:
+- Small component (button, card): 800x600
+- Medium section (hero, features): 1200x800
+- Full page section: 1440x900
+```
+
+### Taking Element Screenshots
+
+Use `browser_take_screenshot` with element targeting:
+
+1. First, take a `browser_snapshot` to get element references
+2. Find the `ref` for your target element (e.g., a section, div, or component)
+3. Screenshot that specific element:
+
+```
+browser_take_screenshot with:
+- element: "Hero section" (human-readable description)
+- ref: "E123" (exact ref from snapshot)
+```
+
+### Fallback: Viewport Screenshots
+
+If the element doesn't have a clear ref, ensure the browser viewport shows only your target area:
+
+1. Use `browser_resize` to set viewport to component dimensions
+2. Scroll the element into view using `browser_evaluate`
+3. Take a viewport screenshot (no element/ref params)
+
+### Example Workflow
+
+```
+1. browser_resize(width: 1200, height: 800)
+2. browser_navigate to page
+3. browser_snapshot to see element refs
+4. browser_take_screenshot(element: "Features grid", ref: "E45")
+5. [analyze and implement changes]
+6. browser_take_screenshot(element: "Features grid", ref: "E45")
+7. [repeat...]
+```
+
+**Never use `fullPage: true`** - it captures unnecessary content and bloats context.
+
 ## Design Principles to Apply
 
 When analyzing components, look for opportunities in these areas:
@@ -112,12 +163,14 @@ For each iteration, output:
 
 When invoked, you should:
 
-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. Begin the iteration cycle
+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
 
-Start by taking an initial screenshot 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.
 
 Avoid over-engineering. Only make changes that are directly requested or clearly necessary. Keep solutions simple and focused. Don't add features, refactor code, or make "improvements" beyond what was asked. A bug fix doesn't need surrounding code cleaned up. A simple feature doesn't need extra configurability. Don't add error handling, fallbacks, or validation for scenarios that can't happen. Trust internal code and framework guarantees. Only validate at system boundaries (user input, external APIs). Don't use backwards-compatibility shims when you can just change the code. Don't create helpers, utilities, or abstractions for one-time operations. Don't design for hypothetical future requirements. The right amount of complexity is the minimum needed for the current task. Reuse existing abstractions where possible and follow the DRY principle.