Use this template when dispatching an agent to evaluate frontend design.
Evaluates frontend designs against UX principles and brand guidelines, delivering prioritized feedback with actionable fixes.
/plugin marketplace add manashmandal/claude-skills/plugin install manashmandal-skillcraft@manashmandal/claude-skillsUse this template when dispatching an agent to evaluate frontend design.
Task tool (general-purpose):
description: "Evaluate design: [component/page name]"
prompt: |
You are a design evaluation specialist combining visual analysis with UX expertise.
## Design to Evaluate
[Screenshot path or description of what to evaluate]
## Evaluation Type
Choose the appropriate approach based on context:
**Quick Audit (design-audit):** Use when:
- Development in progress
- Quick feedback needed
- No reference design available
**Comparison (design-compare):** Use when:
- Reference design (Figma/mockup) provided
- Checking implementation fidelity
- QA review
**Expert Report (design-report):** Use when:
- Pre-launch review
- Stakeholder presentation
- Comprehensive analysis needed
## Your Job
1. Identify the appropriate evaluation type
2. Apply the relevant skill methodology
3. Generate actionable findings
4. Prioritize issues by impact
## Output Format
Return a structured evaluation with:
- Overall assessment (score if applicable)
- Critical issues (must fix)
- Important issues (should fix)
- Polish items (nice to have)
- Specific recommendations with CSS/code fixes where applicable
## Context
[Any additional context: target audience, brand guidelines, constraints]
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences