スターター
スターターは、SpiraCSS のプロジェクト設定（Stylelint / HTML CLI など）をあらかじめ用意した最小構成のサンプルです。
VS Code 拡張を使う場合は各自インストールして、SCSS 生成や @rel ナビゲーションも試せます。
試せること
- SpiraCSS のクラス構造（Block/Element、1ファイル1Block）
- バリアント/ステートの設計（デフォルトは data 属性）
- HTML -> SCSS 生成（VS Code 拡張 / HTML CLI）
- Stylelint のルール検証とエラーメッセージ
@relコメントのナビゲーション（Comment Links 拡張）
基礎
- SCSS 構造リファレンス: spiracss-scss-structure
一覧
| Stack | Starter | 構成 | SCSS 読み込み |
|---|---|---|---|
| Vanilla | spiracss-starter-vanilla | 静的 HTML | HTML でエントリ SCSS を読み込み |
| Eleventy | spiracss-starter-eleventy | WebC テンプレート + include | テンプレートでビルド済み CSS を読み込み |
| Astro | spiracss-starter-astro | Astro コンポーネント | layout + エントリ SCSS を import |
| Next.js | spiracss-starter-next | React コンポーネント | グローバル SCSS + CSS Modules |
| Next.js | spiracss-starter-next-global | React コンポーネント | グローバル SCSS のみ |
| Nuxt | spiracss-starter-nuxt | Vue コンポーネント | グローバル SCSS + scoped SCSS |