design-system-tokens
CommunityEnforce Myelin's design language.
AuthorSeth-arc
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-system-tokens Download link: https://github.com/Seth-arc/myelin-platform/archive/main.zip#design-system-tokens Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.