Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

Começar

design-token-theming

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

Executar no Manus

Visão geral

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

Comando de instalação

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

Copie e cole este comando no Claude Code para instalar a skill

Fonte

ynotfins/open--claw

Estrelas0

Forks0

Atualizado30 de março de 2026 às 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.

Mais deste repositório

mesmo repositório

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

Fonte

ynotfins

ynotfins/open--claw

Abrir repositório GitHub Ver repositórios do creator

Comando de instalação

Download

Executar no Manus

Útil paraSOC

Designers de interfaces web e digitaisInformática e Matemática15-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.