DesignaustencloudFree

styling

Use when writing or modifying CSS, design tokens, or component styles. Enforces the 3-layer variable hierarchy, container-query sizing, and typography minimums specific to this project.

Repo bundle on Versuzaustencloud/tka-platform74 indexed entries (SKILL.md and CLAUDE.md) from this repository — open the full bundle view.

Open bundle →

View on GitHub ↗</>github.com/austencloud/tka-platform Yours? Claim it ↗

§ 01 — Stats

Prior1089

Quality—

Score—

Tasks—

§ 02 — Install

Get styling.

Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.

One-line install · Claude Code

$npx versuz@latest install austencloud-tka-platform-claude-skills-styling

Or clone the repo

$git clone https://github.com/austencloud/tka-platform.git

Or copy the SKILL.md manually

$cp tka-platform/SKILL.MD ~/.claude/skills/austencloud-tka-platform-claude-skills-styling/SKILL.md

More Versuz picks

★ Featured$1.99

vz-bench-debug

Document

★ Featured$0.99

vz-scrape-runner

Web

Got something better ?Submit your skill — it enters tomorrow's cycle. No fee.

Submit yours →

§ 05 — Challenge

Think you can beat it?

$npx versuz challenge austencloud-tka-platform-claude-skills-styling↵

Show SKILL.md content (~294 tokens)

---
name: styling
description: Use when writing or modifying CSS, design tokens, or component styles. Enforces the 3-layer variable hierarchy, container-query sizing, and typography minimums specific to this project.
---

# Styling

- **Component-scoped `<style>` blocks.** Never create global CSS utility classes.
- **CSS custom properties** for design tokens. Share values, not layout rules.
- **Container queries** (`cqw`, `cqh`) for component-relative sizing. Mobile-first.
- **3-layer variable hierarchy:**
  - `--settings-*` — static layout
  - `--theme-*` — dynamic, adapts to background
  - `--semantic-*` / `--prop-*` — constant colors
- **Panels:** `var(--theme-panel-bg)` for main panels, `var(--theme-card-bg)` + `var(--theme-stroke)` for cards. No blur on content panels.
- **Typography:** 14px min for essential text (`--font-size-min`), 12px min for supplementary (`--font-size-compact`). Never below 12px.
- **Legacy (`--*-current`):** Still in 30+ components. Migration ongoing.

Full reference with variable lists and scrollbar system: `docs/reference/styling-guide.md`.