ai-developer-skill-os 9.3.0 → 10.1.0

package/.agents/skills/qk-ui-builder/references/responsive.md

@@ -1,115 +0,0 @@
-# Responsive
-
-Foundational rules for building layouts that adapt across screen sizes without breaking, horizontal scroll, or un-tappable controls.
-
-## Breakpoints
-
-Use this standard scale. Build **mobile-first** (base styles = small screens, then enhance upward).
-
-```
-sm   640px
-md   768px
-lg   1024px
-xl   1280px
-```
-
-```css
-/* mobile-first: base = mobile, then min-width queries */
-@media (min-width: 640px) { /* sm */ }
-@media (min-width: 768px) { /* md */ }
-@media (min-width: 1024px) { /* lg */ }
-@media (min-width: 1280px) { /* xl */ }
-```
-
-## Mobile: Stack Vertically
-
-On small screens, lay content out in a **single vertical column**. Never require horizontal scrolling for core content.
-
-```css
-.layout {
-  display: grid;
-  grid-template-columns: 1fr;          /* stacked on mobile */
-  gap: var(--space-6);
-}
-@media (min-width: 768px) {
-  .layout { grid-template-columns: 240px 1fr; }  /* sidebar + content */
-}
-```
-
-```css
-/* Guard against accidental horizontal overflow */
-html, body { overflow-x: hidden; max-width: 100%; }
-img, video, table { max-width: 100%; }
-```
-
-## Touch Targets: Min 44×44px
-
-Every interactive control must be at least **44×44px** to be comfortably tappable. Don't let padding shrink the hit area below this.
-
-```css
-.btn, .nav-link, .icon-button {
-  min-height: 44px;
-  min-width: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2) var(--space-4);
-}
-```
-
-## Fluid Typography with clamp()
-
-Use `clamp()` for headings/hero text so type scales smoothly between breakpoints without abrupt jumps.
-
-```css
-h1 {
-  /* min 32px, preferred 5vw, max 64px */
-  font-size: clamp(2rem, 5vw, 4rem);   /* 32px → 64px */
-}
-h2 {
-  font-size: clamp(1.5rem, 3vw, 2rem); /* 24px → 32px */
-}
-```
-
-Keep body text near `--text-base` (16px) for readability; reserve clamp() for display sizes.
-
-## Image Grids: minmax(0, 1fr)
-
-For responsive image/card grids, use `minmax(0, 1fr)` so items shrink properly and never overflow. Fixed-width columns break on mobile.
-
-```css
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
-  gap: var(--space-4);
-}
-@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
-```
-
-```css
-.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
-```
-
-## Desktop Container
-
-Cap desktop content at 1200px and center (see layout-and-space.md). On mobile it becomes 100% width with safe padding.
-
-```css
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin-inline: auto;
-  padding-inline: var(--space-4);
-}
-@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
-```
-
-## Practical Checklist
-
-- [ ] Mobile-first with sm/md/lg/xl breakpoints.
-- [ ] Mobile stacks vertically; no horizontal scroll.
-- [ ] All tap targets ≥ 44×44px.
-- [ ] Display type uses `clamp()` for fluid scaling.
-- [ ] Image/card grids use `minmax(0, 1fr)`.
-- [ ] Desktop content capped at 1200px.

package/.agents/skills/qk-ui-builder/references/slop-test.md

