design-system-ops
FeaturedClaude Code skills for the work that keeps a design system alive
Install
Plugins install via a marketplace, in two steps.
This plugin isn't listed in a marketplace we've indexed. Install it directly from its GitHub repository — the README has the setup steps.
View on GitHubBundles
Everything this plugin ships — skills, agents, commands, hooks, and MCP servers it bundles.
Skills (39)
accessibility-per-component
Audit one design system component's accessibility against WCAG 2.2 AA: keyboard, screen reader, contrast, focus, ARIA, target size. Trigger: a11y audit, is this accessible, WCAG check, screen reader support, keyboard navigation check. Not for page- or product-wide audits.
adoption-report
Adoption report: coverage (what the system provides), reach (teams with access) and adoption (teams shipping with it), design vs engineering, trend and at-risk teams. Triggers: adoption report, usage metrics, which teams use the system. Not docs coverage — use docs-coverage.
ai-component-description
Write a six-section prose description (purpose, props, anti-patterns, composition, accessibility, examples) for a Figma component's description field so LLMs read it via MCP. Triggers: describe this component for AI, Figma MCP description. JSON metadata files: use metadata-schema-generator.
backlog-generator
Turn existing audit findings into sprint-ready tickets with T-shirt estimates, acceptance criteria, dependencies and phases. Triggers: tickets from audit, backlog from findings, sprint planning from report. Not for the contribution process (contribution-workflow) or which skill to run (triage).
change-communication
Write release notes, a migration guide and a team announcement for a design system change that is already decided, scaled to its impact. Triggers: release notes, announce this change, tell teams about a breaking change. Semver call: version-bump-advisor. Deprecation plan: deprecation-process.
cicd-integration
Generate CI pipeline files and check scripts (GitHub Actions, GitLab, CircleCI, Bitbucket) that automate design system checks: token validation, hardcoded values, a11y scans, visual regression, bundle size. Trigger: set up CI, quality gates, automate these checks. Not for running an audit.
codebase-index
Generate machine-readable index files in .ai/index/ (component inventory, uses/usedBy graph, stats) for AI agents. Triggers: index my codebase, build a relationship graph, what depends on what. Not an assessment; for library health use component-audit.
codemod-generator
Generate tested jscodeshift/postcss codemods for design system migrations: token renames, prop renames or removals, import paths, component swaps. Triggers: codemod, migration script, rename this prop everywhere. Deprecation planning: deprecation-process. Release notes: change-communication.
component-api-validator
Audit prop APIs across a component library: naming consistency, boolean/default patterns, type coverage, exported types, breaking changes between versions. Trigger: component API audit, are our props consistent, prop naming review. For semver calls use version-bump-advisor.
component-audit
Deep audit of a component library: inventory, usage, duplication, complexity, coverage gaps. Triggers: audit my components, unused components, what components do I have, assess my library. Not for a whole-system view (system-health) or AI index files (codebase-index).
component-decision-tree
Build YAML decision trees (.ai/decision-trees/) that route an intent to the right component via narrowing questions. Triggers: which component should I use, choose between X and Y, modal vs dialog, selection guide. Guidance for one chosen component: use usage-guidelines.
context-engine-builder
Generate context-engine blueprint YAML in .ai/context-engine/ (UX, UI, content, a11y, ethical, technical, business) that agents load. Triggers: build a context engine, seven blueprints. Component inventory/dependency graph: codebase-index. Health assessment: system-health.
Show all 39 bundled skills Showing all 39 bundled skills
contribution-workflow
Design or document how new work enters a design system: contribution types, proposal criteria, review stages, sign-off and release. Triggers: contribution process, how should someone contribute, contribution guidelines, adding a new component. Not for audit findings to tickets (backlog-generator).
decision-record
Write a narrative decision record (ADR) for a design system choice: context, options, trade-offs, consequences, including declined proposals. Triggers: document this decision, ADR, why did we choose, capture the reasoning. Machine-checkable rules: governance-encoder.
deprecation-process
Plan a deprecation end to end for a component, token, variant or pattern: usage audit, migration path, timeline to a major-version removal, notices. Triggers: deprecate, sunset, phase out, retire, remove, replace X with Y. Announcing non-deprecation changes: change-communication.
design-to-code-check
Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap. Use it whenever someone asks if something matches its design or spec, even one component with the spec pasted in. System-wide drift: drift-detection.
designer-onboarding
Onboarding guide for a designer joining a team that uses the design system: Figma library setup, how we work, gaps and contributing, first two weeks. Triggers: onboard new designer, designer getting started guide. For engineers use engineering-onboarding.
docs-coverage
Audit whether docs keep pace with components: undocumented components, stale docs, orphaned pages, with join confidence. Triggers: docs coverage, which components are undocumented, stale docs check. Not for writing docs (usage-guidelines) or doc analytics (adoption-report).
drift-detection
System-wide sweep for divergence: local re-implementations, token overrides, forked patterns, classified by cause. Triggers: find drift, where are teams going off-system, what's out of sync. Not for one component vs its spec (design-to-code-check).
engineering-onboarding
Onboarding guide for an engineer consuming the design system: install, imports, tokens, testing, escalation, first two weeks. Triggers: onboard new engineer, developer getting started guide, frontend onboarding. For designers use designer-onboarding.
figma-variable-audit
Audit Figma variable collections: tier mapping, naming, alias chains, modes, orphans; can fix in place with Figma Console MCP. Triggers: audit my Figma variables, review variable collections, Figma variable health. For token files in code use token-audit.
governance-encoder
Turn written design system governance into machine-checkable JSON rules in .ai/governance/ for agents, linters and CI. Triggers: governance as code, encode rules, rule engine, enforce automatically. Explaining why a decision was made: decision-record. CI pipeline files: cicd-integration.
metadata-schema-generator
Generate per-component JSON metadata files (.ai/metadata/) from source: props, behaviour, composition, a11y contract, prohibited prop combinations. Triggers: component metadata schema, machine-readable component JSON, manifest for MCP/codegen. Prose for Figma: use ai-component-description.
naming-audit
Audit naming consistency and clarity across component, token and pattern names, with rename suggestions. Triggers: naming review, are my names consistent, fix our naming. For token tier structure use token-audit; for Figma variable names use figma-variable-audit.
pattern-documentation
Document a multi-component pattern (form validation, empty states, error handling): when to use, composition, states, a11y, anti-patterns. Triggers: document this pattern, write the pattern page. One named component: use usage-guidelines. Choosing a component: component-decision-tree.
release-retrospective
Review how a shipped release, migration or deprecation went against its plan: blast radius, comms, migration, timeline, support load, each gap classed. Triggers: release retro, post-mortem, how did the deprecation go. Planning a new deprecation: deprecation-process.
schema-validator
Validate token files structurally against DTCG 2025.10, Style Dictionary v3/v4 or Tokens Studio: parse errors, $type/$value, broken or circular aliases. Trigger: validate token JSON, DTCG compliance, are my token files valid. Do NOT use for naming or architecture — token-audit.
session-memory
Save, recall, compare or cross-reference Design System Ops findings across runs in .ds-ops/sessions/. Triggers: save these findings, what did we find last time, compare with last run, what changed since. Not for producing a new audit (run that skill) or a full sweep (full-diagnostic).
stakeholder-brief
Turns design system status or a recommendation into a one-page brief in business language. Use it whenever someone wants an update, summary or note on the system for a VP, exec or stakeholder, however short. Investment case: system-pitch. Charts: visual-report.
system-benchmark
Benchmark a design system against named public systems (Material, Carbon, Polaris, GOV.UK) and maturity profiles. Triggers: benchmark our system, how do we compare, are we behind or ahead. Not for an internal health check (system-health).
system-health
Holistic health check across tokens, components, docs, adoption, governance, AI readiness, platform maturity, with status labels. Triggers: how healthy is my system, system health check, big picture. Not for one area (use its audit) or external comparison (system-benchmark).
system-pitch
Investment pitch for a new or continuing design system: cost of current state, ROI with visible assumptions, objections, the ask. Triggers: pitch the system, business case, justify the investment, sell this to leadership. For a routine status update use stakeholder-brief.
theme-audit
Audit theme parity: tokens missing or unchanged per theme, component tokens bypassing semantics, contrast within each theme, resolver modes, theme-switch regressions. Triggers: dark mode audit, theme coverage, brand variant parity. For general token structure use token-audit.
token-audit
Audit how design tokens are defined: tiers, naming, alias chains, raw values, orphans, DTCG readiness. Triggers: audit my tokens, token architecture review, token health check. Not for code consuming tokens (token-compliance), theme parity (theme-audit) or Figma variables (figma-variable-audit).
token-documentation
Write reference docs for existing design tokens: semantic intent, use/do-not-use, references, used-by, theming contract, misuse list. Triggers: document our tokens, token reference, what is this token for. Token structure/architecture audit: use token-audit; file validation: schema-validator.
triage
Pick which 3-5 Design System Ops skills to run first, in order, from a quick look at the system. Triggers: where should I start, what should I run first, which audit first, new to this plugin. Not for prioritising audit findings into work (backlog-generator).
usage-guidelines
Write usage guidelines for one named component: when to use, when not to, edge cases, anti-patterns, a11y, quick-reference card. Triggers: usage guidelines for X, do's and don'ts for X. Choosing between components: component-decision-tree. Multi-component patterns: pattern-documentation.
version-bump-advisor
Decide the semver bump (major, minor or patch) for a design system release from a diff or change list, with reasoning and a CHANGELOG entry. Triggers: what version bump, is this breaking, major or minor. Release notes and announcements: change-communication. Migration scripts: codemod-generator.
visual-report
Turns existing audit, health or session-memory output into an HTML dashboard, SVG charts or Mermaid diagrams. Triggers: visualise the findings, dashboard, chart, graph the trends. Does not run audits (run one first); for a written brief use stakeholder-brief.
Commands (14)
Quality Score: 86/100
Details
- Author
- murphytrueman
- Repository
- murphytrueman/design-system-ops
- Created
- 6 months ago
- Last Updated
- 2 days ago
- Language
- Python
- License
- MIT