Comprehensive frontend design review to prevent generic aesthetics and ensure distinctive, accessible, engaging interfaces using shadcn/ui and Tailwind CSS
Comprehensive frontend design review that identifies generic patterns (Inter fonts, purple gradients, default props) and provides specific Tailwind/shadcn/ui code to create distinctive, accessible, branded interfaces.
/plugin marketplace add hirefrank/hirefrank-marketplace/plugin install edge-stack@hirefrank-marketplace<command_purpose> Perform comprehensive frontend design reviews focusing on typography, colors, animations, component customization, and accessibility. Prevents "distributional convergence" (Inter fonts, purple gradients, minimal animations) and guides toward distinctive, branded interfaces. </command_purpose>
<role>Senior Frontend Design Architect with expertise in shadcn/ui, Tailwind CSS, accessibility (WCAG 2.1 AA), and distinctive design patterns</role>
Design Philosophy (from Claude Skills Blog):
"Think about frontend design the way a frontend engineer would. The more you can map aesthetic improvements to implementable frontend code, the better Claude can execute."
Core Problem: LLMs default to generic patterns (Inter fonts, purple gradients, minimal animations) due to distributional convergence. This command identifies and fixes these patterns.
ā ļø Security Note: When reviewing external design inspiration sites or scraping design patterns from untrusted sources using browser automation, be aware that malicious websites could attempt prompt injection attacks. Exercise caution when:
Best Practices:
This command focuses on analyzing your own codebase for design improvements. If you extend it to analyze external sites, treat all extracted content as untrusted.
For more information, see Anthropic's research on prompt injection defenses.
<task_list>
components/, pages/, layouts/, app.reacttailwind.config.ts or tailwind.config.js for custom theme configurationapp.config.ts for shadcn/ui configurationapp.config.ts for global UI customizationButton, Card, etc.)</task_list>
<summary_format> š Project Scope:
<parallel_tasks>
Run design-focused analysis in 3 phases. Focus on preventing generic patterns and ensuring accessible, distinctive design.
Phase 1: Autonomous Skills Validation (Parallel)
These skills run autonomously to catch generic patterns:
ā shadcn-ui-design-validator (SKILL)
ā component-aesthetic-checker (SKILL)
ā animation-interaction-validator (SKILL)
Output: List of generic patterns detected across all components
Phase 2: Deep Agent Analysis (Parallel)
Launch specialized agents for comprehensive review:
Task frontend-design-specialist(all Vue files, Tailwind config)
Task shadcn-ui-architect(all Vue files with shadcn/ui components)
ui prop customization depthTask accessibility-guardian(all Vue files)
Phase 3: Configuration & Theme Review (Sequential)
Review Tailwind Configuration
tailwind.config.ts for custom fonts (not Inter/Roboto)Review shadcn/ui Configuration
app.config.ts for global UI customizationapp.config.ts for shadcn/ui theme settings</parallel_tasks>
<consolidation_steps>
Collect all findings from skills and agents
Remove duplicates (same issue reported by multiple sources)
Categorize by type:
Prioritize by impact:
Generate implementation plan with time estimates
</consolidation_steps>
<findings_format>
Scope: X components reviewed, Y configuration files analyzed
Findings:
Generic Patterns Detected:
Distinctiveness Score: XX/100
Severity: P1 - High Impact Files Affected: 15 components Impact: Indistinguishable from 80%+ of modern websites
Finding: Using default Inter font system-wide
Current State:
<!-- app/components/Hero.tsx:12 -->
<h1 class="text-4xl font-sans">Welcome</h1>
<!-- tailwind.config.ts -->
fontFamily: {
sans: ['Inter', 'system-ui'] // ā Generic
}
Recommendation:
<!-- Updated component -->
<h1 class="text-4xl font-heading tracking-tight">Welcome</h1>
<!-- tailwind.config.ts -->
fontFamily: {
sans: ['Space Grotesk', 'system-ui', 'sans-serif'], // Body
heading: ['Archivo Black', 'system-ui', 'sans-serif'], // Headings
mono: ['JetBrains Mono', 'monospace'] // Code
}
Implementation:
tailwind.config.ts with custom fonts (5 min)app.config.ts (5 min)
Total: ~20 minutesSeverity: P1 - High Impact
Files Affected: app/components/Hero.tsx:8
Impact: "AI-generated" aesthetic, lacks brand identity
Finding: Hero section uses purple-500 to purple-600 gradient (appears in 60%+ of AI-generated sites)
Current State:
<div class="bg-gradient-to-r from-purple-500 to-purple-600">
<h1 class="text-white">Hero Title</h1>
</div>
Recommendation:
<div class="relative overflow-hidden">
<!-- Multi-layer atmospheric background -->
<div class="absolute inset-0 bg-gradient-to-br from-brand-coral via-brand-ocean to-brand-sunset" />
<!-- Animated gradient orbs -->
<div class="absolute top-0 left-0 w-96 h-96 bg-brand-coral/30 rounded-full blur-3xl animate-pulse" />
<div class="absolute bottom-0 right-0 w-96 h-96 bg-brand-ocean/30 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;" />
<!-- Content -->
<div class="relative z-10 py-24">
<h1 class="text-white font-heading text-6xl tracking-tight">
Hero Title
</h1>
</div>
</div>
<!-- tailwind.config.ts: Add custom colors -->
colors: {
brand: {
coral: '#FF6B6B',
ocean: '#4ECDC4',
sunset: '#FFE66D'
}
}
Implementation:
tailwind.config.ts (5 min)Severity: P1 - High Impact Files Affected: 8 components Impact: Generic appearance, no brand identity
Finding: 23 Button instances using default props only (no customization)
Current State:
<!-- app/components/CallToAction.tsx:34 -->
<Button onClick={handleClick">Click me</Button>
Recommendation:
<Button
color="primary"
size="lg"
:ui="{
font: 'font-heading tracking-wide',
rounded: 'rounded-full',
padding: { lg: 'px-8 py-4' },
shadow: 'shadow-lg hover:shadow-xl'
}"
class="
transition-all duration-300 ease-out
hover:scale-105 hover:-rotate-1
active:scale-95 active:rotate-0
focus:outline-none
focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
"
onClick={handleClick"
>
<span class="inline-flex items-center gap-2">
Click me
<Icon
name="i-heroicons-sparkles"
class="transition-transform duration-300 group-hover:rotate-12"
/>
</span>
</Button>
Better Approach: Create Reusable Variants:
<!-- composables/useDesignSystem.ts -->
export const useDesignSystem = () => {
const button = {
primary: {
color: 'primary',
size: 'lg',
ui: {
font: 'font-heading tracking-wide',
rounded: 'rounded-full',
padding: { lg: 'px-8 py-4' }
},
class: 'transition-all duration-300 hover:scale-105 hover:shadow-xl'
}
};
return { button };
};
<!-- Usage in components -->
const { button } = useDesignSystem();
<Button v-bind="button.primary" onClick={handleClick">
Click me
</Button>
Implementation:
composables/useDesignSystem.ts with button variants (15 min)Severity: P2 - Medium Impact Impact: Flat UI, reduced engagement
Finding: 32 interactive elements (buttons, links, cards) without hover animations
Recommendation: Add transition utilities to all interactive elements
<!-- Before -->
<Card>Content</Card>
<!-- After -->
<Card
:ui="{ shadow: 'shadow-lg hover:shadow-2xl' }"
class="transition-all duration-300 hover:-translate-y-1"
>
Content
</Card>
[Continue with remaining P2 issues...]
Severity: P1 - Blocker Standard: WCAG 1.4.3 (4.5:1 for normal text, 3:1 for large text)
Violations:
app/components/Footer.tsx:23 - Gray-400 on white (2.9:1) āapp/routes/about.tsx:45 - Brand-coral on white (3.2:1) āapp/components/Badge.tsx:12 - Yellow-300 on white (1.8:1) ālayouts/default.tsx:67 - Blue-400 on gray-50 (2.4:1) āFixes: [Specific contrast-compliant color recommendations]
[List P3 improvements...]
tailwind.config.ts with custom fonts and colorscomposables/useDesignSystem.ts with reusable variantsTotal Time Estimate: 4-7 hours for complete implementation
/triage: Create todos for approved findings/es-design-reviewBefore: 35/100 (Generic, AI-generated aesthetic) After P1 Fixes: 75/100 (Distinctive, branded) After P1+P2 Fixes: 90/100 (Excellent, highly polished) After P1+P2+P3: 95/100 (Outstanding, delightful)
</findings_format>
<todo_format>
For each P1 issue, create a todo in .claude/todos/ with format:
001-pending-p1-update-typography.md002-pending-p1-fix-hero-gradient.md003-pending-p1-customize-buttons.mdEach todo includes:
</todo_format>
Ask user: "Would you like me to create todos for these findings? You can then use /triage to work through them systematically."
ā Design review complete when:
ā Project ready for distinctive brand identity when:
After implementing fixes:
/es-design-review to verify improvements/validate to ensure no build/lint errors/review for comprehensive code review (includes runtime, security, performance)/es-component to scaffold new components with best practices/es-theme to generate custom design themes