Theme Tokens
Define a design system as Tailwind v4 @theme tokens (color, type scale, spacing, radius, shadow) with intentional light + dark themes. Use when setting up a project's visual system or making theming consistent.
Install
$ agentstack add skill-m-binimran-dev-pack-theme-tokens ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
theme-tokens
A real token system makes every component consistent and re-skinnable per client. Tailwind v4 is CSS-first.
Process
- Define tokens in CSS with Tailwind v4
@theme:
``css @theme { --color-brand: oklch(0.62 0.19 256); --color-surface: oklch(0.98 0 0); --font-display: "…", serif; --font-body: "…", sans-serif; --radius: 0.75rem; } ``
- Scale, don't hardcode: a type scale (e.g. fluid
clamp()steps), a spacing rhythm, 2–3 radii, a small
shadow set. Components reference tokens, never raw hex/px.
- Themes are intentional: if you support dark, design it — don't auto-invert. Define dark token overrides
under a .dark / [data-theme=dark] scope. Don't default to dark mode unless the product wants it.
- Semantic aliases: map raw scales to roles (
--color-success,--color-danger,--color-muted) so
components read by meaning.
Output
- The
@themetoken block, the semantic aliases, and the dark overrides (if any). - A note: which tokens are brand-specific (swap per client) vs. structural.
Guardrails
- No raw hex/px in components once tokens exist — reference the token.
- Light and dark must each feel intentional (anti-template policy), not one auto-generated from the other.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: m-binimran
- Source: m-binimran/dev-pack
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.