ツール概要

SpiraCSS のツール群の概要ドキュメントです。

共通前提

• spiracss.config.js をプロジェクトルートに置く
• AIエージェント用ドキュメント をダウンロードし、AIエージェントワークフローの参照ドキュメントにする

いずれかが欠けている場合、判断が不確かになり誤りやすくなるため、作業前に必ず確認してください。

ツール一覧

ツール	役割	ドキュメント
SpiraCSS Stylelint プラグイン	SCSS の構造・命名を自動検証	Stylelint / ルール
SpiraCSS HTML CLI	AI エージェント向け CLI。HTML から SCSS を生成、HTML 構造を検証	HTML CLI
SpiraCSS Comment Links	リンクコメントをクリックで該当ファイルを開く	Comment Links
SpiraCSS HTML to SCSS	HTML から SCSS テンプレートを生成（VS Code 拡張）	HTML to SCSS
PixelPerfect CSS Diff	dialog モーダル対応、色差分表示、ブレイクポイント設定、AI 向けプロンプトカスタマイズを備えたビジュアル QA 用 Chrome 拡張	PixelPerfect CSS Diff

補足: spiracss-html-to-scss は CLI のコマンド名でもあるため、VS Code 拡張と混同しないよう文脈で使い分けてください。

設定の共有

SpiraCSS ツール群は spiracss.config.js を共通の設定ファイルとして使用します。