Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

design-token-theming

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

In Manus ausführen

Überblick

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

Installationsbefehl

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

Kopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um den Skill zu installieren

Quelle

ynotfins/open--claw

Sterne0

Forks0

Aktualisiert30. März 2026 um 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.

Mehr aus diesem Repository

gleiches 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

Quelle

ynotfins

ynotfins/open--claw

GitHub-Repository öffnen Creator-Repositorys ansehen

Installationsbefehl

Download

In Manus ausführen

Nützlich fürSOC

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe15-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.