aesthetic-guide

Originally frompetekp/agent-skills
Installation
SKILL.md

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

  1. Identify the aesthetic from the user's request
  2. Check the catalog — read references/aesthetic-catalog.md to see if pre-researched data exists for this aesthetic
  3. 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)
  4. Load the output schema — read references/output-schema.md for the required structure
  5. 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.
  6. 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:

Related skills

More from petekp/claude-code-setup

Installs
17
GitHub Stars
35
First Seen
Feb 9, 2026