Run any Skill in Manus with one click

Get Started

design-token-theming

Design token and theming system for light, dark, and system modes with accessible, reusable UI primitives.

Run Skill in Manus

Overview

Design token and theming system for light, dark, and system modes with accessible, reusable UI primitives.

Install command

npx skills add https://github.com/ynotfins/open--claw --skill design-token-theming

Copy and paste this command into Claude Code to install the skill

Source

ynotfins/open--claw

Stars0

Forks0

UpdatedMarch 30, 2026 at 05:02

SKILL.md

readonly

name	design-token-theming
description	Design token and theming system for light, dark, and system modes with accessible, reusable UI primitives.
category	Development
roles	["ux-architect","ui-designer","frontend-developer","accessibility-auditor"]

Design Token Theming

Status: READY

Purpose

Define reusable colors, spacing, typography, and component states so interfaces stay consistent under iteration.

Standards

Use semantic tokens instead of hard-coded colors.
Support light, dark, and system mode.
Respect WCAG AA contrast and reduced-motion preferences.
Keep component states explicit: default, hover, focus, active, disabled, loading, empty, and error.

Workflow

Define color, spacing, typography, radius, and shadow tokens.
Map tokens to components and page patterns.
Verify contrast, focus visibility, and touch-target size.
Validate screenshots in light and dark contexts before approval.

Evidence

Token file or theme contract exists.
All primary UI surfaces work in light and dark mode.
Contrast and focus are verified in QA.

More from this repository

same repository

architecture-adr

ynotfins/open--claw

Architecture decision record workflow for design choices, trade-offs, rollback paths, and modular boundaries.

2026-03-300

code-review-gate

ynotfins/open--claw

High-signal review gate for correctness, security, maintainability, testing, and performance.

2026-03-300

handoff-state

ynotfins/open--claw

Shared operating pattern for documenting current state, evidence, blockers, and next actions between employees.

2026-03-300

mcp-integration

ynotfins/open--claw

Pattern for designing and validating MCP integrations with typed parameters, descriptive tools, and graceful failure handling.

2026-03-300

nextjs-app-router

ynotfins/open--claw

Production Next.js App Router workflow for modern websites and apps with metadata, server/client boundaries, and build verification.

2026-03-300

playwright-e2e

ynotfins/open--claw

Production-grade Playwright workflow for end-to-end testing with retries, traces, web-first assertions, and CI artifacts.

2026-03-300

Source

ynotfins

ynotfins/open--claw

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web and Digital Interface DesignersComputer and Mathematical Occupations15-1255L4

name	design-token-theming
description	Design token and theming system for light, dark, and system modes with accessible, reusable UI primitives.
category	Development
roles	["ux-architect","ui-designer","frontend-developer","accessibility-auditor"]

Design Token Theming

Status: READY

Purpose

Define reusable colors, spacing, typography, and component states so interfaces stay consistent under iteration.

Standards

Use semantic tokens instead of hard-coded colors.
Support light, dark, and system mode.
Respect WCAG AA contrast and reduced-motion preferences.
Keep component states explicit: default, hover, focus, active, disabled, loading, empty, and error.

Workflow

Define color, spacing, typography, radius, and shadow tokens.
Map tokens to components and page patterns.
Verify contrast, focus visibility, and touch-target size.
Validate screenshots in light and dark contexts before approval.

Evidence

Token file or theme contract exists.
All primary UI surfaces work in light and dark mode.
Contrast and focus are verified in QA.