accelint-design-foundation

Accelint Design Foundation

@accelint/design-foundation と @accelint/design-toolkit を使ったスタイリングに関する専門知識 — 標準的な実装とは異なる、独自の方針に基づく Tailwind の規約です。

Design Foundation でスタイリングする際に絶対にしてはいけないこと

• 数値のスペーシングクラスを最初に選ばないでください - セマンティックなスケールを強く推奨します：p-xxs、gap-m、m-l。p-4、gap-6 などの数値クラスは 1:1 の関係で機能します（p-1 = 1px であり、通常の Tailwind のように 4px ではありません）が、準拠していないデザインを実装する場合など、まれなケースでのみ使用してください。セマンティックなスケールにより、デザインシステムとの一貫性が保たれます。
• 生のカラー値を使ってテーマを手動で処理しないでください - dark:bg-gray-900 や className={theme === 'dark' ? 'bg-black' : 'bg-white'} は避けてください。ライト／ダークテーマに自動で適応する、bg-surface-default や fg-primary-bold などのセマンティックカラークラスを使用してください。
• 要素のサイズ調整にボーダーを使わないでください - border クラスではなく outline を使用してください。ボーダーは要素の寸法に加算されるため、レイアウトが崩れますが、アウトラインはサイズに影響せずに重ねて表示されます。要素のサイズは、コンテンツとパディングのみに基づいて一貫して決まるようにしてください。
• 任意の Tailwind バリアントを使わないでください - hover:[&>svg]:opacity-50 のような任意の値は、デザインシステムを壊します。サポートされている React Aria バリアント、または clsx による条件付きクラスのレンダリングを使用してください。
• コンポーネントのスタイリングで CSS レイヤーを迂回しないでください - カスケード階層には @layer components.l1、@layer components.l2 を使用してください。レイヤーを迂回すると詳細度の競合が起き、オーバーライドの挙動が予測できなくなります。
• プリミティブ／ドメイントークンを最初に選ばないでください - コンポーネントではセマンティックトークン（bg-surface-default、fg-primary-bold）を強く推奨します。ユーティリティクラス（bg-*、fg-*、icon-*、outline-*）を使うと、デザインがデザインシステムの範囲を超えるまれなケースに限り、domain-* および primitive-* トークンをフォールバックとして使用できますが、これは例外的なケースにとどめてください。セマンティックトークンにより、テーマの柔軟性とデザインシステムとの一貫性が保たれます。
• コンポーネントのスタイリングにインラインの Tailwind クラスを使わないでください - コンポーネントのスタイルはインラインの className プロパティではなく、CSS モジュールに記述してください。インライン Tailwind は、単発の小さなオーバーライドにのみ使用してください。コンポーネントのスタイリングすべてにインラインクラスを使うと、保守しにくいコードになり、CSS モジュールの利点（スコープ化、整理、再利用性）が失われます。
• 1 つの CSS ルール内で複数の @apply ディレクティブを使わないでください - すべての Tailwind クラスを 1 つの @apply 文にまとめてください。複数の @apply ディレクティブを使うと、Tailwind IDE プラグインでクラスの並べ替えや問題の検出ができなくなります。@apply bg-surface-default outline-1 outline-interactive p-m; のように記述し、@apply を別々の行に分けないでください。
• CSS モジュールのバリアントに属性セレクターを使わないでください - [data-size="small"] のような属性セレクターではなく、@variant ディレクティブブロックを使用してください。.button[data-size="small"] { @apply p-s; } ではなく、@variant size-small { @apply p-s; } のように記述してください。@variant ディレクティブは、一致するデータ属性が存在する場合にスタイルを自動で適用します。
• Tailwind のデフォルトテーマ値を使わないでください - Design Foundation は Tailwind のデフォルト値を削除し、置き換えます。デフォルトのシャドウ、フォントサイズ、カラーに依存すると、表示が崩れます。デザインシステムが提供するセマンティッククラスのみを使用してください。
• CSS モジュールで @reference ディレクティブを省略しないでください - すべての CSS モジュールファイルの先頭に、@reference '#globals';（カスタムのエントリーポイントが存在する場合）または @reference '@accelint/design-foundation/styles'; を記述する必要があります。これがないと、セマンティックトークンと @variant ブロックが未定義となり、ビルドエラーが発生します。
• PostCSS の設定を省略しないでください - @accelint/postcss-tailwind-css-modules プラグインは postcss.config.mjs で必須です。これがないと、名前付きグループセレクター（group-hover/button: など）と @variant セレクターを CSS モジュール内で解決できません。
• clsx を 'clsx' パッケージから直接インポートしないでください - 必ず @accelint/design-foundation/lib/utils からインポートしてください：import { clsx } from '@accelint/design-foundation/lib/utils';。Design Foundation は、追加の型サポートとデザインシステムとの統合を備えた clsx を再エクスポートします。直接インポートすると、これらの拡張機能を利用できません。

