AgentSkillsCN

design-system-patterns

通过原子设计、Tailwind标记/变体和可访问性，设计可复用UI的系统模式。适用于创建原子/分子、主题化或强化a11y时使用。

SKILL.md
--- frontmatter
name: design-system-patterns
description: Design system patterns for reusable UI via atomic design, Tailwind tokens/variants, and accessibility. Use when creating atoms/molecules, theming, or hardening a11y.

Design System Patterns

Concise guidance for building consistent, accessible atoms and molecules. Keep SKILL lean; open resources only when needed.

When To Use

  • •Creating/updating atoms or molecules from a component gap analysis
  • •Defining tokens, variants, and dark mode support
  • •Enforcing accessibility (focus, keyboard, semantics, SR)
  • •Structuring components (polymorphic props, compound patterns) and adding tests/visual coverage

Core Patterns

  • •Atomic Scope: DS owns atoms/molecules; organisms stay with product/feature teams.
  • •Tokens/Variants: Central tokens + CVA variants; always include dark mode.
  • •Accessibility: Focus-visible, keyboard flows, semantic labels, SR text.
  • •Composition: Polymorphic headings, compound components, safe error boundaries.
  • •Testing: RTL for behavior/accessibility; Storybook for visual regressions.

Resources

  • •Atomic Design — load when classifying scope (atom vs molecule vs organism).
  • •Styling, Tokens, and Variants — load when defining tokens, CVA variants, dark mode.
  • •Accessibility — load when enforcing focus, keyboard, semantics, SR support.
  • •Component Structure — load when defining props, polymorphism, composition, error boundaries.
  • •Testing — load when writing component tests or visual regression coverage.