Design Systems, Tokens & Vanilla CSS Architecture

What it does

Design Systems, Tokens & Vanilla CSS Architecture is a Cursor skill: a SKILL.md playbook that AgenticKit installs at .cursor/skills/design-systems. Cursor's agent loads it when the task matches the skill description, instead of stuffing the same rules into every chat.

Creating lightweight, premium design systems with Vanilla CSS, CSS Custom Properties, semantic color scales, and accessibility compliance.

CSS variables, fluid typography, dark mode tokens, and responsive layout grids. The file is domain knowledge, not a slash macro. You do not type it. The agent reads it when the job is design systems.

Why it exists

Default Cursor has no memory of how your team ships code, schema, and tests. Founders paste the same conventions into chat, then watch the model drift on the next turn. This skill exists so those conventions live on disk and load only when relevant.

It ships in the Engineering Kit. It is wired to the Design Systems & UI Specialist (design-engineer) and React 19 & Next.js Specialist (react-specialist) agents. It is wired to the /build-page: UI Page & Responsive Component Builder and /landing-page: High-Converting Landing Page Copy Architect commands. That graph is the point: the skill is the standard, the agent is the role, the command is the trigger.

When to use it

• Use Design Systems, Tokens & Vanilla CSS Architecture when the work is specifically about css variables, fluid typography, dark mode tokens, and responsive layout grids.
• Load it before a long session that will touch this surface more than once. A one-line edit does not need the full playbook.
• Use it on production SaaS work (multi-tenant apps, paid features, anything that will be reviewed) rather than a throwaway prototype.

When not to use it

• Do not treat the skill as a replacement for a slash command. Skills teach. Commands run a pipeline.
• Do not paste the whole SKILL.md into chat. If Cursor is not loading it, fix the description or invoke the matching command.
• Do not use it as a generic 'write better code' rule. Scope is this domain only.

Example workflow

1. Install the Engineering Kit so .cursor/skills/design-systems lands in the repo.
2. Open a new Cursor agent chat pointed at the files this skill governs.
3. Ask the Design Systems & UI Specialist (design-engineer) to read the skill, or run /build-page: UI Page & Responsive Component Builder.
4. Review the first artifact against the practices below. If it violates one, stop and correct the file. Do not prompt 'just finish it'.
5. Commit the skill-guided files with the rest of the slice so the next session inherits the same standard.

Example usage

Example prompt: "Read .cursor/skills/design-systems and apply it to this change. Do not invent extra conventions."

Or trigger the pipeline: /build-page: UI Page & Responsive Component Builder. That command is written to load this skill.

Check the output against: Define all colors, spacing, and typography as CSS custom properties in :root

Example output

• The skill itself does not write a single output file. It changes what the agent is allowed to produce in code, schema, and tests.
• When you run /build-page: UI Page & Responsive Component Builder, expect repo files plus notes under docs/, not a chat-only answer.

Best practices

• Define all colors, spacing, and typography as CSS custom properties in :root
• Use clamp() for fluid, responsive typography without breaking breakpoints
• Ensure color contrast ratios meet WCAG 2.1 AA standards (4.5:1 for body text)
• Build modular component classes with clear utility abstractions

Common mistakes

• Ignoring "Define all colors, spacing, and typography as CSS custom properties in :root" and hoping a later prompt will clean it up.
• Copying the skill into .cursor/rules as always-on. That burns context and fights Cursor's load-on-match design.
• Running two overlapping skills that contradict each other in the same turn.
• Letting the agent skip tests or types because 'the skill is about architecture'.