コンポーネントをスタイリングする前に確認すること

スタイリングがデザインシステムに沿っていることを確認するため、以下の項目をチェックしてください。

テーマとの互換性

• ライトテーマとダークテーマの両方で動作しますか？ 自動的に適応するセマンティックカラーのトークンを使用してください。@variant light と @variant dark を切り替えてテストします。
• 生のカラー値を使用していますか？ 使用している場合は、セマンティックトークンに置き換えてください。生の値はテーマに対応しません。

トークンシステム

• 正しい種類のトークンを使用していますか？ セマンティックトークン（bg-surface-default、fg-primary-bold）を強く推奨します。デザインがシステムの範囲を超える例外的な場合に限り、domain-* または primitive-* のフォールバックを使用してください。
• これに対応するセマンティックトークンはありますか？ まずトークンカタログを確認してください。セマンティックトークンがなく、デザイン上本当に必要な場合は、domain-* または primitive-* にフォールバックできますが、そのようなケースはまれです。

トークン選択のフレームワーク

トークンを選ぶときは、次の判断手順に従ってください。

1. 要素の用途を特定する - サーフェス、テキスト、アイコン、アウトラインのどれですか？
2. 階層を判断する - 強調度はプライマリ、セカンダリ、ターシャリのどれですか？
3. 状態を考慮する - デフォルト、ホバー、アクティブ、無効のどれですか？
4. ステータスを確認する - 情報、成功、警告、危険のどれですか？

例：「プライマリ見出しのテキストカラーが必要です」 → 用途：テキスト（fg-*） → 階層：強調ありのプライマリ（primary-bold） → 結果：fg-primary-bold

例：「ホバー状態のインタラクティブボタンに背景が必要です」 → 用途：背景（bg-*） → 状態：インタラクティブなホバー（interactive-bold-hover） → 結果：bg-interactive-bold-hover

スペーシングシステム

• このスペーシング値はセマンティックなスケールにありますか？ xxs/xs/s/m/l/xl/xxl/oversized のスケールを使用してください。スケールにない値の場合は、その値が本当に必要かを検討するか、最も近いセマンティック値を使用してください。
• 標準外のスペーシング値が必要ですか？ 数値クラス（p-1、m-12）は1:1の関係で機能します（p-1 = 1px、4pxではありません）が、デザインが標準に準拠しないまれなケースでのみ使用してください。一貫性を保つため、セマンティックなスケールを強く推奨します。

バリアントの使用

• データ属性で表現できますか？ 任意のクラスではなく、サポートされているバリアントとともに data-color="info" を使用してください。
• Design Toolkit のコンポーネントを正しくオーバーライドしていますか？ カスタム CSS ファイルではなく、className または classNames プロパティを使用してください。

レイアウトへの影響

• ここではアウトラインで対応できますか。それともボーダーが必要ですか？ ほとんどの場合、アウトラインを使用できます。ボーダーは、レイアウトの寸法に影響させる必要がある場合にのみ使用してください。

スタイリングのアプローチ

• CSS モジュールとインラインのどちらに記述すべきですか？ コンポーネントのスタイルは CSS モジュール（.module.css）に記述します。インラインの Tailwind クラスは、軽微な一時的なオーバーライドや調整にのみ使用してください。
• 再利用可能なコンポーネントですか。それとも一度限りのインスタンスですか？ 再利用可能なコンポーネントには CSS モジュールが必要です。一度限りのインスタンスでは、小さな調整にインラインクラスを使用できます。

セットアップの確認

