// Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics. Use when building UI components, designing layouts, selecting colors/fonts, or implementing animations.
| name | frontend-aesthetics |
| description | Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics. Use when building UI components, designing layouts, selecting colors/fonts, or implementing animations. |
Create distinctive designs that avoid generic AI-generated aesthetics.
AVOID (overused): Inter, Roboto, Arial, system fonts
Recommended:
AVOID: Purple gradients on white (clichéd AI aesthetic), generic blue/gray
Principles:
Priorities:
Implementation: CSS-only for HTML/Vanilla JS, Motion (Framer) for React
.stagger-item { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; }
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
AVOID: Solid white/gray, flat surfaces
Use: Layered gradients, geometric patterns, subtle noise, contextual glow/blur
{
"typography": { "primary": "Font + reasoning", "secondary": "Font", "code": "Mono font" },
"colors": { "dominant": ["#hex"], "accent": ["#hex"], "theme_inspiration": "Reference" },
"animations": { "approach": "CSS-only|Framer", "focus": "Page load|micro-interactions", "key_moments": [] },
"backgrounds": { "technique": "Gradients|patterns", "atmosphere": "Description" },
"anti_pattern_validation": { "passed": true, "warnings": [] }
}
Input: Technical documentation, code-focused, for developers
Output:
Inline orchestration workflow for dead code detection and removal with Beads integration. Provides step-by-step phases for dead-code-hunter detection, priority-based cleanup with dead-code-remover, and verification cycles.
Inline orchestration workflow for dependency audit and updates with Beads integration. Provides step-by-step phases for dependency-auditor detection, priority-based updates with dependency-updater, and verification cycles.
Process error logs from admin panel - fetch new errors, analyze, create tasks, fix, and mark resolved
Inline orchestration workflow for code duplication detection and consolidation with Beads integration. Provides step-by-step phases for reuse-hunter detection, priority-based consolidation with reuse-fixer, and verification cycles.
Inline orchestration workflow for security vulnerability detection and remediation with Beads integration. Provides step-by-step phases for security-scanner detection, priority-based fixing with vulnerability-fixer, and verification cycles.
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.