Agent Skillsbitjaru/styleseed › ss-tokens

ss-tokens

GitHub

用于在 StyleSeed 设计系统中查看、添加或修改设计令牌(颜色、字体等)。支持同步更新 JSON 源文件与 CSS 变量,确保多端一致性。

engine/.claude/skills/ss-tokens/SKILL.md bitjaru/styleseed

Trigger Scenarios

查询当前设计令牌 新增设计令牌 修改现有设计令牌

Install

npx skills add bitjaru/styleseed --skill ss-tokens -g -y
More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-tokens -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-tokens

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-tokens -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter
{
    "name": "ss-tokens",
    "description": "View, add, or modify design tokens in the StyleSeed design system",
    "allowed-tools": "Read, Write, Edit, Grep, Glob",
    "argument-hint": "[action: list|add|update] [token-type: color|spacing|shadow|radius|typography]"
}

Design Token Manager

When NOT to use

  • For applying tokens in components → use /ss-component or /ss-pattern
  • For finding token violations in existing code → use /ss-lint
  • For brand-wide color/font choices that don't exist yet — define a skin first, then add tokens
  • For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables only

Action: $0 | Token type: $1 Arguments: $ARGUMENTS

Token File Locations

Type JSON Source CSS Implementation
Colors tokens/colors.json css/theme.css :root + @theme inline
Typography tokens/typography.json css/fonts.css + css/base.css
Spacing tokens/spacing.json Tailwind utilities (no custom CSS needed)
Radius tokens/radii.json css/theme.css @theme inline
Shadows tokens/shadows.json css/theme.css :root

Instructions

list — Show current tokens

Read and display the requested token file in a formatted table.

add — Add new token

  1. Add the token to the JSON source file (tokens/*.json)
  2. Add the CSS custom property to css/theme.css under :root
  3. If it needs a Tailwind utility, add to the @theme inline block
  4. If it has a dark mode variant, add to the .dark block

update — Modify existing token

  1. Update the value in the JSON source file
  2. Update the CSS custom property in theme.css
  3. Check all components for direct usage that might need updating

Rules

  • Always keep JSON and CSS in sync
  • Use semantic names, not descriptive names (--success not --green-500)
  • Colors should support both light and dark modes
  • New tokens must be added to BOTH the JSON source AND the CSS implementation

Version History

  • 575d99a Current 2026-07-05 18:21

Same Skill Collection

engine/.claude/skills/ss-a11y/SKILL.md
engine/.claude/skills/ss-audit/SKILL.md
engine/.claude/skills/ss-build/SKILL.md
engine/.claude/skills/ss-component/SKILL.md
engine/.claude/skills/ss-copy/SKILL.md
engine/.claude/skills/ss-dial/SKILL.md
engine/.claude/skills/ss-feedback/SKILL.md
engine/.claude/skills/ss-flow/SKILL.md
engine/.claude/skills/ss-lint/SKILL.md
engine/.claude/skills/ss-motion/SKILL.md
engine/.claude/skills/ss-page/SKILL.md
engine/.claude/skills/ss-pattern/SKILL.md
engine/.claude/skills/ss-reference/SKILL.md
engine/.claude/skills/ss-resolve/SKILL.md
engine/.claude/skills/ss-restyle/SKILL.md
engine/.claude/skills/ss-review/SKILL.md
engine/.claude/skills/ss-score/SKILL.md
engine/.claude/skills/ss-setup/SKILL.md
engine/.claude/skills/ss-update/SKILL.md
engine/.claude/skills/ss-verify/SKILL.md
skills/styleseed-design-review/SKILL.md

Metadata

Files
0
Version
0e2cb9a
Hash
d4ac2068
Indexed
2026-07-05 18:21

Главная - Вики-сайт
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-04 04:02
浙ICP备14020137号-1 $Гость$