• PostCSS は正しく設定されていますか？ postcss.config.mjs に @accelint/postcss-tailwind-css-modules プラグインが含まれていることを確認してください。このプラグインがないと、名前付きグループや @variant セレクターは CSS モジュール内で機能しません。
• すべての CSS モジュールに @reference がありますか？ 各 .module.css ファイルの先頭で、'#globals'（カスタムエントリーポイント）または '@accelint/design-foundation/styles' のいずれかを参照する必要があります。
• CSS エントリーポイントを最初にインポートしていますか？ カスタムの globals.css（または design-foundation/styles）をルートレイアウトで最初にインポートする必要があります。

セットアップ要件

重要：Design foundation を正しく動作させるには、PostCSS と CSS モジュールの特定の設定が必要です。

PostCSS の設定

プロジェクトのルートに postcss.config.mjs を作成するか、更新してください。

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    '@accelint/postcss-tailwind-css-modules': {}, // Required for CSS modules
  },
};

理由： @accelint/postcss-tailwind-css-modules プラグインは、CSS モジュールのセレクター（例：group-hover/button:）内での名前付きグループの解決と、@variant セレクターを修正します。このプラグインがないと、これらのセレクターは CSS モジュールファイル内で正しく解決されません。

カスタム CSS エントリーポイントがある場合の Package.json Imports

プロジェクトにトークン／ユーティリティ設定用のカスタム CSS エントリーポイントが実装されている場合：

{
  "imports": {
    "#globals": "./src/styles/globals.css"
  }
}

目的： CSS モジュールから @reference '#globals'; を介してカスタムエントリーポイントを参照できるようにします。

CSS モジュールの参照パターン

すべての CSS モジュールファイルに参照ディレクティブを含める必要があります：

/* If project has custom CSS entrypoint (defined in package.json imports): */
@reference '#globals';

@layer components.l1 {
  .button {
    @apply px-m py-xs;
  }
}

/* If NO custom CSS entrypoint, reference design-foundation directly: */
@reference '@accelint/design-foundation/styles';

@layer components.l1 {
  .button {
    @apply px-m py-xs;
  }
}

理由： @reference ディレクティブは、デザインシステムのトークン、ユーティリティ、バリアント定義をインポートします。これがないと、セマンティックトークンと @variant ブロックが未定義になります。

カスタム CSS エントリーポイント（任意）

カスタムトークンやユーティリティを実装する場合は、CSS エントリーポイントを作成します（例：src/styles/globals.css）。

/* Import design foundation base */
@import "@accelint/design-foundation/styles";

/* Add custom token overrides or utilities here */
@theme {
  --custom-brand-color: #ff0000;
}

次に： このファイルをルートレイアウトコンポーネントの最初のインポートとしてインポートします。

import './styles/globals.css'; // First import
import { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return <html>{children}</html>;
}

使用方法

このスキルでは、コンテキストの使用量を最小限に抑えるために、段階的開示を採用しています。

1. コアパターンから始める（SKILL.md）

一貫した実装のため、以下のスタイリングパターンとトークンの使い方に従ってください。

2. トークンカタログを参照する（AGENTS.md）

利用可能なトークン、スペーシングスケール、バリアントパターンをすぐに確認できるよう、AGENTS.md を読み込みます。

3. 必要に応じて詳細なリファレンスを読み込む

必須の読み込み条件 - 以下の状況に応じて、該当するリファレンスを読み込みます。

デザイン基盤を初めてセットアップする場合：

• 必須：「setup design foundation」、「configure design foundation」、「install design foundation」とユーザーが言った場合、または「undefined variable」や「@variant not found」などのビルドエラーが発生した場合は、references/setup.md（約8.9K）をすべて読み込みます。
• 読み込まないこと： token-reference.md、variant-system.md、spacing-scale.md、migration-guide.md

トークンを選ぶ場合、またはトークンの階層を理解する場合：

• 必須： どのセマンティックトークンを使うべきか判断できない場合や、ユーザーがトークンカタログ全体を必要としている場合は、references/token-reference.md（約6.5K）を読み込みます。
• 読み込まないこと： setup.md（ビルドエラーがある場合を除く）、migration-guide.md（移行する場合を除く）

@variant システムやコンポーネントのバリアントを扱う場合：

• 必須： データ属性のバリアントを実装する場合や、React Aria の状態を扱う場合は、references/variant-system.md（約5.8K）を読み込みます。
• 読み込まないこと： setup.md（ビルドエラーがある場合を除く）、migration-guide.md（移行する場合を除く）

