aesthetic-guide
Research a UI design aesthetic and produce exhaustive, implementation-ready design guidelines for coding agents. Use when the user names an aesthetic (brutalist, glassmorphism, retro-futuristic, Swiss modernist, Apple HIG, neumorphism, minimalism, cyberpunk, Material Design, art deco, vaporwave, etc.) and wants a complete style guide with exact CSS values, color palettes, component states, animations, and typography — detailed enough for a coding agent to faithfully implement the aesthetic with zero ambiguity.
- Installs
- 51
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/petekp/agent-skills --skill aesthetic-guide- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads aesthetic-guide automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Aesthetic Guide
Produce exhaustive, implementation-ready design system documentation for a named UI aesthetic. The output is a reference guide detailed enough that a coding agent can faithfully implement the aesthetic with minimal room for interpretation.
Workflow
- Identify the aesthetic from the user's request
- Check the catalog — read references/aesthetic-catalog.md to see if pre-researched data exists for this aesthetic
- Research if needed — if the aesthetic is not in the catalog or the user wants a custom variant, conduct web research to gather implementation-level specifics (exact CSS values, fonts, colors, timing functions)
- Load the output schema — read references/output-schema.md for the required structure
- Generate the guide — fill every section of the output schema with concrete, copy-pasteable values. No hand-waving, no "choose an appropriate value" — every property must have an exact value or a constrained range with rationale.
- Deliver as a markdown file — write the completed guide to the project (default:
.claude/docs/{aesthetic-name}-design-system.md)
Research Protocol
When researching an aesthetic not in the catalog:
- Search for "{aesthetic} CSS", "{aesthetic} UI design system", "{aesthetic} web design examples"
- Look for open-source implementations, CodePen examples, design system documentation
- Extract concrete values: hex codes, font names, px/rem values, cubic-bezier curves, shadow syntax
- Cross-reference multiple sources to identify the consensus properties that define the aesthetic
- Distinguish between essential properties (without these, it's not the aesthetic) and characteristic properties (common but optional)
Output Requirements
- Every color must be a hex or HSL value, never a name like "dark blue"
- Every font must be a specific family with fallback stack
- Every spacing value must be in px or rem
- Every transition must have duration + timing function
- Every interactive state (hover, active, focus, disabled) must have explicit CSS
- Every component must have all pseudo-states defined
- Include both CSS custom properties (variables) and Tailwind equivalents where applicable
Customization
The user may request:
- A specific framework (Tailwind, vanilla CSS, CSS-in-JS) — adjust output format
- A hybrid ("brutalist with soft shadows") — blend aesthetics, noting which properties come from which
- A variant ("dark mode cyberpunk" vs "light mode cyberpunk") — generate the specific variant
- Partial guide (just colors, just typography) — generate only the requested sections
FAQ
What does the aesthetic-guide skill do?
Research a UI design aesthetic and produce exhaustive, implementation-ready design guidelines for coding agents. Use when the user names an aesthetic (brutalist, glassmorphism, retro-futuristic, Swiss modernist, Apple HIG, neumorphism, minimalism, cyberpunk, Material Design, art deco, vaporwave, etc.) and wants a complete style guide with exact CSS values, color palettes, component states, animations, and typography — detailed enough for a coding agent to faithfully implement the aesthetic with zero ambiguity.
How do I install aesthetic-guide?
Run npx skills add https://github.com/petekp/agent-skills --skill aesthetic-guide in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/aesthetic-guide/ (personal) or .claude/skills/aesthetic-guide/ (project).
Which AI agents can use aesthetic-guide?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is aesthetic-guide safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains aesthetic-guide?
It is published by petekp in petekp/agent-skills. It has 51 recorded installs.
More from petekp/agent-skills
typography
petekp/agent-skills
Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure, typographic hierarchy, variable fonts, font loading, or OpenType features.
macos-app-design
petekp/agent-skills
Use when designing or building native macOS applications with SwiftUI or AppKit. Triggers on menu bar structure, keyboard shortcuts, multi-window behavior, Liquid Glass design system, macOS Tahoe/Sequoia, sidebar navigation, toolbar design, app icons, SF Symbols, or making an app feel like a "good Mac citizen."
optimize-agent-docs
petekp/agent-skills
Build a retrieval-optimized knowledge layer over agent documentation in dotfiles (.claude, .codex, .cursor, .aider). Use when asked to "optimize docs", "improve agent knowledge", "make docs more efficient", or when documentation has accumulated and retrieval feels inefficient. Generates a manifest mapping task-contexts to knowledge chunks, optimizes information density, and creates compiled artifacts for efficient agent consumption.
codebase-study-guide
petekp/agent-skills
Generate a pedagogically-grounded study guide for learning an unfamiliar codebase. Use when the user wants to onboard onto a codebase, understand a project's architecture, create learning materials for a team, or asks things like "help me learn this codebase", "create an onboarding guide", "I'm new to this project", "how does this system work", "study guide for this repo", or "explain this codebase to me". Produces a structured document that builds understanding from purpose to systems to patterns, using evidence-based learning techniques (elaborative interrogation, concept mapping, threshold concepts, worked examples, progressive disclosure).
unix-macos-engineer
petekp/agent-skills
Expert Unix and macOS systems engineer for shell scripting, system administration, command-line tools, launchd, Homebrew, networking, and low-level system tasks. Use when the user asks about Unix commands, shell scripts, macOS system configuration, process management, or troubleshooting system issues.
explainer-visuals
petekp/agent-skills
Create high-quality animated explainer visuals for essays and blog posts. Use when the user wants to visualize concepts, processes, data, or ideas with interactive web animations. Triggers on requests like "create a visual for", "animate this concept", "make an explainer", "visualize this idea", "diagram this process", "show this data", or when essay content would benefit from visual explanation. Handles abstract concepts (mental models, frameworks), technical processes (algorithms, systems), and data visualization (trends, comparisons). Outputs self-contained HTML/CSS/JS that embeds directly in web content.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.