Use when reviewing frontend design quality without a reference. Identifies UX issues, accessibility problems, and visual inconsistencies with actionable fix suggestions.
/plugin marketplace add manashmandal/claude-skills/plugin install manashmandal-skillcraft@manashmandal/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Quickly identify design issues and provide actionable suggestions for improvement without needing a reference design.
Core principle: Good design follows patterns. Deviations from patterns are often bugs.
Use this skill when:
Announce: "I'll perform a quick design audit using design-audit skill."
Capture gut reaction:
Check each category in order:
Output format:
## Quick Design Audit
### Overall Score: [X/10]
Brief 1-line summary
### Critical Issues (Fix Now)
1. **[Issue]** - [Location]
- Problem: [Description]
- Fix: [Specific actionable suggestion]
- Impact: [Why this matters]
### High Priority Issues (Should Fix)
1. **[Issue]** - [Location]
- Problem: [Description]
- Fix: [Specific actionable suggestion]
### Medium Priority Issues (Consider Fixing)
1. **[Issue]** - [Location]
- Problem: [Description]
- Fix: [Specific actionable suggestion]
### Low Priority Polish (Nice to Have)
1. **[Issue]** - [Location]
- Suggestion: [Improvement idea]
### What's Working Well
- [Positive observation]
- [Another strength]
| Impact \ Effort | Low Effort | High Effort |
|---|---|---|
| High Impact | Fix Now | Plan Soon |
| Low Impact | Quick Win | Backlog |
/* Problem: Inconsistent spacing */
/* Fix: Use spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
/* Problem: Poor readability */
/* Fix: */
body {
font-size: 16px; /* Not 14px */
line-height: 1.5; /* Not 1.2 */
max-width: 65ch; /* Limit line length */
}
/* Problem: Low contrast */
/* Fix: Use contrast checker, aim for 4.5:1+ */
/* Bad: #888 on #fff (3.5:1) */
/* Good: #666 on #fff (5.7:1) */
/* Problem: No hover/focus states */
/* Fix: */
button:hover { background: var(--primary-dark); }
button:focus { outline: 2px solid var(--focus-ring); }
button:active { transform: scale(0.98); }
| Severity | Criteria | Examples |
|---|---|---|
| Critical | Blocks usage or accessibility | No focus states, contrast < 3:1, touch targets < 30px |
| High | Impacts usability significantly | Unclear CTA, confusing hierarchy, inconsistent patterns |
| Medium | Noticeable but functional | Minor spacing issues, suboptimal typography |
| Low | Polish items | Pixel alignment, shadow refinement |
After audit, offer:
design-report for comprehensive analysisStop and clarify if:
Related skills:
design-compare - When you have a reference designdesign-report - For deep expert analysisThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.