スペーシングスケールや数値フォールバックを理解する場合：

• 必須： セマンティックなスペーシングと数値によるスペーシングの違いに迷った場合や、スペーシングカタログ全体が必要な場合は、references/spacing-scale.md（約8.5K）を読み込みます。
• 読み込まないこと： token-reference.md（色も扱う場合を除く）、setup.md（ビルドエラーがある場合を除く）

標準の Tailwind から移行する場合：

• 必須： 既存の Tailwind コードをデザイン基盤の規約に合わせて変換する場合は、references/migration-guide.md（約4.2K）を読み込みます。
• 読み込まないこと： 移行後に特定の問題が発生しない限り、その他のリファレンス

ビルドエラーやセットアップの問題をトラブルシューティングする場合：

• 必須： 「undefined variable」、「@variant not found」、「group-hover/button: not working」などのエラーが発生した場合は、references/setup.md をすべて読み込みます。
• 読み込まないこと： セットアップが正常に動作すると確認できるまで、その他のリファレンス

スタイリングパターン

コンポーネントのスタイリングに CSS モジュールを使う

デフォルトの方法：CSS モジュール内にコンポーネントのスタイルを記述し、@apply ディレクティブを使用します。

user-card.module.css：

@layer components.l1 {
  /* ✅ Single @apply per rule - enables IDE plugin support */
  .card {
    @apply bg-surface-default outline-1 outline-interactive shadow-elevation-raised-muted p-m;
  }

  .header {
    @apply flex items-center justify-between mb-s;
  }

  .title {
    @apply fg-primary-bold text-body-l;
  }

  .content {
    @apply space-y-xs mb-m;
  }

  .email {
    @apply fg-primary-bold text-body-m;
  }

  .role {
    @apply fg-primary-muted text-body-s;
  }

  .actions {
    @apply flex gap-s;
  }
}

/* ❌ Wrong - multiple @apply directives break IDE plugins */
/*
.card {
  @apply bg-surface-default;
  @apply outline-1 outline-interactive;
  @apply shadow-elevation-raised-muted;
  @apply p-m;
}
*/

user-card.tsx：

import styles from './user-card.module.css';

export function UserCard({ name, email, role }) {
  return (
    <article className={styles.card}>
      <header className={styles.header}>
        <h3 className={styles.title}>{name}</h3>
      </header>
      <div className={styles.content}>
        <p className={styles.email}>{email}</p>
        <p className={styles.role}>{role}</p>
      </div>
    </article>
  );
}

一度限りの上書きに限り、インラインクラスを使用します。

// ✅ Correct - CSS module + inline override for specific instance
<UserCard className="mb-xl" /> {/* One-off spacing adjustment */}

// ❌ Wrong - all styling inline
<div className="bg-surface-default outline-1 outline-interactive shadow-elevation-raised-muted p-m">
  <h3 className="fg-primary-bold text-body-l">{name}</h3>
</div>

clsx を使った条件付きクラス：

// ✅ Correct - import clsx from design foundation
import { clsx } from '@accelint/design-foundation/lib/utils';
import styles from './Button.module.css';

export function Button({ variant, isActive }) {
  return (
    <button className={clsx(styles.button, isActive && styles.active)}>
      Click me
    </button>
  );
}

// ❌ Wrong - importing directly from clsx package
import clsx from 'clsx';

トークンのカテゴリ

背景トークン（bg-*）：

• bg-surface-default - 基本のサーフェス（ページ／カードの背景）
• bg-surface-raised - 隆起したサーフェス
• bg-interactive-bold - 主要なアクションの背景
• bg-info-muted - 情報メッセージの背景
• bg-advisory-muted - 警告メッセージの背景
• bg-critical-muted - エラー／危険メッセージの背景
• bg-normal-muted - 成功メッセージの背景

前景トークン（fg-*）：

• fg-primary-bold - 基本のテキスト（見出し、本文）
• fg-primary-muted - 控えめなテキスト（キャプション、副次的なコンテンツ）
• fg-inverse-bold - 暗色／色付きの背景上のテキスト
• fg-accent-primary-bold - インタラクティブなテキスト／リンク
• fg-critical-bold - エラー／危険を示すテキスト

アウトライントークン（outline-*）：

