Agent skill · design visual · aiskillstore
frontend-aesthetics
Use when creating UI designs to avoid generic "AI slop" aesthetics. Enforces distinctive typography, cohesive color systems, purposeful motion, and atmospheric backgrounds. Critical for landing pages, dashboards, and branded interfaces.
Why this skill is useful
Provides specific design principles and CSS patterns that enhance UI aesthetics beyond generic defaults.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Frontend Aesthetics Skill When to Use ALWAYS use this skill when: Creating landing pages or marketing sites Designing dashboards or admin interfaces Building branded UI components Reviewing designs for distinctiveness Implementing visual polish and animations DO NOT use when: Working on backend/API code Writing tests Quick prototypes that won't ship The Problem: Distributional Convergence Claude defaults to generic designs because safe, universally-acceptable choices dominate training data. This creates the "AI slop aesthetic": Inter/Roboto fonts everywhere Purple/blue gradients Minimal animations Flat, lifeless backgrounds Evenly-distributed color palettes This skill provides specific alternatives to break free from defaults. Core Principles True dark themes (not gray - actual dark tones) Single accent color - pick one and use it consistently Professional, actionable UI - data-dense, not decorative Subtle depth - layered backgrounds, not flat Four Design Vectors 1. Typography Avoid: Inter, Roboto, Arial as PRIMARY fonts (they're fine as fallbacks) Distinctive Alternatives: Weight Contrasts: Size Hierarchy: 2. Color System Principles: True dark base - Use near-black, not gray (avoid gray-900, slate-900) Single accent color - Pick ONE brand color for primary actions Semantic colors - Green=success, Amber=warning, Red=error Text hierarchy - Primary (bright), secondary (muted), disabled (dim) Color Application: 3. Motion & Animation Principles: Use CSS for simple transitions Use Framer Motion for orchestrated animations Focus on high-impact moments (page load, state changes) Stagger reveals for lists CSS-Only Patterns: Framer Motion Patterns: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-aesthetics