skills.rest
PeakTai
PeakTaiCOMMUNITY
Explore all skills by this author →
GitHub

wok-ui-theme

Configure wok-ui theme colors and size tokens with runtime APIs.

Updated Sep 14, 2023
Search Tags:#theming#theme#color#variables#design-token#size#wok-ui
One-click install
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wok-ui-theme
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-theme
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

wok-ui's Theme module centralizes color and typography tokens, enabling consistent branding and faster UI theming.

Core Features & Use Cases

  • Central color variable management with setColor and resetColor
  • Size token control via setSize and resetSize
  • Runtime CSS variable updates that propagate across components
  • Use Case: quickly adapt the entire app's theme to match a brand refresh without code changes

Quick Start

Install and configure wok-ui-theme to apply your brand colors and typography across your app.

Frequently Asked Questions about wok-ui-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply a consistent color and size theme across wok-ui components?▼

Apply a consistent color and size theme across wok-ui components by using the centralized token system to configure variables that propagate via runtime CSS updates for uniform branding.

What is the best way to dynamically update design tokens during runtime in wok-ui?▼

The best way to dynamically update design tokens during runtime in wok-ui is to use the provided APIs like setColor and setSize, which trigger runtime CSS variable updates that automatically propagate across all active UI components.

How do I reset custom color and size variables back to default values in wok-ui?▼

Reset custom color and size variables back to default values in wok-ui by calling the resetColor and resetSize APIs, which clears your runtime overrides and restores the original baseline design tokens.

Can I adapt my entire app's UI theme to match a brand refresh without changing component code?▼

You can adapt your app's UI theme to match a brand refresh without changing component code by centrally managing color and size tokens, allowing global updates that instantly restyle all wok-ui components at runtime.

How do I retrieve the current color or size token values configured in wok-ui?▼

Retrieve the current color or size token values configured in wok-ui by calling the getColor and getSize APIs, which return the active design tokens currently applied to your application's UI components.

Does wok-ui support centralized typography and size management for consistent branding?▼

wok-ui supports centralized typography and size management for consistent branding through its theme module, which exposes token control APIs to set, reset, and get size variables alongside color configurations.

Related Skills

Explore More Design & Creative Skills→
fyndxfyndx
1

tamagui

Build React Native screens with Tamagui UI components and design tokens.

Official
Intermediate
screenpipescreenpipe
20.9k

brand-style

Enforce Screenpipe brand guidelines for typography, color, and voice.

Official
Basic
AutumnsGroveAutumnsGrove
5

chameleon-adapt

Adapt user interfaces with seasonal themes, glassmorphism, and nature components.

Community
Advanced
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced