Skip to content
Beta Multi-model support (OpenAI, Gemini, and more) launching soon.
RBA RBA Skills

design-system-manager

v0.1.0 ExperimentalNo security review by Dakota Smith

Install

Pick the surface you use. Plugins run inside Claude Code, which is available in the terminal CLI, the desktop app on Mac and Windows, the web app at claude.ai/code, and the VS Code and JetBrains extensions. The slash commands are identical on every surface.

From inside any Claude Code session — terminal, desktop app, web app, or IDE extension:

  1. Add the RBA Skills marketplace (only needed once per machine):

    /plugin marketplace add rbaconsulting/rba-skills-plugin

  2. Install design-system-manager:

    /plugin install design-system-manager@rba-ai-hub

  3. Activate it without restarting:

    /reload-plugins

Overview

Design System & Token Manager

A comprehensive design system and token management toolkit for RBA digital experience projects. Covers the full lifecycle from generating a DTCG-compliant three-tier token architecture to configuring Style Dictionary v4 transform pipelines, scaffolding new brand themes in a house-of-brands setup, and producing component documentation that design and engineering can share as a single source of truth.

Built for the RBA stack — Sitecore XM Cloud, Optimizely CMS, Umbraco, and headless/composable front-ends — with platform-specific adapters that map token outputs to each CMS's theming mechanisms.

What's in the bundle

Artifact Purpose
design-token-audit skill Audit an existing token set for DTCG spec compliance, naming convention violations, missing semantic tiers, and cross-platform readiness
design-token-generator skill Generate a complete three-tier (primitive → semantic → component) DTCG-compliant token architecture from a brand brief or Figma export
token-transform-pipeline skill Configure a Style Dictionary v4 pipeline to output CSS custom properties, SCSS, JS/TS modules, Tailwind config, iOS Swift, and Android Kotlin from a single token source
brand-theme-scaffolder skill Scaffold a new brand theme on top of a base token set for house-of-brands projects — produces override layers, resolved token maps, and a theme-switcher integration
component-doc-writer skill Generate production-ready component documentation: anatomy, props/API, states, variants, token callouts, accessibility requirements, and platform-specific usage notes
design-system-usage-guidelines skill Produce design system usage guidelines, do/don't examples, governance policy, contribution guide, and deprecation notices for an existing component or system section
ds-token-reviewer agent Subagent that reviews pull requests containing token file changes for naming violations, missing tiers, and breaking value changes
/ds-manager command One-shot entry point: orchestrate the token + doc workflow for a new component or brand

