design-tokens
Design Tokens
Overview
Use this skill to replace hardcoded visual values with a governed token model that scales across teams and platforms.
Scope Boundaries
- Use this skill when the task matches the trigger condition described in
description. - Do not use this skill when the primary task falls outside this skill's domain.
Shared References
- Naming rules and anti-patterns:
references/token-naming-rules.md
- Versioning and deprecation decision rules:
references/token-versioning-policy.md
- Accessibility and localization checks:
references/token-accessibility-and-localization-checks.md
Templates And Assets
- Token taxonomy starter:
assets/token-taxonomy-template.json
- Legacy-to-token mapping sheet:
assets/token-mapping-template.csv
- Component token example set:
assets/component-token-example.json
- Deprecation decision record:
assets/token-deprecation-plan-template.md
- Rollout execution checklist:
assets/token-rollout-checklist.md
Inputs To Gather
- Brand rules and product-level visual requirements.
- Current hardcoded values and style drift hotspots.
- Platform targets, theming needs, and implementation constraints.
- Accessibility requirements and localization-sensitive typography rules.
Deliverables
- Token taxonomy and naming conventions (core, semantic, component-level).
- Token mapping plan from raw values to semantic tokens.
- Versioning/deprecation policy with migration guidance.
- Adoption checklist for design and engineering teams.
Quick Example
- Core token:
color.blue.600. - Semantic token:
color.action.primary.default. - Component token:
button.primary.background.default. - Rule: components consume semantic/component tokens only, never raw core values directly.
Quality Standard
- Naming reflects intent, not specific component or hex value.
- Token layering prevents direct coupling between components and raw primitives.
- Accessibility-critical token sets pass contrast and state visibility requirements.
- Token changes include migration impact and rollout sequence.
Workflow
- Define token layers and scope boundaries using
assets/token-taxonomy-template.json. - Map existing raw values to semantic tokens with
assets/token-mapping-template.csv. - Add component-level aliases only where needed for stability, referencing
assets/component-token-example.json. - Establish version/deprecation workflow using
references/token-versioning-policy.mdandassets/token-deprecation-plan-template.md. - Validate coverage with
references/token-accessibility-and-localization-checks.mdand completeassets/token-rollout-checklist.md.
Failure Conditions
- Stop when token design allows uncontrolled one-off exceptions.
- Stop when naming ties tokens to unstable implementation details.
- Escalate when token changes break accessibility without mitigation.
More from kentoshimizu/sw-agent-skills
graph-algorithms
Graph algorithm workflow for modeling entities/relations and selecting traversal, path, ordering, or flow strategies. Use when correctness or performance depends on graph representation and algorithm choice; do not use for schema-only modeling or deployment topology planning.
14bash-style-guide
Style, review, and refactoring standards for Bash shell scripting. Trigger when `.sh` files, files with `#!/usr/bin/env bash` or `#!/bin/bash`, or CI workflow blocks with `shell: bash` are created, modified, or reviewed and Bash-specific quality controls (quoting safety, error handling, portability, readability) must be enforced. Do not use for generic POSIX `sh`, PowerShell, or language-specific application style rules. In multi-language pull requests, run together with other applicable `*-style-guide` skills.
11architecture-clean-architecture
Clean Architecture workflow for enforcing dependency direction, stable domain boundaries, and use-case-centered application design. Use when teams must separate business rules from frameworks and delivery mechanisms; do not use for isolated module cleanup without boundary implications.
11powershell-style-guide
Style, review, and refactoring standards for PowerShell scripting. Trigger when `.ps1`, `.psm1`, `.psd1` files, or CI workflow blocks with `shell: pwsh` or `shell: powershell` are created, modified, or reviewed and PowerShell-specific quality controls (error handling, parameter validation, readability, operational safety) must be enforced. Do not use for Bash, generic POSIX `sh`, or language-specific application style rules. In multi-language pull requests, run together with other applicable `*-style-guide` skills.
10github-codeowners-management
Govern CODEOWNERS rules so review routing reflects real ownership and risk boundaries on GitHub. Use when repository ownership mapping or mandatory reviewer rules must be defined, updated, or audited; do not use for non-GitHub runtime architecture or data-layer design.
9security-authentication
Security workflow for authentication architecture, credential lifecycle, and session/token assurance. Use when login, identity proofing, MFA, or session security decisions are required; do not use for authorization policy design or non-security quality tuning.
9