npx claudepluginhub ragnar-pwninskjold/tech-snacksThis skill uses the workspace's default tool permissions.
Takes a poorly-executed first attempt and systematically closes the gap to the reference. Runs 5 passes, each comparing the current implementation against the Site DNA document to identify the most impactful remaining delta and produce a corrective prompt.
Designs, audits, optimizes, and iterates production-grade frontend interfaces like websites, dashboards, components, forms. Covers UX review, accessibility, performance, responsive design, theming, typography, and motion.
Produces distinctive production-grade UI for components, pages, or visual interfaces. Handles screenshot-driven iteration for visual complaints.
Audits app UIs for visual hierarchy, spacing, typography, color, alignment, and components; generates phased, implementation-ready refinement plans.
Share bugs, ideas, or general feedback.
Takes a poorly-executed first attempt and systematically closes the gap to the reference. Runs 5 passes, each comparing the current implementation against the Site DNA document to identify the most impactful remaining delta and produce a corrective prompt.
Announce: "Running the UI Cloner Iterator — 5 refinement passes against the Site DNA."
Prerequisite: plans/01-site-dna.md must exist in the current project directory. Read it before starting Pass 1.
Before starting, confirm you have:
plans/01-site-dna.mdIf either is missing, ask for it before proceeding.
Run all 5 passes sequentially. Each pass follows the same structure:
1. Compare — Scan the current implementation against the Site DNA. Identify what's still wrong or missing. Use Claude with chrome for visual checking MANDATORY.
2. Prioritize — Rank the 3 most impactful gaps by visual/functional severity:
[CRITICAL] — breaks the identity (wrong colors, wrong fonts, missing core layout)[MAJOR] — significantly degrades quality (wrong spacing, missing animations, off-brand components)[MINOR] — polish items (timing values, easing curves, copy voice)3. Generate — Write a precise corrective prompt targeting ONLY the top 3 gaps from this pass. The prompt must:
#150b07, border-radius from 4px to 48px, font to Inter 400")4. Advance — After generating the corrective prompt, note what was addressed and what remains for the next pass.
Focus: Color palette, typography, and overall background atmosphere.
These are the highest-leverage corrections — if the background, fonts, and primary colors are wrong, every subsequent detail is built on sand.
Check against Site DNA sections: 1.2 (Design Tokens), 1.3 (Atmosphere & Texture).
Focus: Section structure, grid philosophy, whitespace rhythm, and card geometry.
Check against Site DNA sections: 1.1 (Macro Layout), 1.2 (Border Radius, Spacing System).
Focus: Individual component accuracy — nav, feature cards, stats, carousels, FAQ, footer.
Check against Site DNA sections: 1.6 (Component Behavior), 1.5 (Micro-Interactions).
Focus: Entrance animations, scroll triggers, hover states, and timing values.
Check against Site DNA sections: 1.4 (Scroll & Entrance Animations), 1.5 (Micro-Interactions), 1.8 (Motion Philosophy).
Focus: Copy structure, italic accent pattern, rhetorical devices, and any remaining visual polish.
Check against Site DNA sections: 1.9 (Copywriting Voice), 1.2 (typography italic/color pattern).
## Pass [N] — [Focus Area]
### Gaps Identified
- [CRITICAL] [description of gap vs. Site DNA reference]
- [MAJOR] [description of gap]
- [MINOR] [description of gap]
### Corrective Prompt
[The precise, paste-ready corrective prompt for this pass]
---
After completing all 5 passes, output a Master Correction Summary:
Save output: Write the full iterator output (all 5 passes + master summary) to plans/05-iterator.md in the current project directory.