> **Important:** This skill provides guidance and recommended instructions to assist the AI system. Outputs are not guaranteed to be complete, correct, secure, or applicable to every scenario. Results should be reviewed and validated by a human before being applied. The AI model may choose not to follow all instructions exactly, and additional verification may be required. # Frontend Quality Bar — Render Layout Tokens with Real Library Primitives > **Load this BEFORE writing any frontend page or component.** Read during **Step 1** (Frontend). This is the contract between the plan's Section 5 (Design System & UI) and the scaffolded JSX. > **Read first:** the fidelity-agnostic **Shared design-quality principles** in [`../shared-references/frontend-quality-bar.md`](.github/agents/shared-references/frontend-quality-bar.md) — the single design contract shared by the planning preview and this scaffold. This file adds the **framework rendering layer** (per-library primitive mapping, theming, motion, dark mode) on top of those principles. --- ## Core principle > **Layout tokens are layout INTENT, not implementation.** When the plan's Section 6 says a page's layout is `header + hero + grid + footer`, that does NOT mean produce four `
`s with placeholder text. It means **render the equivalent of those regions using the real `Component Library` named in Section 6, themed by the Section 6 Color Palette.** If you ever emit JSX like this: ```tsx // ❌ ZERO-EFFORT WIREFRAME REPRODUCTION — DO NOT SHIP
Header
Hero
Card 1
Card 2
``` …you have failed the quality bar. That output **looks worse than the presentation-quality plan preview** the user already approved, because it strips the theme, the icons, the elevation, and the state coverage the preview shipped. The preview is a promise; this contract is how you keep it. --- ## Section 6 inputs you MUST consume | Field in plan §5 | What it controls | |--------------------------|--------------------------------------------------------------------------| | `Component Library:` | Which library's primitives you import and render (mandatory). | | `Style Direction:` | Density, corner radius, elevation, list-vs-hero bias. | | `Typography:` | Font family applied at the app shell level. | | Color Palette table | Brand ramp / theme tokens — wire through the library's theme provider. | | Pages table (`Layout`) | Which **library primitives** to compose per page (see mapping below). | | `.azure/.preview-temp/*.html` + `theme.css` | The **presentation-quality static HTML/CSS preview** the user approved during planning. It is a faithful visual spec: page regions and order, the themed palette, real inline-SVG icons, populated content, and all four data states. What it deliberately omits (raw-static limits): real webfonts, motion, working dark mode, and real photos. **Reproduce it faithfully with real library primitives and add only those production-only capabilities** (see "Polish floor" below) — never regress below it. Do not import, embed, or `