What problem does it solve? Designing pages for the Project Bluefin factory dashboard often drifts into generic admin-panel patterns that fail to communicate OS QA evidence. This Skill enforces deliberate, subject-grounded design choices when modifying Astro pages, styles, charts, or visual components under src/. ## Core Features & Use Cases - Design Brief Discipline: Requires stating each page's subject, audience, and single job before making visual changes, keeping every page an evidence surface. - Semantic Design Rules: Enforces rules for colour as status, typography, structural markers, and purposeful motion grounded in the Bluefin/bootc domain. - Build-Time Verification: Mandates ESM imports for ECharts, local assets instead of CDN scripts, and validation via npm run build and page smoke tests. - Use Case: When adding a new test-results page, use this Skill to choose a status-driven hero, assign semantic colours, bundle ECharts locally, and verify the built HTML renders the intended structure. ## Quick Start Use the frontend-design skill to redesign the Tests page hero so it answers the page's primary question with a live chart instead of a generic KPI number.