@@ -1,135 +0,0 @@
-# Slop Test — 58 Anti-Slop Gates
-
-Run this checklist AFTER every build. Every answer must be **NO**.
-
-## Pre-Emit Self-Critique (Score 1–5 on each axis)
-
-| Axis | Question | Score |
-|------|----------|-------|
-| Philosophy | Does this serve the user, or just show off? | ___ |
-| Hierarchy | Is the visual hierarchy clear within 3 seconds? | ___ |
-| Execution | Is every interaction polished, not just present? | ___ |
-| Specificity | Does this feel made for this brief, not generic? | ___ |
-| Restraint | Could anything be removed without losing meaning? | ___ |
-| Variety | Would a second page feel different, not a color-swap? | ___ |
-
-**Rule:** Any axis < 3 → revise before continuing.
-
----
-
-## Visual Gates (1–7)
-
-- [ ] **1.** No banned fonts: Inter, Roboto, Arial, system-ui as primary identity font
-- [ ] **2.** No purple-blue gradients (`linear-gradient(135deg, #a855f7, #3b82f6)`)
-- [ ] **3.** No gradient text (`background-clip: text`)
-- [ ] **4.** No 3-equal-column icon cards
-- [ ] **5.** No card-in-card layouts (card inside card inside card)
-- [ ] **6.** No side-stripe cards (left border accent only)
-- [ ] **7.** No centred-everything hero (all content centered with max-width)
-
-## Structural Gates (8–9)
-
-- [ ] **8.** No AI-template reuse (same fingerprint as prior build in project)
-- [ ] **9.** Sections separated by more than whitespace (use dividers, headings, or background changes)
-
-## Microinteraction Gates (10–19)
-
-- [ ] **10.** No `transition-all` on interactive elements
-- [ ] **11.** No `hover:scale-105` without context
-- [ ] **12.** No `cubic-bezier(0.68, -0.55, 0.265, 1.55)` (bounce easing)
-- [ ] **13.** No more than 2 hover effects per element
-- [ ] **14.** No animating layout props (width, height, padding)
-- [ ] **15.** No animated focus ring (focus state must be instant)
-- [ ] **16.** No celebratory toasts/confetti on load
-- [ ] **17.** No equal hover/focus tooltip delay
-- [ ] **18.** No auto-rotating carousel without pause-on-hover
-- [ ] **19.** No placeholder names (John Doe, Jane Smith, etc.)
-
-## Variety Gates (20–21)
-
-- [ ] **20.** Macrostructure stamp present in CSS comment
-- [ ] **21.** Not Specimen fall-through (every brief needs a real macrostructure)
-
-## Implementation Gates (22–27)
-
-- [ ] **22.** No zero-chroma neutrals (`hsl(0, 0%, X%)` as primary)
-- [ ] **23.** Accent color footprint < 5% of viewport
-- [ ] **24.** Spacing follows scale (no off-scale values like 13px, 27px)
-- [ ] **25.** Prose measure between 45–75ch
-- [ ] **26.** All interactive elements have focus, active, disabled states
-- [ ] **27.** Motion has `prefers-reduced-motion` fallback
-
-## Hero Enrichment Gates (28–31)
-
-- [ ] **28.** No autoplay-with-sound video
-- [ ] **29.** No over-busy abstract background (more than 2 visual layers)
-- [ ] **30.** No mixed icon libraries or emoji icons in professional UI
-- [ ] **31.** No Lottie animation when CSS transition would suffice
-
-## Diversification Gates (32–33)
-
-- [ ] **32.** Same archetype not repeated without varied knob (size, color, layout)
-- [ ] **33.** Decorative SVG/figure has `aria-hidden="true"` or meaningful `role`
-
-## Layout-Safety Gates (34–36)
-
-- [ ] **34.** No horizontal scroll (`overflow-x: clip` on html+body)
-- [ ] **35.** No misplaced decorative text effects (text-shadow as decoration)
-- [ ] **36.** Interactive bars centered (not left-aligned with unbalanced whitespace)
-
-## Typography Gates (37–38a)
-
-- [ ] **37.** No more than 3 font families
-- [ ] **38.** No outlier font used in > 2 slots
-- [ ] **38a.** No italic headers (headers use weight, not style)
-
-## Input-State Gates (39)
-
-- [ ] **39.** No border-width shift on focus, no border-built focus ring, no input/button height mismatch, no collapsed helper text, no opacity-only disabled
-
-## Contrast Gates (40–41)
-
-- [ ] **40.** WCAG 2.1 AA contrast (4.5:1 for text, 3:1 for large text)
-- [ ] **41.** No ink-on-ink (same color for text and background with only opacity difference)
-
-## Chrome Gates (42–45)
-
-- [ ] **42.** No AI nav fingerprint (centered logo, pill nav, gradient CTA)
-- [ ] **43.** No AI footer fingerprint (3 columns: Product, Company, Legal, social icons row)
-- [ ] **44.** Hero fits viewport (no excessive height)
-- [ ] **45.** Decorative elements have purpose or removed
-
-## Honest Copy Gate (46)
-
-- [ ] **46.** No invented metrics ("10x faster", "100% secure", "trusted by 10,000+")
-
-## Re-Drawn Chrome Gate (47)
-
-- [ ] **47.** No fake browser/phone/code/IDE chrome unless building a mockup tool
-
-## Token Discipline Gate (48)
-
-- [ ] **48.** No mid-render token improvisation (all values from DESIGN.md or theme)
-
-## Responsive Clickable Gate (49)
-
-- [ ] **49.** No two-line clickable text (buttons/links max 1 line)
-
-## Mobile Non-Negotiables (50–57)
-
-- [ ] **50.** Image grids use `minmax(0, 1fr)` not fixed widths
-- [ ] **51.** Long words wrap (`overflow-wrap: break-word`)
-- [ ] **52.** Mobile section-head collapse (h1 reduces size on small screens)
-- [ ] **53.** Radio-tab scroll-jump prevented
-- [ ] **54.** No tag-beside-heading on mobile (stack vertically)
-- [ ] **55.** All-caps line-height collision avoided (`letter-spacing: 0.05em` minimum)
-- [ ] **56.** Sticky header doesn't bleed into content
-- [ ] **57.** Studied DNA not discarded (if `--study` was used, its output must be referenced)
-
----
-
-## Final Gate
-
-- [ ] **58.** Pre-emit self-critique average ≥ 3.0 on all 6 axes
-
-**Pass condition:** All 58 gates = NO. Any YES → fix before shipping.

package/.agents/skills/qk-ui-builder/references/structure.md

@@ -1,280 +0,0 @@
-# Structure: 6-Axis Fingerprint
-
-Use this framework to analyze and design page structure systematically. Each axis represents a distinct structural decision that shapes the user's experience.
-
----
-
-## Axis 1: Section-Heading Placement
-
-Where headings sit within their section determines visual hierarchy and reading flow.
-
-### Options:
-
-**Top-left**
-- Headings aligned to the left, flush with or near the top of the section.
-- Best for: Content-heavy pages, documentation, dashboards.
-- Feels: Structured, professional, scannable.
-
-**Centered**
-- Headings centered horizontally within the section.
-- Best for: Landing pages, marketing sections, hero content.
-- Feels: Formal, balanced, editorial.
-
-**Inline with content**
-- Headings sit within the content flow, often beside images or at the start of cards.
-- Best for: Card grids, list layouts, feature sections.
-- Feels: Integrated, compact, modern.
-
-**Floating/overlapping**
-- Headings positioned over images or backgrounds, often large and semi-transparent.
-- Best for: Hero sections, editorial layouts, portfolio pages.
-- Feels: Bold, immersive, designed.
-
-**Staggered/offset**
-- Headings offset from the content grid, creating visual tension.
-- Best for: Creative portfolios, marketing sites, asymmetric layouts.
-- Feels: Dynamic, intentional, breaking the grid.
-
-**Hidden/implied**
-- No visible heading; section identity comes from context or content structure.
-- Best for: Card grids with self-explanatory items, tabbed interfaces.
-- Feels: Minimal, relies on content clarity.
-
----
-
-## Axis 2: Body Composition
-
-How content is arranged spatially across the viewport.
-
-### Options:
-
-**Single column**
-- One narrow column, max-width ~650px, centered or left-aligned.
-- Best for: Long-form reading, articles, documentation.
-- Feels: Focused, readable, traditional.
-
-**Two-column**
-- Main content + sidebar, or split content evenly.
-- Best for: Documentation, settings pages, blog layouts.
-- Feels: Balanced, information-dense, efficient.
-
-**Three-column**
-- Three equal or near-equal columns.
-- Best for: Feature grids, card layouts, dashboard widgets.
-- Feels: Symmetric, scannable, systematic.
-
-**Asymmetric**
-- Uneven column widths (e.g., 2/3 + 1/3).
-- Best for: Marketing pages, case studies, editorial layouts.
-- Feels: Dynamic, hierarchical, designed.
-
-**Full-bleed**
-- Content spans the full viewport width.
-- Best for: Hero sections, image galleries, immersive experiences.
-- Feels: Expansive, modern, bold.
-
-**Masonry/Pinterest**
-- Varied height cards in a waterfall layout.
-- Best for: Image galleries, blogs, portfolio grids.
-- Feels: Organic, varied, content-adaptive.
-
-**Dashboard grid**
-- Structured grid with mixed card sizes (bento box style).
-- Best for: Analytics dashboards, admin panels, data tools.
-- Feels: Organized, data-rich, functional.
-
----
-
-## Axis 3: Divider Language
-
-How sections and content blocks are visually separated.
-
-### Options:
-
-**Whitespace**
-- Separation achieved through spacing alone, no lines or borders.
-- Best for: Modern, minimal designs; content-heavy pages.
-- Feels: Clean, breathable, elegant.
-
-**Horizontal lines**
-- Thin or thick lines between sections or list items.
-- Best for: Traditional layouts, documents, settings pages.
-- Feels: Structured, formal, clear separation.
-
-**Color blocks**
-- Distinct background colors separating sections.
-- Best for: Marketing sites, landing pages, long-scrolling pages.
-- Feels: Bold, sectional, visually distinct.
-
-**Cards/containers**
-- Each section or item wrapped in a card with shadow/border.
-- Best for: Dashboards, data grids, feature lists.
-- Feels: Contained, organized, modular.
-
-**Gradient dividers**
-- Fading gradients or angled transitions between sections.
-- Best for: Modern marketing, creative portfolios.
-- Feels: Fluid, dynamic, premium.
-
-**Border-only**
-- Subtle borders around sections without fill.
-- Best for: Admin interfaces, forms, structured data.
-- Feels: Precise, technical, understated.
-
-**No dividers**
-- Content flows continuously without separation.
-- Best for: Single-topic pages, storytelling, immersive experiences.
-- Feels: Unified, narrative, cohesive.
-
----
-
-## Axis 4: Button Voice
-
-The visual language of interactive elements within the page.
-
-### Options:
-
-**Primary/Secondary/Ghost**
-- Clear hierarchy: filled primary, outlined secondary, text-only ghost.
-- Best for: Standard applications, SaaS, forms.
-- Feels: Clear, conventional, accessible.
-
-**Primary/Secondary only**
-- No ghost buttons; all actions have visible backgrounds or borders.
-- Best for: Conservative interfaces, enterprise software.
-- Feels: Explicit, safe, traditional.
-
-**Outline-heavy**
-- Most buttons are outline/secondary, primary used sparingly.
-- Best for: Design-forward products, luxury brands.
-- Feels: Refined, minimal, sophisticated.
-
-**Icon-first**
-- Buttons dominated by icons with optional text labels.
-- Best for: Toolbars, dense interfaces, mobile apps.
-- Feels: Compact, visual, efficient.
-
-**Text-only**
-- No filled buttons; all actions are text links or underlined text.
-- Best for: Content sites, blogs, documentation.
-- Feels: Minimal, editorial, understated.
-
-**Size hierarchy**
-- Buttons sized by importance: large for primary, small for secondary.
-- Best for: Landing pages, marketing, hero CTAs.
-- Feels: Directed, scannable, purposeful.
-
-**Full-width (mobile)**
-- Buttons span full container width on small screens.
-- Best for: Mobile-first designs, checkout flows.
-- Feels: Touch-friendly, accessible, clear.
-
----
-
-## Axis 5: Image Treatment
-
-How images and visual media are presented within the layout.
-
-### Options:
-
-**Full-bleed**
-- Images span the full viewport width, edge to edge.
-- Best for: Hero sections, immersive storytelling, marketing.
-- Feels: Bold, expansive, modern.
-
-**Contained/inset**
-- Images within a max-width container, aligned with text.
-- Best for: Articles, documentation, standard layouts.
-- Feels: Contained, readable, traditional.
-
-**Rounded corners**
-- Images with border-radius (usually 8px-16px).
-- Best for: Card layouts, avatars, modern SaaS.
-- Feels: Friendly, modern, approachable.
-
-**Drop shadow**
-- Images with shadow, appearing to float above background.
-- Best for: Card UIs, product displays, photography portfolios.
-- Feels: Layered, tactile, dimensional.
-
-**No treatment**
-- Images with sharp corners, no shadow, flush with background.
-- Best for: Brutalist design, editorial, minimalist layouts.
-- Feels: Raw, direct, intentional.
-
-**Blur/overlay**
-- Images with blur, gradient overlay, or darkened treatment.
-- Best for: Hero sections, text-over-image, background media.
-- Feels: Atmospheric, focused, layered.
-
-**Masked/cropped**
-- Images clipped to specific shapes (circle, angled edge, blob).
-- Best for: Avatars, logos, creative layouts.
-- Feels: Styled, distinctive, designed.
-
----
-
-## Axis 6: Reveal Pattern
-
-How content and elements appear as the user interacts or scrolls.
-
-### Options:
-
-**Static**
-- All content visible immediately on load. No scroll-based animations.
-- Best for: Documentation, admin panels, content-heavy sites.
-- Feels: Fast, predictable, functional.
-
-**Scroll-triggered fade**
-- Elements fade in as they enter the viewport.
-- Best for: Marketing sites, long-form content, storytelling.
-- Feels: Progressive, polished, guided.
-
-**Scroll-triggered slide**
-- Elements slide up or in from the side on scroll.
-- Best for: Feature sections, case studies, portfolios.
-- Feels: Dynamic, engaging, modern.
-
-**Hover-reveal**
-- Content appears or changes on hover (cards, tooltips, previews).
-- Best for: Data tables, image grids, dense UIs.
-- Feels: Interactive, efficient, responsive.
-
-**Click-triggered expand**
-- Content expands on click (accordions, modals, dropdowns).
-- Best for: FAQs, settings, forms, navigation.
-- Feels: Controlled, user-directed, organized.
-
-**Staggered entrance**
-- Multiple elements animate in sequence on load or scroll.
-- Best for: Hero sections, onboarding, feature showcases.
-- Feels: Choreographed, premium, intentional.
-
-**Parallax**
-- Background moves at different speed than foreground.
-- Best for: Hero sections, marketing, creative portfolios.
-- Feels: Immersive, depth-filled, modern.
-
-**Skeleton loading**
-- Placeholder shapes shown while content loads.
-- Best for: Data-heavy apps, dashboards, mobile experiences.
-- Feels: Responsive, professional, prepared.
-
----
-
-## Using the Fingerprint
-
-To analyze a page, score each axis:
-1. Identify which option best describes the current implementation.
-2. Note inconsistencies (e.g., centered headings but left-aligned CTAs).
-3. Identify tells: if every axis uses the AI-default option, the design is likely generated.
-
-**AI-default tendencies:**
-- Section headings: centered or top-left without variation
-- Body composition: three-column card grids
-- Dividers: cards everywhere
-- Button voice: primary/secondary/ghost, no size hierarchy
-- Images: rounded corners with shadow
-- Reveal: scroll-triggered fade on every element
-
-**Authentic design** intentionally mixes options across axes to serve content and user needs.

package/.agents/skills/qk-ui-builder/references/themes/atmospheric.md

@@ -1,53 +0,0 @@
-# Theme: Atmospheric
-
-**Genre:** atmospheric  
-**Use case:** music, art, creative
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | dark (0–30% lightness) |
-| Display style | display-heavy |
-| Accent hue | chromatic-other (multi-hue) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(260, 20%, 5%);
-  --color-surface: hsl(260, 20%, 10%);
-  --color-text: hsl(260, 10%, 90%);
-  --color-text-muted: hsl(260, 5%, 55%);
-  --color-accent: hsl(280, 70%, 60%);
-  --color-accent-hover: hsl(280, 70%, 52%);
-  --color-accent-2: hsl(340, 60%, 55%);
-  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
-  --font-body: 'Space Grotesk', 'Helvetica Neue', sans-serif;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --shadow-sm: 0 2px 4px hsl(260, 20%, 2%);
-  --shadow-md: 0 8px 24px hsl(260, 20%, 2%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Photographic
-- ✅ Manifesto
-- ✅ Narrative Workflow
-- ❌ Index-First (too list-based)
-- ❌ Stat-Led (too data-dense)
-
-## Anti-Patterns (Atmospheric-specific)
-
-- ❌ Rigid grid layouts
-- ❌ System UI fonts
-- ❌ Bright single-accent highlights
-- ❌ Card-in-card structures
-
-## Voice
-
-- Poetic, abstract language: "Resonance", "Frequency", "Harmony"
-- Short, impactful phrases
-- No bullet points in hero sections

package/.agents/skills/qk-ui-builder/references/themes/carnival.md

@@ -1,52 +0,0 @@
-# Theme: Carnival
-
-**Genre:** playful  
-**Use case:** Consumer apps, events, marketing
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | light (>85% lightness) |
-| Display style | display-heavy |
-| Accent hue | warm (10–60°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(0, 0%, 100%);
-  --color-surface: hsl(45, 100%, 97%);
-  --color-text: hsl(20, 20%, 15%);
-  --color-text-muted: hsl(20, 10%, 45%);
-  --color-accent: hsl(25, 95%, 55%);
-  --color-accent-hover: hsl(25, 95%, 48%);
-  --font-display: 'Poppins', sans-serif;
-  --font-body: 'Poppins', sans-serif;
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --shadow-sm: 0 2px 4px hsl(25, 80%, 85%);
-  --shadow-md: 0 8px 24px hsl(25, 80%, 85%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Bento Grid
-- ✅ Marquee Hero
-- ✅ Feature Stack
-- ❌ Long Document (too formal)
-- ❌ Type Specimen (too restrained)
-
-## Anti-Patterns (Carnival-specific)
-
-- ❌ Flat backgrounds with no depth
-- ❌ Monochrome palettes
-- ❌ Minimalist whitespace-only layouts
-- ❌ System fonts only
-
-## Voice
-
-- Energetic, benefit-driven
-- Emoji sparingly (max 1 per section)
-- Questions in CTAs: "Ready to play?"

package/.agents/skills/qk-ui-builder/references/themes/cobalt.md

@@ -1,52 +0,0 @@
-# Theme: Cobalt
-
-**Genre:** modern-minimal  
-**Use case:** SaaS, developer tools, B2B products
-
-## Axes
-
-| Axis | Value |
-|------|-------|
-| Paper band | mid (30–85% lightness) |
-| Display style | geometric-sans |
-| Accent hue | cool (200–300°) |
-
-## Token Overrides
-
-```css
-:root {
-  --color-background: hsl(220, 20%, 98%);
-  --color-surface: hsl(220, 20%, 100%);
-  --color-text: hsl(220, 15%, 10%);
-  --color-text-muted: hsl(220, 10%, 45%);
-  --color-accent: hsl(220, 80%, 55%);
-  --color-accent-hover: hsl(220, 80%, 48%);
-  --font-display: 'Inter', sans-serif;
-  --font-body: 'Inter', sans-serif;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --shadow-sm: 0 1px 2px hsl(220, 15%, 90%);
-  --shadow-md: 0 4px 12px hsl(220, 15%, 90%);
-}
-```
-
-## Macrostructure Affinity
-
-- ✅ Workbench
-- ✅ Stat-Led
-- ✅ Index-First
-- ❌ Manifesto (too editorial)
-- ❌ Riso (too analog)
-
-## Anti-Patterns (Cobalt-specific)
-
-- ❌ Purple gradients (`linear-gradient(135deg, #a855f7, #3b82f6)`)
-- ❌ Rounded-full buttons with gradient text
-- ❌ 3-column icon cards
-- ❌ Hero with centered-everything layout
-
-## Voice
-
-- Short labels, sentence case
-- Action verbs first: "Get started", "View docs"
-- No exclamation marks in headings