Web Design Skill Pack

A modular library of 14 interconnected skills that help an AI agent build better websites consistently. Each skill focuses on design principles, values, and outcomes — not on any particular CSS framework or toolchain. The guidance works equally well with Tailwind, vanilla CSS, CSS modules, Styled Components, or any other approach.

How to Use This Skill Pack

This is an orchestrator skill. Read the relevant sub-skills based on what you're building:

For any new web project, always start with:

1. content-structure — Plan the page sections and information flow
2. layout-and-spacing — Set up the grid, spacing system, and spatial relationships
3. typography — Choose fonts, define the type scale, set line heights
4. color-systems — Build the color palette, define tokens for theming
5. frontend-implementation — Set up design tokens, resets, and base patterns

Then consult based on what you're building: