Quieto Skills

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

Available Skills

| Skill | Command | What it does | |---|---|---| | design-token-init | /design-token-init | Scaffold a new token system interactively | | design-token-audit | /design-token-audit | Health-check: orphans, broken refs, naming, WCAG contrast | | design-token-migrate | /design-token-migrate | Scan stylesheets for hardcoded values and replace with tokens | | design-token-component | /design-token-component | Generate tier-3 component tokens (button, card, etc.) | | design-token-category-add | /design-token-category-add | Add shadow, border, or animation categories | | design-token-contrast | /design-token-contrast | Ad-hoc or system-wide WCAG contrast checking | | design-token-update | /design-token-update | Modify inputs (brand color, spacing, etc.) with diff preview |

Installation

npx (recommended)

npx @quieto/skills install

This installs all skills into .claude/skills/ in your current directory. You can also specify a target directory:

npx @quieto/skills install /path/to/your/project

Manual

Copy the skill directories into your project's .claude/skills/ directory:

cp -r design-token-* /path/to/your/project/.claude/skills/

As a git subtree

git subtree add --prefix=.claude/skills/quieto-skills \
  [email protected]:dillonschultz93/quieto-skills.git main --squash

Prerequisites

These skills require @quieto/tokens to be installed in the target project:

npm install @quieto/tokens

License

MIT