Design token category add

Skill dillonschultz93/quieto-skills/design-token-category-add

Agentic agent skills for the Quieto Tokens design token CLI. Each skill wraps a CLI command into a conversational workflow invocable via slash command.

Install

npx -y skills add dillonschultz93/quieto-skills --skill design-token-category-add

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Add a new token category (shadow, border, or animation) to an existing token system. Prompts for category-specific inputs and generates the token files. Use when the user wants to extend their token system beyond color, spacing, and typography.

SKILL.md

2.8 KB, as published. Nobody here has run it

Design Token Category Add

You are helping the user extend their token system with additional categories.

Prerequisites

Verify a token system exists:

ls quieto.config.json tokens/

If not found, tell the user to run /design-token-init first.

Check which categories are already configured:

cat quieto.config.json | grep -A 5 '"categories"'

The core categories (color, spacing, typography) are always present after init. The addable categories are:

shadow — elevation/depth tokens (box-shadow)
border — width and radius tokens
animation — duration and easing tokens

Workflow

1. Determine which category to add

If the user specified one, confirm it. If not, ask which they'd like. Explain what each provides:

Shadow: generates elevation levels (1-6) with configurable color reference, blur/spread profile (soft or hard). Produces box-shadow composite tokens.
Border: generates width steps and radius steps with an optional pill (9999px) marker. Produces dimension tokens for border-width and border-radius.
Animation: generates duration steps and an easing curve preset (standard, emphasized, or decelerated). Produces duration and cubicBezier tokens.

2. Run the add command

The CLI is interactive for category-specific inputs. Tell the user to run it:

! npx quieto-tokens add <category>

For example:

! npx quieto-tokens add shadow

Or without specifying a category (the CLI will present a menu):

! npx quieto-tokens add

Use --dry-run to preview:

! npx quieto-tokens add shadow --dry-run

3. Category-specific inputs

Shadow will ask for:

Number of elevation levels (2-6)
Shadow color reference (a DTCG ref like {color.neutral.900})
Profile: soft (airy, larger blur) or hard (crisp, tight blur)

Border will ask for:

Width steps (pixel values, e.g., 1, 2, 4)
Radius steps (pixel values, e.g., 2, 4, 8, 16)
Whether to include a pill radius (9999px for fully rounded elements)

Animation will ask for:

Duration steps (milliseconds, e.g., 100, 200, 300, 500)
Easing preset: standard, emphasized, or decelerated

4. Verify output

Check the new token files and updated config:

ls tokens/primitive/
cat quieto.config.json | grep -A 5 '"categories"'

5. Suggest follow-ups

Run /design-token-audit to verify the new tokens are healthy
Use /design-token-component to wire the new category into component tokens
Add another category if needed