Word Wolf Skills

Appearance

DADSデザインシステム ​

基本ワークフロー ​

  1. 設計前に、対象リポジトリのプロダクト要件と既存UI規約を確認する。
  2. DADS風のVue/Nuxt UIを実装する前に、references/vue-tailwind.md を読む。
  3. DADSの文字サイズ、太さ、行高を扱う場合は、references/typography.md を読む。
  4. DADS掲載コンポーネントを作る、または公式スニペットを変換する場合は、references/components.md を読む。
  5. 対象リポジトリに共有Vueコンポーネントやcomposableの層がある場合はそれを優先し、route/pageファイルは薄く保つ。
  6. キーボードフォーカス、disabled状態、フォームラベル、エラーメッセージ、色のコントラストなどのアクセシビリティ状態を検証する。

実装ルール ​

  • 公式DADS HTML/React例は、Vue Single File Componentへ変換する。
  • React props、JSX、hooks、render callbackではなく、Vueの props、computed、defineEmits、slotを使う。
  • @click、v-model、:class、v-if、v-for、aria-*、ネイティブHTMLの意味論を使う。
  • digital-go-jp/tailwind-theme-plugin はインストールせず、依存もしない。
  • DADSトークン短縮クラスなどのプラグイン由来クラスが存在すると仮定しない。ローカルTailwindユーティリティ、text-[1rem] のような任意値、CSS変数、またはコンポーネントスコープCSSを使う。
  • 見た目の模倣よりも、DADSの振る舞いとアクセシビリティ上の契約を優先する。
  • 日本語UIでは Noto Sans JP / system sans 系のフォントスタックを優先する。
  • タイポグラフィは公式DADSのテキストスタイルを用いる。任意の font-size、font-weight、line-height を場当たり的に組み合わせず、Display（Dsp）、Standard（Std）、Dense（Dns）、Oneline（Oln）、Mono の定義済みスタイルへ対応付ける。Vue側では .dads-text-std-16n-170 のような名前付きutilityを使い、値を毎回分解して書かない。
  • sm:dads-text-std-45b-140 のようにDADS typography utilityへTailwind variantを付けるため、DADS typography utilityは Tailwind v4 の @utility で定義する。通常のCSS classや @layer utilities だけで定義すると、Tailwind IntelliSenseの suggestCanonicalClasses やvariant生成で問題になりやすい。
  • Tailwind IntelliSenseの suggestCanonicalClasses が出る書き方を避ける。CSS変数は text-[var(--dads-text)] ではなく text-(--dads-text)、旧aliasの break-words ではなく wrap-break-word、spacing scaleへ写せる任意値は min-h-[38rem] ではなく min-h-152 のようにcanonical classを使う。
  • Tailwind IntelliSenseの cssConflict が出る組み合わせを避ける。focus outlineは focus-visible:outline focus-visible:outline-4 ではなく、focus-visible:outline-4 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-(--dads-focus) のように幅、style、offset、色を重複しないutilityへ分ける。
  • ボタン、入力、フィールド、パネル、セグメントボタンなどの再利用UIを、長いTailwind class文字列の定数としてfeature component内に置かない。Vue componentとして app/shared/components/ui/ などに抽出し、variant、size、disabled、focus、ARIAなどの契約をコンポーネント側に閉じ込める。

公式参照 ​

細部が重要な場合は、公式DADSサイトを正とする。

  • メインサイト: https://design.digital.go.jp/dads/
  • 基本デザイン: https://design.digital.go.jp/dads/foundations/
  • タイポグラフィ概要: https://design.digital.go.jp/dads/foundations/typography/
  • テキストスタイル一覧: https://design.digital.go.jp/dads/foundations/typography/text-style/
  • コンポーネント: https://design.digital.go.jp/dads/components/
  • リソース: https://design.digital.go.jp/dads/resources/
  • HTMLスニペット: https://github.com/digital-go-jp/design-system-example-components-html
  • Reactスニペット: https://github.com/digital-go-jp/design-system-example-components-react
  • Storybook HTML: https://design.digital.go.jp/dads/html/
  • Storybook React: https://design.digital.go.jp/dads/react/

正確なトークン、コンポーネントvariant、更新済みDADSルールに依存する作業では、先に公式ページまたは公式リポジトリを確認する。