From code-practices
UI feedback loop using screenshots. Provide design mock, implement, screenshot result, iterate until matching. Use for visual work.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-2 --plugin rahulsub-code-practices-pluginThis skill uses the workspace's default tool permissions.
Use when implementing UI components, layouts, or any visual work where "looks right" matters.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Use when implementing UI components, layouts, or any visual work where "looks right" matters.
From Anthropic's Claude Code best practices: "Provide design mocks or screenshots. Have Claude implement, screenshot results, and iterate until matching the target. This gives Claude concrete feedback for refinement."
Give Claude a clear visual reference:
Here's the design mock for the new dashboard header:
[drag and drop image or provide path]
Implement this in React with Tailwind CSS.
Ways to provide visual targets:
Claude implements based on the visual reference.
Capture what Claude built:
# Take screenshot of the running app
# On macOS: Cmd+Shift+4 to select area
# Or use browser DevTools device mode
Share the screenshot back with Claude:
Here's what it looks like now:
[screenshot of current implementation]
Compare to the original design. The spacing between cards is too tight
and the shadow is too harsh. Adjust to match the design more closely.
Continue the loop:
Vague (less effective):
"It doesn't look right"
Specific (more effective):
"The button is 20px too far from the edge. The font weight should be semibold not bold. The border radius should match the card above it."
With visual reference:
"See how in the design the cards have subtle shadows? Current implementation has no shadow. Add
shadow-smto match."
## Visual Implementation Task
### Target Design
[Image: design mock or reference screenshot]
### Technical Requirements
- Framework: [React/Vue/etc]
- Styling: [Tailwind/CSS modules/etc]
- Responsive: [breakpoints to support]
### Key Visual Elements
- [ ] [Element 1 - specific requirements]
- [ ] [Element 2 - specific requirements]
- [ ] [Color/spacing tokens to use]
### Iteration Process
1. Implement initial version
2. I'll screenshot and provide feedback
3. Iterate until matching design