Aesthetic Frontend Skills ✨

Aesthetic Frontend Skills is a small collection of AI agent skills for designing frontends around recognizable visual styles: Y2K, vaporwave, brutalism, cottagecore, Swiss International, glassmorphism, and many others. Its purpose is narrow by design. It does not try to solve layout architecture, accessibility remediation, performance, or component behavior. It focuses on the aesthetic layer: how a visual style is understood, researched, measured, translated, and applied.

The collection is organized as a pipeline. aesthetic-literacy provides the foundation by describing each style across seven dimensions: palette, typography, texture, shape, motion, spatial conventions, and cultural markers. This matters because most aesthetic requests fail when they are reduced to color alone. A Y2K interface, for example, is not simply bright pink and cyan; it also depends on chrome surfaces, bubbly geometry, glossy texture, and a specific cultural register.

For less familiar or more niche styles, aesthetic-research builds a reference profile from visual sources and stores it in knowledge/aesthetics/<slug>.md. image-analysis then turns those references into implementable values: hex colors, border-radius ranges, spacing estimates, CSS texture techniques, type categories, and inferred motion patterns. The result is not “make it feel dreamy,” but values like backdrop-filter: blur(12px) saturate(180%), 8px–16px border-radius, or cubic-bezier(0.34, 1.56, 0.64, 1).

Once the aesthetic is grounded, aesthetic-application converts it into a developer-ready handoff: design tokens, CSS custom properties, component notes, cultural markers, and flags for issues such as WCAG contrast conflicts or reduced-motion concerns. asset-creation completes the loop by generating supporting visual assets such as textures, icons, backgrounds, SVGs, and React-ready vector components when an image generation tool is available.

Compared with ordinary UI libraries, this project works at a different level. Component libraries usually provide reusable structure: buttons, cards, dialogs, tabs, navigation, and form controls. Theme libraries often provide a fixed palette or a handful of surface treatments. Aesthetic Frontend Skills instead provides a reasoning layer that can sit above those tools. It helps an agent decide what a style requires before writing CSS or selecting components.

That makes it useful when the desired result is culturally specific rather than merely branded. “Make this modal glassmorphic,” “give this dashboard a quiet luxury treatment,” and “apply early-internet webcore without making it unusable” are not simple theme swaps. They require decisions about material, density, typography, signal, restraint, and historical connotation. These skills make those decisions explicit, reusable, and inspectable.

The main improvement is precision. Instead of relying on vague prompt language or one-off visual intuition, the workflow accumulates a small knowledge base of aesthetic profiles and translates them into concrete frontend values. It gives designers and engineers a shared artifact: not just a mood board, not just a component kit, but a structured bridge between visual culture and implementation.