agentsclimarketplace
Sign in

Design system

Skill Syo-M/fable-frontend-skills/plugin/skills/design-system

Design system and visual consistency — token tiers, typography, iconography, shared component API design, implementing Figma designs. Use when building shared/reusable UI components, defining tokens, type scales, or icon sets, or translating Figma/design mockups into code. 日本語の依頼例:「共通コンポーネント作って」「デザインシステム」「デザイントークン定義」「Figma通りに実装して」「アイコン整備」「タイポグラフィ設計」。From its SKILL.md

Install
npx -y skills add Syo-M/fable-frontend-skills --skill design-system

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

One thing to look at

  • 3 stars3 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.

SKILL.md

3.5 KB, 692 tokens by cl100k_base, as published. Nobody here has run it

Design System

Token tiers — extend the scale, never bypass it

Builds on the active styling skill's token rules (css-modules: tokens.css; tailwind: the @theme block — both compile to CSS custom properties; no styling skill installed → keep tokens wherever the project already defines them). Structure tokens in tiers:

  1. Primitive: raw values, never used directly in components (--blue-600, --size-4).
  2. Semantic: meaning-bearing aliases components consume (--color-action, --color-text-muted, --space-inline-md).
  3. Component (only when needed): --button-height-md referencing semantic tokens.
  • Components consume semantic/component tokens only. A new design value means extending the scale deliberately — never a one-off raw value in a component module.
  • Every new token gets a value for every theme ([data-theme='dark'] etc.) at creation time; a token defined for light only is a bug.

Typography

  • One modular type scale as tokens (--text-sm … --text-2xl), sizes in rem, line-height unitless. No ad-hoc font-size values in components.
  • Max line length for body text (max-inline-size: 65ch or a token).
  • Fonts: prefer one variable font over many static weights; loading rules (framework loader, woff2, font-display, preload, subsetting) live in images-media.

Iconography

  • One icon system per repo: SVG-as-component (SVGR or framework equivalent), sized via tokens, colored via currentColor so icons inherit text color.
  • Decorative icons: aria-hidden="true". Icon-only buttons: aria-label (see a11y). Never mix icon libraries casually — adding a second icon set is a dependency decision.

Shared component API

  • Consistent vocabulary across all components: the same variant names (variant, size with the same scale sm/md/lg) mean the same thing everywhere. Don't invent kind/appearance/type synonyms per component.
  • Shared components accept className (merged onto the root with clsx) and forward ref; spread remaining valid DOM props onto the root element so consumers can set data-*/aria-*.
  • Inputs ship controlled AND uncontrolled support where native inputs do; document which.
  • Every shared component has stories for all visual states (see storybook) — the catalog IS the design-system documentation.

Implementing from Figma

  • Figma values are intent, not law: map every color/space/radius/shadow to the nearest existing token. A value with no close token is a conversation (new token or designer adjustment), not a hardcoded pixel value copied from the inspect panel.
  • Auto-layout maps to flex/grid + gap — don't transcribe absolute positions.
  • Designs are drawn at one viewport in one state. Before calling it done, resolve what the mock doesn't show: responsive behavior, focus/hover/active, loading/error/empty, long text and overflow, keyboard interaction, dark theme.
  • Match the design system's existing component before building new: if the mock looks 90% like <Card>, extend <Card>, don't fork it.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design systems skills give in 692 tokens

Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06

  • Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
  • Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
  • Keep touch targets at least 44x44pxin 20 of 501
  • Score the UI across ten dimensionsin 18 of 501, across 8 files
  • Animate exclusively via transform and opacityin 18 of 501, across 15 files
  • Ensure WCAG AA color contrastin 18 of 501, across 13 files
  • Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
  • Ensure proper contrast and readabilityin 15 of 501, across 10 files
  • Scan the codebase for existing style patternsin 15 of 501, across 6 files
  • Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
  • Propose a design token setin 14 of 501, across 5 files
  • Create a custom theme when none fitin 14 of 501, across 9 files

Said here and by no other author read

  • Give every new token values for every theme.
  • Define one modular type scale as tokens.
  • Use one icon system per repo, colored via currentColor.
  • Keep variant and size vocabulary consistent across components.
  • Add stories for every visual state.
  • Map Figma values to the nearest existing token.

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 626,045. 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.