• outline-interactive - インタラクティブなアウトライン（ボタン、入力欄）
• outline-static - 静的なアウトライン（枠線、区切り線）
• outline-info-bold - 情報状態のアウトライン
• outline-advisory-bold - 警告状態のアウトライン
• outline-critical-bold - エラー／危険状態のアウトライン

トークンのフォールバックパターン：

// ✅ Preferred - semantic tokens
<div className="bg-surface-default fg-primary-bold">Content</div>

// ⚠️  Acceptable but rare - domain/primitive fallback for edge cases
<div className="bg-domain-brand fg-primitive-blue-500">
  {/* Use only when design exceeds system */}
</div>

// ❌ Wrong - using fallbacks when semantic tokens exist
<div className="bg-primitive-neutral-100 fg-primitive-neutral-900">
  {/* Should use bg-surface-default fg-primary-bold */}
</div>

余白のスケール

8 段階のセマンティックスケール： xxs → xs → s → m → l → xl → xxl → oversized

ピクセル数ではなく、意味で考えてください。m は「このコンテキストにおける中程度」を意味し、特定のピクセル値を示すものではありません。

CSS モジュールでの使用方法：

.button {
  @apply px-m py-xs; /* ✅ Semantic spacing - preferred */
}

.card {
  @apply p-m space-y-s; /* ✅ Semantic scale for consistency */
}

/* ⚠️  Acceptable but rare - numeric fallback for edge cases */
.nonStandardLayout {
  @apply p-13; /* 13px exactly - use only for non-conforming designs */
  /* Note: p-1 = 1px (not 4px like vanilla Tailwind) */
}

余白のフォールバックパターン：

• 推奨：セマンティックスケールを使用します（p-m、gap-s、mb-l）
• フォールバック：1:1 の関係にある数値クラスも使用できます（p-1 = 1px、p-12 = 12px）
• 数値を使用する場合：セマンティックスケールが合わない、標準に準拠しないデザインの場合にのみ使用します

アウトラインとボーダー

アウトラインを優先してください。要素の寸法に影響しません。

/* ✅ Correct - outline doesn't impact layout */
.card {
  @apply outline-1 outline-interactive;
}

/* ❌ Wrong - border adds to dimensions */
.card {
  @apply border-2 border-gray-300;
}

ボーダーを使用するのは、次の場合に限ります：

• ボーダーをレイアウトに含める必要がある（テーブルセルなど）
• 寸法への影響を明示的に意図している

バリアントシステム

コンポーネントのバリアントにはデータ属性を使用します：

Button.module.css：

@layer components.l1 {
  .button {
    @apply px-m py-xs;
  }
}

@layer components.l2 {
  /* ✅ Use @variant blocks for conditional styling */
  .button {
    @variant color-info {
      @apply bg-interactive-bold fg-inverse-bold;
    }

    @variant color-critical {
      @apply outline-2 outline-critical-bold fg-critical-bold;
    }

    @variant size-large {
      @apply px-l py-s;
    }
  }
}

/* ❌ Wrong - attribute selectors */
/*
.button[data-color="primary"] {
  @apply bg-interactive-bold;
}
*/

Button.tsx：

import styles from './Button.module.css';

export function Button({ children, color = 'primary', size = 'medium' }) {
  return (
    <button
      className={styles.button}
      data-color={color}
      data-size={size}
    >
      {children}
    </button>
  );
}

一般的なバリアント：

• data-color：info、success、warning、danger
• data-size：small、medium、large
• data-state：active、disabled、loading

CSS レイヤーの階層

CSS モジュールでは常にレイヤーを使用してください：

/* ✅ Correct - layered for predictable specificity */
@layer components.l1 {
  .base-styles { /* Base component styles */ }
}

@layer components.l2 {
  .variant-styles { /* Variant styles */ }
}

@layer components.l3 {
  .state-styles { /* State styles */ }
}

/* ❌ Wrong - no layers causes specificity issues */
.component {
  background: var(--bg-surface-default);
}

レイヤーの順序： l1（基本） < l2（バリアント） < l3（状態）

Design Toolkit コンポーネントのオーバーライド

オーバーライドには className prop を使用します：

// ✅ Correct - override with inline class
<DesignToolkitButton className="mb-l">
  Action
</DesignToolkitButton>

