Skill Gallery
← スキル一覧に戻る
Soborbo

design-tokens

by Soborbo

⭐ 1🍴 0📅 2026年1月19日
GitHubで見るManusで実行

SKILL.md

name: design-tokens description: Design system foundation. Colors, typography, spacing. Single source of truth. No raw values.

Design Tokens Skill

One config. Consistent design. Zero guessing.

Purpose

Foundation layer for all UI. Every visual property comes from here.

Output

tokens_generated: true
tailwind_config: "tailwind.config.mjs"
css_variables: "src/styles/tokens.css"
design_token_verdict: PASS | WARN | FAIL

Single Source of Truth

This skill is the ONLY source for visual tokens. All UI skills consume from here. No local overrides.

Cross-references:

  • section-skeleton → uses spacing/colors
  • astro-components → uses all tokens
  • frontend-design → uses all tokens

Token Categories

TypeTokensUsage
Semanticprimary-*, accent, neutral-*Use in components
Utilityspacing.*, font-*, shadow-*Internal mapping only

Rule: Components use semantic tokens. Utility for internal only.

Token Usage Scope

TokenAllowedForbidden
accentCTAs, links, highlightsBody text, backgrounds
primary-900Headlines, body textButtons
primary-100Section backgroundsText
neutral-200Borders, dividersCTAs

Wrong scope = WARN.

Forbidden Raw Values

TypeForbiddenUse Instead
Colors#FF6B35, rgb()bg-accent, text-primary-900
Spacingmt-[23px]mt-6
Font sizestext-[18px]text-lg
Shadowsshadow-[...]shadow-card
Radiusrounded-[12px]rounded-lg

Any raw value in component = FAIL.

A11y Contrast Requirements

CombinationMin RatioStandard
Body text on white4.5:1AA
Body text on primary-1004.5:1AA
Large text (≥18px)3:1AA
CTA text on accent4.5:1AA
UI components3:1AA

Contrast fail = FAIL.

Color System

Required

ColorTokensPurpose
Primary50-950 scaleBrand, text, backgrounds
AccentDEFAULT, hover, lightCTAs, links
Neutral50-900 scaleBorders, backgrounds
Semanticsuccess, error, warningFeedback

Usage

TokenUse For
primary-900Headlines, body
primary-700Secondary text
primary-100Light section bg
accentCTAs, links
accent-hoverButton hover

Typography (Fluid Scale)

TokenRangeUse
text-base16-18pxBody
text-lg18-20pxLead
text-2xl24-32pxH3
text-3xl30-40pxH2
text-4xl/5xl36-64pxH1

Font: Inter → system-ui → sans-serif

Spacing (8px Grid)

TokenValueUse
py-12 md:py-2048/80pxSection padding Y
px-4 md:px-816/32pxSection padding X
gap-6 md:gap-824/32pxComponent gap
p-4 md:p-616/24pxCard padding

Design Token Verdict

design_token_verdict: PASS | WARN | FAIL
issues: []
ConditionVerdict
Raw value in componentFAIL
Contrast failFAIL
Missing required tokenFAIL
Wrong token scopeWARN
Missing shade in scaleWARN
All rules passPASS

FAIL States

Condition
Hardcoded hex in component
Arbitrary spacing [Xpx]
Contrast ratio below AA
Missing primary scale
Missing accent colors

WARN States

Condition
Token used in wrong scope
Missing optional shades
Non-standard font loaded

Brand Intake

brand_intake:
  primary_color: "#XXXXXX"
  accent_color: "#XXXXXX"
  font: Inter | Poppins | System
  style: Modern | Classic | Playful
  industry: removals | cleaning | trades | legal

References

Definition of Done

  • tailwind.config.mjs generated
  • tokens.css with CSS variables
  • Primary has full scale (50-950)
  • Accent has hover + light
  • Contrast passes AA
  • No raw values in components
  • design_token_verdict = PASS

スコア

総合スコア

50/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
○最近の活動

3ヶ月以内に更新がある

0/10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
○タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です