ui-design-system

SKILL.md

Before generating any UI code, check the project for existing tokens:

If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).

Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.

デザイン システムに従って、一貫した UI コンポーネント、レイアウト、デザイン トークンを生成します。 React/TypeScript プロジェクト全体でスペース、色、タイポグラフィ、アクセシビリティの標準を強制します。新しい UI コンポーネントの作成、ページ レイアウトの構築、色やタイポグラフィの選択、デザイン トークンの設定、またはデザインの一貫性のための UI コードのレビューを行うときに使用します。 8 ポイントの間隔グリッド、Tailwind CSS トークンの使用法、shadcn/ui プリミティブ、WCAG 2.1 AA 準拠、レスポンシブ ブレークポイント、セマンティック HTML 構造、TypeScript コンポーネント インターフェイスについて説明します。バックエンドの実装 (python-backend-expert を使用)、テスト (react-testing-patterns を使用)、またはデプロイメント (deployment-pipeline を使用) はカバーしません。 ソース: hieutrtr/ai1-skills。

原文を見る