When to use this plugin

  • New project kickoff — establish a clean three-tier token architecture before any component is built.
  • Multi-brand / white-label projects — scaffold brand themes as thin override layers on a shared base so new brands ship faster and maintenance stays centralised.
  • Design system migrations — audit and restructure legacy token files (Figma Styles, hard-coded values, ad-hoc SCSS variables) into a DTCG-compliant structure before exporting to a transform pipeline.
  • CMS platform builds — generate CSS custom property outputs that map cleanly into Sitecore SXA site settings, Optimizely CMS theme bundles, or Umbraco's styling pipeline.
  • Component library documentation — produce consistent, complete component docs that satisfy both engineering (props, states, accessibility) and design (anatomy, token callouts, do/don't) audiences.
  • Design governance — define contribution guidelines, version policies, and deprecation paths to keep the system healthy over the project lifecycle.

Platform adapters

Skills in this bundle include platform-specific guidance for:

  • Sitecore XM Cloud / SXA — mapping CSS custom properties to SXA site settings; exporting token values to rendering parameters; Sitecore Headless theme integration.
  • Optimizely CMS — CSS token injection via resource bundles; integration with Optimizely's theme inheritance and block-level style overrides.
  • Umbraco — mapping tokens to Umbraco's built-in stylesheet pipeline; Block Editor component styling patterns.
  • Headless / composable — Next.js, Astro, and React — Tailwind config generation, CSS layer ordering, runtime theme switching via data-theme attributes.

Token architecture overview

This bundle enforces the industry-standard three-tier model aligned with the W3C DTCG specification (2025.10 stable release):

Tier 1 — Primitive tokens    core/color/blue-500: { $value: "#3b82f6", $type: "color" }
Tier 2 — Semantic tokens     semantic/color/action-primary: { $value: "{core.color.blue-500}", $type: "color" }
Tier 3 — Component tokens    component/button/background-default: { $value: "{semantic.color.action-primary}", $type: "color" }

Multi-brand themes override semantic tier only — primitives are shared, components inherit automatically.

How to install

claude plugin install design-system-manager@rba-ai-hub

After install, all six skills appear in /skills/browse/, the ds-token-reviewer agent is available for PR review workflows, and the /ds-manager command provides a guided entry point for new work.

Bundled artifacts

Skills

  • brand-theme-scaffolder — Scaffold a new brand theme on top of an existing base token set for house-of-brands and white-label DX projects. Produces a DTCG-compliant semantic override layer, a resolved token diff showing exactly what changes from the base, a theme-switcher integration snippet, and platform-specific injection instructions for Sitecore SXA, Optimizely, Umbraco, and headless front-ends. Keeps the primitive and component tiers untouched so maintenance stays centralised.
  • component-doc-writer — Generate production-ready component documentation covering anatomy, props/API table, interactive states, variants, design token callouts, accessibility requirements (WCAG 2.2 AA, ARIA patterns, keyboard interactions), and platform-specific usage notes for Sitecore SXA, Optimizely, Umbraco, and headless front-ends. Output is a structured Markdown file ready for Storybook, Supernova, zeroheight, or a Starlight-based design system site.
  • design-system-usage-guidelines — Produce design system governance documents: usage guidelines for a system section or specific component, contribution guide (how to propose changes, PR checklist, review process), version and deprecation policy, do/don't pattern library, and a design decision log (ADR-style). Works for both client-facing design system sites and internal RBA team governance. Adapts output for Starlight, Supernova, zeroheight, and plain Markdown wikis.
  • design-token-audit — Audit an existing design token set for W3C DTCG spec compliance, three-tier architecture completeness (primitive → semantic → component), naming convention violations, missing token types, unresolved aliases, and cross-platform export readiness. Produces a severity-ranked finding report and a prioritised remediation plan. Adapts output for Sitecore SXA, Optimizely CMS, Umbraco, Tailwind, and Style Dictionary v4 pipelines.
  • design-token-generator — Generate a complete, production-ready three-tier DTCG-compliant design token architecture (primitive → semantic → component) from a brand brief, Figma variables export, or design system specification. Outputs structured JSON files ready for a Style Dictionary v4 pipeline. Supports multi-brand house-of-brands setups with base + brand-override file separation. Adapts component coverage for Sitecore SXA, Optimizely, Umbraco, and headless front-ends.
  • token-transform-pipeline — Configure a Style Dictionary v4 build pipeline to transform DTCG-compliant token JSON into CSS custom properties, SCSS variables, JavaScript/TypeScript modules, Tailwind config, iOS Swift enums, and Android Kotlin objects — from a single token source. Supports multi-brand builds where each brand produces its own output set. Generates the full config file, build script, npm scripts, and README. Platform adapters for Sitecore SXA, Optimizely, Umbraco, and headless front-ends.

Agents

  • ds-token-reviewer — Subagent that reviews pull requests containing design token file changes. Checks for naming convention violations, missing $type declarations, unresolved aliases, tier-skipping (component aliasing primitive directly), breaking value changes, and WCAG colour contrast failures on changed action tokens. Posts a structured review comment with severity-ranked findings.

Slash Commands

  • /ds-manager — One-shot entry point for the Design System & Token Manager plugin. Detects what the user wants to do — generate tokens, audit tokens, scaffold a brand, configure a pipeline, write component docs, or produce governance docs — and routes to the appropriate skill with the right arguments. Provides a guided workflow for common multi-step tasks.
Technical details
Homepage
https://rba-skills.tylerschroeder.net/plugins/design-system-manager/
License
MIT
Maturity
experimental
Security review
No security review
Owners
  • design
  • engineering
Disciplines
design, engineering
Lifecycle
build
Tags
  • design-tokens
  • dtcg
  • w3c-design-tokens
  • style-dictionary
  • tokens-studio
  • figma-variables
  • multi-brand
  • house-of-brands
  • component-documentation
  • token-transform
  • css-custom-properties
  • scss-variables
  • tailwind
  • brand-theme
  • usage-guidelines
  • design-governance
  • tier-tokens
  • semantic-tokens
  • primitive-tokens
  • component-tokens
Last updated
by Tyler Schroeder
Source
plugins/design-system-manager/

Edit this plugin's README on GitHub — opens GitHub's web editor. No git knowledge needed.