// ✅ Correct - use classNames prop for internal elements
<DesignToolkitButton classNames={{ icon: 'icon-override' }}>
  Action
</DesignToolkitButton>

よくある問題

問題：「undefined variable --bg-surface-default」

原因： CSS モジュールに @reference ディレクティブがありません。

修正方法： CSS モジュールファイルの先頭に @reference '#globals'; または @reference '@accelint/design-foundation/styles'; を追加します。

/* ✅ Correct */
@reference '@accelint/design-foundation/styles';

@layer components.l1 {
  .card {
    @apply bg-surface-default; /* Now defined */
  }
}

問題：「@variant directive not recognized」

原因： @reference ディレクティブがないか、PostCSS プラグインが設定されていません。

修正方法 1： CSS モジュールの先頭に @reference ディレクティブがあることを確認します。

修正方法 2： postcss.config.mjs に @accelint/postcss-tailwind-css-modules プラグインが含まれていることを確認します：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    '@accelint/postcss-tailwind-css-modules': {}, // Add this
  },
};

問題：「group-hover/button: selector not working」

原因： @accelint/postcss-tailwind-css-modules プラグインがありません。

修正方法： postcss.config.mjs にプラグインを追加します（上記を参照）。

問題：スタイルが適用されない／トークンがそのままの値で表示される

原因： CSS エントリーポイントがインポートされていないか、インポートが遅すぎます。

修正方法： ルートレイアウトで globals.css（または @accelint/design-foundation/styles）が最初にインポートされていることを確認します：

// ✅ Correct order
import './styles/globals.css'; // First
import './other-styles.css';
import Component from './Component';

// ❌ Wrong order
import Component from './Component';
import './styles/globals.css'; // Too late

問題：「Cannot find module '#globals'」

原因： package.json の imports フィールドがないか、パスが正しくありません。

修正方法： package.json に imports を追加します：

{
  "imports": {
    "#globals": "./src/styles/globals.css"
  }
}

または、@reference を直接のパスに変更します：

@reference './styles/globals.css';

または、design-foundation を直接使用します：

@reference '@accelint/design-foundation/styles';

重要な注意事項

• Tailwind のデフォルト設定は削除されています - デザインの基盤では、Tailwind のデフォルトテーマがリセットされています。色、間隔、シャドウ、タイポグラフィにデフォルト値があると想定しないでください。デザインシステムで明示的に定義されたものだけを使用してください。
• セマンティックトークンは CSS 変数です - すべてのセマンティックトークンは、var(--bg-surface-default) のような CSS カスタムプロパティにコンパイルされます。ユーティリティだけでは不十分な場合はカスタム CSS で使用できますが、ユーティリティを優先してください。
• トークンのフォールバックチェーンがあります - ユーティリティクラス（bg-*、fg-*、icon-*、outline-*）は、まずセマンティックトークンを確認し、次に domain-* と primitive-* トークンにフォールバックします。このフォールバックは、デザインがデザインシステムの範囲を超えるまれなケースを想定したものですが、一貫性とテーマ設定のため、セマンティックトークンをデフォルトとして使用してください。
• 間隔のスケールはセマンティックであり、ピクセルに対応付けられていません - 「m = 16px」と考えないでください。「このコンテキストにおける中程度の間隔」と考えてください。このスケールは、コンテキスト（ボタンのパディングとセクションのマージンなど）に応じて調整されます。数値クラスは 1:1 の関係で機能します（p-1 = 1px であり、4px ではありません）が、仕様に準拠しないデザインでのみ使用するフォールバックです。
• テーマのバリアントには @ ディレクティブを使用します - @theme static と @variant light/dark の構文はカスタムです。標準の CSS メディアクエリと混同しないでください。テーマはルート要素のクラスまたは属性を介して適用されます。
• Design Toolkit のコンポーネントは React Aria です - アクセシビリティには React Aria を使用しています。React Aria の状態管理やバリアントを無理に変更しないでください。className と classNames のプロパティを使用してください。
• セットアップは必須です - PostCSS プラグインと @reference ディレクティブは必須であり、単なる利便性のためのものではありません。セットアップが不足すると、原因の分かりにくいビルドエラー（「undefined variable」、「@variant not found」）が発生します。スタイルの問題をデバッグする前に、必ずセットアップを確認してください。