Aesthetic Frontend Skills

What it is

A curated agent skill set providing deep aesthetic vocabulary for frontend development. It covers 56 named visual aesthetics — from Y2K and synthwave to Bauhaus, cottagecore, and beyond — each specified across seven formal dimensions: palette, typography, texture, shape, motion, spatial conventions, and cultural markers. Every aesthetic maps directly to implementable CSS custom properties, W3C DTCG design tokens, and component-level guidance.

Why it was created

Existing frontend skills handle what code should look like in terms of structure: component patterns, routing conventions, type safety, data fetching, and test coverage. They are excellent at what they do. None of them answer the aesthetic question — how should something feel? When you tell an AI agent to "make it feel Y2K" or "give it a dark academia vibe," existing skills have no vocabulary for that. The result is generic, culturally untethered output. aesthetic-frontend-skills fills that gap with a dedicated aesthetic layer that sits on top of any stack.

How it's different

This is not a component library, a design system, or a general frontend framework skill. It is intentionally narrow and deep: a reference for aesthetic literacy and its translation into code. Where other skills ask "how should this be built?", this skill asks "what should this look, feel, and reference?" It provides the cultural and design-historical grounding that makes the difference between a technically correct interface and one that actually resonates.

How to apply it

Install via npx skills. Before any aesthetic work in your project, load the relevant skill and follow the returned SKILL.md. Works with any agent-mode editor — GitHub Copilot, Cursor, Claude, or any tool that supports custom skill / instruction files. The skills are composable: start with aesthetic-literacy for vocabulary, layer in aesthetic-research to collect references, then use aesthetic-application to produce CSS tokens and component notes ready for implementation.

Acknowledgements

This project wouldn't exist without decades of design history writing, open-source tooling, and all the designers, writers, and archivists who bothered to document these movements in the first place. A big thank you to the communities behind TanStack, the W3C Design Tokens Community Group, and the broader design systems ecosystem whose work made a skill set like this conceivable.

The authors of styled-components, Panda CSS, and Tailwind CSS each deepened my curiosity about styling architecture and theming over the years — and ultimately shaped how I think about the relationship between code and visual expression.