agentsclimarketplace

Css theming

Skill Amey-Thakur/AI-SKILLS/skills/css-styling/css-theming

Plug-and-play skills and prompts for every AI coding agent

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill css-theming

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 19 days oldThe repository was created 19 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build a custom-property token system with primitive and semantic tiers that supports runtime theme switching. Use when setting up design tokens, adding themes, or refactoring hardcoded colors.

SKILL.md

2.4 KB, as published. Nobody here has run it

CSS theming

A theme is a mapping from meaning to value. Components consume meaning ("surface", "accent"); themes redefine the values; nobody touches component CSS to restyle the product.

Method

  1. Two tiers of tokens. Primitives name values (--blue-600: #2563eb); semantics name roles (--color-accent: var(--blue-600)). Components use only semantic tokens. The primitive tier changes when the palette changes; the semantic tier changes when design language changes; components change for neither.
  2. Scope themes to an attribute on :root. :root { ... } holds the default; :root[data-theme="dark"] { --color-surface: ... } overrides only semantic values. Switching is one attribute flip, inheritable everywhere, no class sprawl.
  3. Name by role, not appearance. --color-danger, not --color-red: the danger color may not be red in every theme. Scale names (--space-1..8, --text-sm/base/lg) beat value names (--space-4px) because the scale can be retuned.
  4. Keep the semantic set small and complete. Surface, surface-raised, border, text (2-3 strengths), accent, danger/success/warning, focus ring. Every hardcoded hex in component CSS is a future theming bug; lint for raw color values outside the token files.
  5. Respect the user first paint. Apply the stored theme before CSS loads (inline script setting data-theme), default from prefers-color-scheme, and set the color-scheme property so form controls and scrollbars match. A white flash before dark mode is a token system applied too late.
  6. Derive sparingly with color functions. color-mix(in oklch, ...) and oklch() relative colors can generate hover states from base tokens, cutting token count; keep derivations in the token layer so components stay ignorant of the math.

Boundaries

  • Tokens do not enforce contrast; themes need their own accessibility pass (see color-contrast).
  • Per-component theme overrides (a dark card on a light page) work by re-scoping the semantic tokens on that subtree, not by forking the component's CSS.
  • Design-tool token sync (Figma variables to CSS) is a build pipeline concern; hand-editing generated token files breaks the loop.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.