AI coding assistants write better code when they know your tools. Spruce CSS ships agent skills: short, focused instruction files that teach an assistant the framework's conventions and the visual language of every design style.
The skills live in the npm package, in the skills folder, so they always match the version you have installed.
| Skill | What it teaches |
|---|---|
sprucecss | Setup, configuration, the getters (color(), spacer(), radius(), shadow()…), the layout mixins, the markup of every element, the coding conventions and a component pattern. |
sprucecss-library | How to use the ready-made Spruce UI components, blocks and pages with only the npm package installed: find the item in library.json, fetch its Markdown endpoint, copy the code with its dependencies in order and change only the content. |
sprucecss-styles | How to apply, scope and create style presets: tokens, shorthands, hooks, colors and rules. |
sprucecss-spacing | Where the space between elements comes from: a flex column with a gap for sections (like every __inner), layout-stack() for text, no margin resets on the children, and inline elements wrapped in a block. |
sprucecss-list-layout | Lists whose items sit side by side (tags, links, logos, card grids): the base list is a vertical stack, so the list clears the owl margins on its li elements (margin-block: 0) and sets their padding-block to 0, and the gap spaces them. |
sprucecss-blocks | How to build blocks (.name-block > .container > .name-block__inner), components and pages: data-driven content, tokens, logical properties, accessibility and vanilla JavaScript rules. |
sprucecss-block-rhythm | The rhythm between the blocks of a page: blocks on the same background share one wrapper, and a block that follows a block on the same background drops its top padding, so the gap is never doubled. |
styles/minimal | Quiet, monochrome and flat. Hairline borders, small radii, no decorative shadows; the content does the talking. |
styles/brutalist | Neo-brutalism: thick black outlines, hard offset shadows, zero radius, loud yellow and pink, uppercase labels. |
styles/soft | Soft UI: generous rounding, pastel surfaces, pill-shaped buttons and large diffused shadows. |
styles/glass | Glassmorphism: a soft pastel mesh backdrop seen through frosted, translucent and blurred surfaces. |
styles/corporate | Enterprise and dense: sharp 2px corners, a confident blue, neutral grays, bottom-lined inputs and clear focus states. |
styles/playful | Bubbly and vivid: rounded type, chunky 2px outlines, pill buttons with a pressable 3D lip and candy colors. |
styles/editorial | Magazine and print: Fraunces serif headings over clean sans-serif text, paper tones, hairline rules, small-caps labels and a single ink-red accent. |
styles/terminal | Retro command line: monospace everything, phosphor green on near-black, square corners, glowing text and prompt markers. |
Each style skill describes the mood, typography, color, shape, how the components look, and a do/don't list, like a short design brief. Ask your assistant for "a pricing page in the editorial style", and it knows what that means.
Copy the skills into your project's .claude/skills folder (or ~/.claude/skills to use them in every project):
mkdir -p .claude/skills
cp -r node_modules/sprucecss/skills/sprucecss node_modules/sprucecss/skills/sprucecss-library node_modules/sprucecss/skills/sprucecss-styles node_modules/sprucecss/skills/sprucecss-spacing node_modules/sprucecss/skills/sprucecss-list-layout node_modules/sprucecss/skills/sprucecss-blocks node_modules/sprucecss/skills/sprucecss-block-rhythm .claude/skills/
cp -r node_modules/sprucecss/skills/styles/editorial .claude/skills/sprucecss-style-editorialClaude Code loads a skill automatically when your request matches its description (for example, when you edit a file that uses Spruce CSS or ask for a brutalist landing page). You can also call it by name.
The skills are plain Markdown with a small front matter, so any assistant can use them:
- Cursor: save the content as a rule in
.cursor/rules/. - GitHub Copilot: add it to
.github/copilot-instructions.md. - Codex, Gemini CLI and other agents: reference or paste it in
AGENTS.md.
- "Create a settings page with Spruce CSS: a sidebar navigation, a form with switches and a danger zone."
- "Build a new Spruce block for a newsletter sign-up with a benefits list."
- "Turn this hero section into the glass style and make sure it works in dark mode."
- "Create a new Spruce style preset called
sunsetwith warm colors and serif headings." - "Refactor this component to use the Spruce tokens instead of hardcoded values."
Building a design system on top of Spruce? Write a skill for it, too. A good skill:
- starts with a front matter that has a
nameand adescriptionsaying when to use it; - lists the rules the assistant must follow (tokens over hardcoded values, BEM naming, logical properties, accessibility);
- shows the markup and a typical component;
- stays short: link to the documentation for the details.
Look at the Spruce skills on GitHub for a starting point.
This site also publishes an llms.txt file: a machine-readable index of the documentation for tools that read the web.
