skills.rest
radioactive-labs
radioactive-labsOFFICIAL
Explore all skills by this author →
GitHub

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

68|10|Updated Jan 10, 2024
Search Tags:#theming#ui#css#dark-mode#design-tokens#component-classes
One-click install
npx skills add https://github.com/radioactive-labs/plutonium-core --skill plutonium-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plutonium-theming
Source: https://github.com/radioactive-labs/plutonium-core/tree/main/.claude/skills/plutonium-theming
Command: npx skills add https://github.com/radioactive-labs/plutonium-core --skill plutonium-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plutonium theming provides a centralized CSS design token system and ready-to-use component classes to ensure consistent UI styling across projects, including light and dark modes.

Core Features & Use Cases

  • Design tokens: CSS custom properties defined in src/css/tokens.css for surfaces, text, borders, forms, cards, shadows, radii, spacing, and transitions.
  • Component classes: Prebuilt styling in src/css/components.css for buttons, inputs, labels, cards, panels, tables, and more.
  • Dark mode & theming: Tokens automatically switch with a .dark class; easy customization via overriding tokens in app/assets/stylesheets.
  • Migration & customization: Guidance to migrate hardcoded styles to token-based tokens and override tokens in application.tailwind.css.

Quick Start

Use the design tokens to theme a UI by importing the tokens and applying token-based classes to components.

Frequently Asked Questions about plutonium-theming

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

FAQPage Schema
How do I implement a CSS design token system for consistent UI theming?▼

To implement a CSS design token system, you import centralized custom properties for surfaces, text, borders, and spacing, then apply prebuilt component classes. This standardizes UI styling across web projects.

How do I add dark mode to a web application using CSS custom properties?▼

Dark mode is added by applying a .dark class to trigger automatic token switching. CSS custom properties defined in tokens.css update surface, text, and shadow values to render dark themes.

Can I override CSS design tokens in my application stylesheets?▼

Yes, you can override CSS design tokens by redefining custom properties in your application stylesheets like application.tailwind.css. This allows easy customization without modifying the core tokens.css file.

What is the best way to migrate hardcoded CSS styles to a token-based theming system?▼

Migrating hardcoded CSS to token-based theming involves replacing direct values with prebuilt component classes and centralized custom properties. Guidance is provided to transition styles using tokens defined in tokens.css.

Does Plutonium theming work without external CSS framework dependencies?▼

Plutonium theming works without external dependencies, relying entirely on standard CSS custom properties. It provides ready-to-use classes in components.css to style buttons, inputs, and cards independently.

Related Skills

Explore More Design & Creative Skills→
GatsbyhateyouGatsbyhateyou

retro-css-architecture

Organize CSS for 8-bit components with custom properties and pixel fonts.

Community
Basic
spencerpaulyspencerpauly
672

converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

styling-with-tailwind

Style user interfaces with Tailwind CSS utility classes and responsive breakpoints.

Community
Intermediate
gouravsingh311gouravsingh311

tailwind-v4

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

Community
Advanced