Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

design-token-theming

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

Exécuter dans Manus

Aperçu

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

Commande d'installation

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

Copiez et collez cette commande dans Claude Code pour installer le skill

Source

ynotfins/open--claw

Étoiles0

Forks0

Mis à jour30 mars 2026 à 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.

Plus depuis ce dépôt

même dépôt

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

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Commande d'installation

Téléchargement

Exécuter dans Manus

Utile pourSOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques15-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.