Same Lint, Same Result — A Stylelint Toolchain for Humans and AI Agents

Part 4 laid out SpiraCSS's core principles and structure. This final part covers the tools and procedures for adopting it in practice. Tool Overview SpiraCSS is both a design methodology and a toolchain that supports it. Tool Role Users Stylelint plugin Automatically verifies SCSS structure, naming, and placement Humans and AI agents HTML CLI Generates SCSS from HTML, validates HTML structure Primarily AI agents AI Agent Guide Self-contained document covering rule specs, decision flow, and fix procedures AI agents VS Code: Comment Links Click @rel comments to navigate between files Humans VS Code: HTML to SCSS Generate SCSS from HTML via keyboard shortcuts Humans Humans use VS Code; AI agents use the CLI. Both share the same generation logic and the same validation rules. Stylelint Plugin — The Design Guardian This plugin is the core of SpiraCSS. Eight rules systematically verify the design principles described in Part 4. Rule Verification spiracss/class-structure Block/Element naming,