ReddRadar
Agent skill
visual-analysis
Use when analyzing images, screenshots, UI mockups, or visual content for extracting information, comparing designs, or assessing visual properties like colors, typography, and layout
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/visual-analysis
SKILL.md
Visual Analysis Skill
Analyze images, screenshots, and visual content.
When to Use
- Analyzing UI mockups or screenshots
- Extracting information from images
- Comparing visual designs
- Quick visual assessments
Quick Mode
Fast, focused analysis for specific questions.
Prompt pattern:
Analyze this image: [attach image]
[specific question]
Examples:
- "What text is visible in this UI?"
- "List all colors used with their hex values"
- "Identify all interactive elements"
Deep Mode
Comprehensive analysis with structured output.
Prompt pattern:
Analyze this image comprehensively:
1. CONTENT INVENTORY
- All UI elements present
- Text content
- Icons and imagery
2. VISUAL PROPERTIES
- Color palette (hex values)
- Typography (fonts, sizes, weights)
- Spacing patterns
- Layout structure
3. OBSERVATIONS
- Design patterns used
- Potential issues
- Notable features
Output as structured markdown.
Common Analysis Patterns
UI Component Analysis
Analyze this UI component:
1. Component type and purpose
2. Visual states (hover, focus, disabled)
3. Accessibility considerations
4. Props/variants needed
5. Similar patterns in common UI libraries
Screenshot Comparison
Compare these two images:
1. Visual differences (be specific about location)
2. Missing elements
3. Spacing/sizing discrepancies
4. Color accuracy
5. Priority fixes ranked by visual impact
Color Extraction
Extract all colors from this image.
Output as JSON:
{
"primary": ["#hex1", "#hex2"],
"secondary": ["#hex3"],
"neutral": ["#hex4", "#hex5"],
"accent": ["#hex6"]
}
Include approximate usage percentage for each color.
Layout Analysis
Analyze the layout structure:
1. Grid system (columns, gutters)
2. Container widths
3. Section divisions
4. Responsive breakpoint hints
5. Flexbox vs Grid recommendations
Output CSS/Tailwind structure.
Output Formats
- Markdown (default): Structured text
- JSON: For design tokens
- Code: Direct implementation
Storage
Save findings to .opencode/memory/design/analysis/
Related Skills
| Need | Skill |
|---|---|
| Found accessibility issues | accessibility-audit |
| Need to implement design | mockup-to-code |
| Want design tokens | design-system-audit |
| Need aesthetic improvements | frontend-design |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?