skills.rest
Seth-arc
Seth-arcCOMMUNITY
Explore all skills by this author →
Website𝕏@OfficialsethuGitHub

design-system-tokens

Define CSS custom properties for Myelin platform UI components and themes.

1|Updated Mar 13, 2026
Search Tags:#theming#accessibility#frontend#design system#css#tokens#ui components
One-click install
npx skills add https://github.com/Seth-arc/myelin-platform --skill design-system-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-tokens
Source: https://github.com/Seth-arc/myelin-platform/tree/main/primary_build_source/docs/skills/2/mnt/user-data/outputs/design-system-tokens
Command: npx skills add https://github.com/Seth-arc/myelin-platform --skill design-system-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all UI components, layouts, and frontend code adhere to the Myelin platform's established design system, preventing hardcoded values and maintaining visual consistency.

Core Features & Use Cases

  • Tokenized Design Variables: Provides CSS custom properties for colors, spacing, typography, radii, and motion.
  • Component Library Rules: Defines styles for common UI elements like buttons, cards, inputs, badges, and progress indicators.
  • Theming: Supports dark and light themes with specific overrides.
  • Routing Conventions: Outlines the standard URL structure for application sections.
  • Accessibility Baseline: Mandates WCAG 2.2 AA compliance.
  • Responsive Behavior: Defines breakpoints and responsive strategies.
  • Prototype Inconsistency Fixes: Addresses known issues from previous prototypes.
  • Use Case: When building a new learner dashboard page, use this Skill to ensure all colors, spacing, and component styles (like buttons and cards) are applied using the defined tokens and rules, guaranteeing a consistent look and feel with the rest of the platform.

Quick Start

Apply the design system tokens to ensure all frontend code adheres to the Myelin platform's visual contract.

Frequently Asked Questions about design-system-tokens

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

FAQPage Schema
How do I enforce design system tokens for UI components in a frontend application?▼

You enforce design system tokens by utilizing CSS custom properties to define visual variables for colors, spacing, and typography, ensuring UI components like buttons and cards adhere to a consistent frontend contract.

What's the best way to implement dark and light theming using CSS custom properties?▼

Implement dark and light theming using CSS custom properties by defining tokenized design variables with specific theme overrides, allowing the UI to switch visual schemes while maintaining accessibility baselines.

How does a tokenized design system prevent hardcoded values in frontend UI components?▼

A tokenized design system prevents hardcoded values by providing predefined CSS custom properties for styling UI elements like inputs and badges, enforcing a strict visual contract across all application surfaces.

Does this design system approach support WCAG 2.2 AA accessibility compliance for frontend layouts?▼

Yes, the design system approach supports WCAG 2.2 AA accessibility compliance by mandating accessibility baselines within its tokenized design variables and component library rules for frontend development.

How do I fix known prototype inconsistencies in UI component styling?▼

Fix known prototype inconsistencies in UI component styling by applying a standardized design language that provides specific fixes and enforces routing conventions and responsive behavior breakpoints.

Can I use these design tokens to style a new learner dashboard page?▼

Yes, you can use these design tokens to style a new learner dashboard page by applying the defined CSS custom properties for spacing, typography, and component styles to guarantee visual consistency.

Related Skills

Explore More Design & Creative Skills→
mokbhaimokbhai
1

astro-developer

Initialize and deploy Astro projects with Tailwind and islands architecture.

Community
Advanced
rbaumierrbaumier
4

frontend

Build responsive React UI components with accessibility and performance patterns.

Community
Advanced
louisbrulenaudetlouisbrulenaudet
18

review-ui

Audit React frontend applications for WCAG 2.2 AA compliance and Tailwind CSS theme consistency.

Community
Intermediate
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate