词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code PyConZA brand CSS tokens for semantic colors and focus

Use shared color, type, spacing, and focus tokens across the PyConZA 2026 conference site.

中文

Install in Claude Code

Open PyConZA 2026 in Claude Code and read the pinned CSS token block. The exercise checks one light card without starting the site.

  1. Review `.claude/skills/brand-css-tokens/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/brand-css-tokens/` in your project and save the reviewed file as `.claude/skills/brand-css-tokens/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/brand-css-tokens` in the slash menu.

Example task

Review {component: 'SessionCard', surface: 'light', input: 'keyboard'}. The card needs a semantic background and a visible keyboard focus outline.

What to check

Check {background: '--color-bg-surface', outline: '--focus-ring-on-light', offset: 2}. The outline uses the light-surface focus token and a 2px offset.

Original SKILL.md on GitHub · Updated

Frequently asked question

Why prefer semantic color tokens?

They identify the role of a color as surface, text, or accent. The palette value can then be maintained in one place.