Enhance Design Skill

Instructions

IMPORTANT: Execute immediately. Do NOT explore the codebase first or propose a plan. Start Phase 1 right now.

Default mode is Full Enhancement (all 4 phases). If the user passed an argument, select the matching mode:

• quick → Phase 1 + Phase 4 only
• mobile → Phase 1 + Phase 2 only
• conversion → Phase 1 + Phase 3 only
• No argument or all → Full Enhancement (Phase 1 → 2 → 3 → 4)

Phase 1: Analyze & Audit

1. Quick project scan (30 seconds max): Use Glob to find page files and Read the main layout to understand project structure. Do NOT launch an Explore agent - just do a quick Glob + Read.

2. Invoke /conversion-audit immediately using the Skill tool. This skill will assess:

   • Page structure and information hierarchy
   • Copy effectiveness and messaging
   • Trust signals and social proof
   • Friction points and obstacles
   • Mobile conversion readiness

3. Present audit results to the user as a prioritized list:

## Design Audit Results

### Critical Issues (Fix First)
1. [Issue] - [Impact] - [Recommended fix]

### High Priority
2. [Issue] - [Impact] - [Recommended fix]

### Medium Priority
...

### Strengths (Don't Change)
- [What's working well]

4. Ask the user to confirm before proceeding to the next phase.

Phase 2: Mobile Optimization

Invoke all three skills in parallel using the Skill tool in a single message:

• /mobile-patterns - Navigation patterns (bottom nav, drawer, tabs), responsive grid, component adaptations (tables → lists, modals → sheets), safe area handling
• /touch-interactions - Touch targets ≥ 48x48px, swipe gestures, touch feedback (scale, ripple), pull-to-refresh
• /mobile-accessibility - Screen reader labels (VoiceOver/TalkBack), focus management, live regions, reduced motion support

Wait for all three to complete.

VERIFY: After all three skills complete, run git diff --stat to check if files were actually modified. If NO files changed (agents completed without writing), the sub-skills' tool calls were likely blocked by permissions. In that case:

1. Review the analysis/recommendations returned by each sub-skill
2. Implement the changes yourself directly using Edit/Write tools
3. Apply mobile patterns, touch interaction fixes, and accessibility improvements based on the sub-skills' guidance

Verify these outputs before proceeding to Phase 3:

• Bottom-heavy layout (thumb zone friendly)
• All touch targets ≥ 48px
• Platform-appropriate patterns
• Safe area handling
• Screen reader support

Phase 3: Conversion Optimization

Invoke all three skills in parallel using the Skill tool in a single message:

• /copywriting-guide - Rewrite headlines using PAS/AIDA/BAB frameworks, transform features into benefits, optimize microcopy, apply power words
• /cta-optimizer - CTA copy (action verb + value + friction reducer), visual design (contrast, size, spacing), placement strategy, primary/secondary/tertiary hierarchy
• /social-proof - Testimonials (photos, names, results), logo trust bar, stats/usage numbers, trust signals near CTAs and forms

Wait for all three to complete.

VERIFY: Run git diff --stat to check if files were actually modified. If NO files changed, implement the changes yourself directly based on the sub-skills' recommendations.

Verify these outputs before proceeding to Phase 4:

• Benefit-driven headlines
• Prominent, action-oriented CTAs
• Strategic social proof placement
• Trust signals near decision points
• No dark patterns

Phase 4: Visual Polish (3 Batches)

Batch 1 - Invoke all three in parallel using the Skill tool in a single message:

• /color-palette - Replace generic colors with sophisticated palette, create color scales (50-900), ensure WCAG contrast ratios, define semantic usage
• /typography-system - Type scale with clear hierarchy, font pairing, weight/line-height definitions, responsive sizing
• /spacing-system - Intentional spacing rhythm, content-relationship-based spacing, break mechanical uniformity, consistent scale

Wait for Batch 1 to complete.

VERIFY: Run git diff --stat. If no files changed, implement the design system changes yourself directly.

Batch 2 - Invoke both in parallel using the Skill tool in a single message:

• /component-states - Complete interactive states (hover, focus, active, disabled, loading), smooth transitions, keyboard focus indicators, error/success states
• /micro-interactions - Subtle hover effects, entrance animations, meaningful loading states, polished state transitions

Wait for Batch 2 to complete.

VERIFY: Run git diff --stat. If no files changed, implement states and interactions yourself directly.

Batch 3 - Invoke sequentially:

• /component-polish - Final detail pass, perfect alignment and spacing, subtle shadows and depth, pixel-perfect implementation

VERIFY: Run git diff --stat. If no files changed, implement the polish yourself directly.

Verify these outputs:

• Sophisticated color palette
• Clear typography hierarchy
• Intentional spacing rhythm
• Complete interactive states
• Delightful micro-interactions
• Production-ready quality

Final Report

After all phases complete, present a summary:

# Design Enhancement Report

## Summary
- **Mode**: [Full/Quick/Mobile/Conversion]
- **Components Enhanced**: [number]
- **Issues Fixed**: [number]

## Phase 1: Audit Results
[Summary of findings]

## Phase 2: Mobile Optimization
[Summary: navigation changes, touch target fixes, accessibility additions]

## Phase 3: Conversion Optimization
[Summary: copy changes, CTA updates, social proof added]

## Phase 4: Visual Polish
[Summary: color palette, typography, spacing, states, interactions]

## Files Modified
- `[filepath]` - [Changes made]

## Verification Checklist
- [x] All touch targets ≥ 48px
- [x] Color contrast ≥ 4.5:1
- [x] Screen reader tested
- [x] CTA copy is action-oriented
- [x] Social proof placed strategically
- [x] No dark patterns present
- [x] Component states complete
- [x] Micro-interactions added

Skill Chain Reference

Integration with Agents

This skill works well when invoked by:

• ui-ux-designer - For complete design transformations
• mobile-designer - When mobile-first approach is needed
• conversion-optimizer - When revenue optimization is primary goal

Notes

• Each phase can be run independently if needed
• User approval checkpoint after Phase 1 (audit) is recommended
• For very large projects, consider running one phase per session
• Individual skills can be re-run if specific improvements needed
• All changes follow ethical design principles (no dark patterns)
• Accessibility is baked into every phase, not an afterthought