// 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.
Generate comprehensive role guides (job descriptions on steroids) for any position. Multi-phase workflow with web research, adaptive questions, 26 content blocks based on Netflix/Amazon/Toyota/Spotify/Bridgewater best practices, and course brief generation. Use /job-description to create a role guide.
Analyzes code changes for bugs, security vulnerabilities, performance problems, and architectural improvements. Generates structured markdown reports with evidence-based findings tied to specific file:line references, and creates Beads tasks for tracking. Adapts review depth based on scope — from quick pre-commit checks to thorough branch reviews. Use proactively when reviewing code before commits, after implementing features, before PRs, when checking code quality, or when the user mentions "review", "check changes", "code review", "PR review", "review branch", or any code quality assessment.
Process error logs from admin panel - fetch new errors, analyze, create tasks, fix, and mark resolved. Checks Axiom/Pino if DB entries are filtered.
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.
Generate standardized conventional commit messages with Claude Code attribution. Use when creating automated commits, release commits, or any git commit requiring consistent formatting.
| 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: