visual-annotation-tuning
CommunityRefine UI layouts from visual feedback
Design & Creative#frontend#responsive design#visual feedback#ui tuning#screenshot annotation#css adjustment
AuthorECFN15
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps frontend teams accurately translate screenshot annotations into precise UI adjustments without misinterpreting the intended visual change or affecting unrelated elements.
Core Features & Use Cases
- Annotation Interpretation: Converts arrows, circles, and visual marks into concrete element-level positioning or styling changes.
- Scoped UI Refinement: Guides responsive frontend tweaks for buttons, cards, images, text, decorations, spacing, and visual hierarchy while preserving unaffected breakpoints.
- Use Case: When a designer marks a mobile CTA decoration that is too close to a button, use this Skill to identify the exact element, adjust its position, and verify that desktop behavior remains unchanged.
Quick Start
Use the visual annotation tuning skill to move the highlighted decorative element away from the CTA while keeping the desktop layout unchanged.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-annotation-tuning Download link: https://github.com/ECFN15/secondevienextjsSSR/archive/main.zip#visual-annotation-tuning Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 545,000+ vetted skills library on demand.