skills.rest
Probably-Group
Probably-GroupOFFICIAL
Explore all skills by this author →
Website𝕏@problynotingGitHub

design-systems

Creates token-based, WCAG-ready Vanilla Script designs with Radix primitives and Style Dictionary semantic references.

3|1|Updated Dec 3, 2025
Search Tags:#theming#accessibility#dark-mode#design-tokens#design-systems#vanilla-extract#security-csp
One-click install
npx skills add https://github.com/Probably-Group/Dev-AID --skill design-systems-probably-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/Probably-Group/Dev-AID/tree/main/.dev-aid/skills/expert/design-systems
Command: npx skills add https://github.com/Probably-Group/Dev-AID --skill design-systems-probably-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents design-system drift and insecure styling by enforcing token-based theming, safe CSS practices, and accessible, cross-platform component patterns.

Core Features & Use Cases

  • Token-based architecture for structured, type-safe design tokens using Style Dictionary and semantic layers that reference core tokens.
  • Secure theming and styling rules that block CSS injection risks, support strict CSP, and validate tokens at build time.
  • Type-safe component variant APIs using Vanilla Extract recipes (instead of stringly-typed classnames), including dark mode via theme contracts and CSS custom properties.
  • Accessible component defaults (WCAG 2.1 AA) and Radix-based accessible primitives to ensure keyboard navigation and interaction correctness.
  • Responsive spacing and layout utilities through consistent token scales and sprinkles-like utilities, avoiding magic numbers and non-responsive styles.

Quick Start

Use the design-systems skill when you are defining a new design system’s tokens and component API so the output follows secure theming, typed variants, and WCAG-ready styling.

Frequently Asked Questions about design-systems

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement dark mode switching with design tokens and CSP-friendly CSS?▼

Dark mode switching uses theme contracts and CSS custom properties mapped through typed design tokens, ensuring strict CSP compliance by blocking user-input CSS interpolation and validating tokens at build time.

What's the best way to build type-safe component variants with Vanilla Extract?▼

Type-safe component variants are built using Vanilla Extract recipes instead of stringly-typed classnames, applying consistent variant and component patterns structured by semantic token layers.

How do design tokens prevent design-system drift across a UI codebase?▼

Design tokens prevent drift by applying a structured architecture using Style Dictionary with semantic layers referencing core tokens, standardizing responsive spacing scales and typed component styling rules.

Does this design system approach support WCAG 2.1 AA accessibility requirements?▼

Accessible component defaults meet WCAG 2.1 AA standards by integrating Radix-based accessible primitives, ensuring correct keyboard navigation and interaction correctness across cross-platform component patterns.

Why does secure theming block CSS injection risks during design system implementation?▼

Secure theming blocks CSS injection by enforcing strict CSP-friendly styling rules that prohibit user-input CSS interpolation, validating all tokens at build time to prevent insecure styling practices.

Can I use Radix primitives with token-based theming for accessible UI components?▼

Radix-based accessible primitives integrate directly with token-based theming to ensure keyboard navigation and interaction correctness while maintaining WCAG 2.1 AA defaults and typed variant APIs.

Related Skills

Explore More Design & Creative Skills→
mgd34msumgd34msu
4

vanilla-extract

Implement zero-runtime CSS-in-TypeScript with static extraction at build time.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

design-token-system

Architect W3C-DTCG design-token systems with Style Dictionary for multi-platform exports.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
levanminhduclevanminhduc

tailwindcss

Generate Tailwind CSS utility classes and theme configurations for web frameworks.

Community
Intermediate