bullframe.css 6.2.1 → 6.3.0

package/dist/skills/bullframe-media/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: bullframe-media
+description: Build galleries, responsive embeds and media grids with Bullframe CSS. Use when creating an album, photo grid, video or map embed, figure with caption, or mixed media cards.
+bullframe: '>=6.1.0 <7.0.0'
+builds: [bullframe.css, bullframe-dark.css, bullframe-system-default.css]
+requires: [bullframe-core]
+docs: ['/utilities/embeds', '/utilities/filters', '/utilities/grid', '/components/cards']
+---
+
+# Media
+
+<!-- bf-absent: bf-gallery, bf-media, bf-card, bf-aspect-ratio, bf-col-md-4 -->
+
+Media layouts in Bullframe are grid columns plus embed utilities. Cards and galleries are
+composed markup; there is no gallery or card class.
+
+## When to use
+
+An album, portfolio grid, video or map embed, captioned figure, filter chip bar over a
+media set, or any page whose main content is images or embeds.
+
+## Inputs to gather
+
+Item list (image or embed URL, title, caption, meaningful vs decorative), grid density
+(two or three columns), whether a filter bar is needed, and light / dark / system theme.
+
+## Rules
+
+1. Wrap iframes, video and map-like boxes in `.bf-embed-responsive` (16:9). Add
+   `.bf-embed-responsive--4-3` for a taller ratio. Non-replaced content inside the box
+   needs `.bf-embed-responsive--item`.
+2. There is no `.bf-card` or `.bf-gallery`. A media card is an `<article>` with a border,
+   radius and padding written as `var(--bf-*)` declarations, or an image plus a body
+   block.
+3. Lay out cards with `.bf-row` and `.bf-col-*` that sum to 12 or less. Use
+   `.bf-container.bf-container--break-md` so columns stack below 768px.
+4. Meaningful images take real `alt` text. Decorative images take `alt=""`.
+5. Prefer `<figure>` with `<figcaption>` for a single captioned image.
+6. A filter bar is a `<nav aria-label="…">` of `.bf-btn` links; mark the active filter with
+   `aria-current="page"`.
+7. Optional image treatments use `.bf-filter-grayscale`, `.bf-filter-blur`,
+   `.bf-filter-invert`, `.bf-filter-dim-images` or `.bf-filter-none`. Do not invent filter
+   classes.
+8. Keep custom CSS out of the page unless the task asks for crop or object-fit rules that
+   tokens cannot cover.
+
+## Recipe
+
+1. Pick a class-based build (`bullframe-core` has the table).
+2. Emit the scaffold with skip link and container.
+3. Optional hero row, then optional filter `<nav>`.
+4. Emit the grid: one `.bf-row`, equal `.bf-col-4` or `.bf-col-6` children.
+5. Each cell is an `<article>` or `<figure>` with image or embed, then title and caption.
+6. Re-read and delete any class that is not in `api.json`.
+
+## Example
+
+[`examples/album.html`](examples/album.html) is a six-tile album with a filter bar,
+captioned articles and a 16:9 embed section. Placeholders stand in for real assets.
+
+## Expected output
+
+One HTML file with responsive embeds and a grid whose column classes sum to at most 12
+per row. No gallery library and no invented media classes.
+
+## Failure modes
+
+- Inventing `.bf-gallery`, `.bf-media`, `.bf-card` or `.bf-aspect-ratio`.
+- A bare `<iframe>` or `<video>` without `.bf-embed-responsive`.
+- Missing or placeholder `alt` on meaningful photos.
+- Per-breakpoint column classes such as `.bf-col-md-4` (they do not exist).
+- Filter chips built from unlabelled `<div>`s instead of a `<nav>` and buttons or links.
+
+## Do not
+
+- Do not add a lightbox or carousel library unless the task explicitly asks for one.
+- Do not put decorative images in the accessibility tree with non-empty alt text.
+- Do not use the classless build for a multi-column media grid; it has no grid utilities.
+
+## Canonical docs
+
+- Embeds: <https://bullframecss.marcopontili.com/utilities/embeds.md>
+- Filters: <https://bullframecss.marcopontili.com/utilities/filters.md>
+- Grid: <https://bullframecss.marcopontili.com/utilities/grid.md>
+- Cards: <https://bullframecss.marcopontili.com/components/cards.md>
+- Live album and media examples: <https://bullframecss.marcopontili.com/examples>

package/dist/skills/bullframe-media/examples/album.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Coastal light · Portfolio</title>
+    <meta name="description" content="Six-frame portfolio album built with Bullframe media utilities." />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
+  </head>
+  <body>
+    <a class="bf-skip-link" href="#main-content">Skip to content</a>
+
+    <main id="main-content" class="bf-container bf-container--break-md bf-p-b-4">
+      <header class="bf-m-b-3">
+        <div class="bf-row" style="align-items: end">
+          <div class="bf-col-8">
+            <p class="bf-m-b-1"><small>Portfolio · Spring 2026</small></p>
+            <h1 class="bf-m-b-1">Coastal light</h1>
+            <p class="bf-lead bf-m-b-0">Six frames from a weekend shoot: harbors, night streets, forest paths and studio stills.</p>
+          </div>
+          <div class="bf-col-4 bf-t-right">
+            <p class="bf-m-b-1"><small>12 photos · 3 locations</small></p>
+            <a class="bf-btn bf-btn--primary" href="#reel">Watch reel</a>
+          </div>
+        </div>
+      </header>
+
+      <nav class="bf-m-b-3" aria-label="Filter photos">
+        <a class="bf-btn bf-btn--primary" href="#" aria-current="page">All</a>
+        <a class="bf-btn" href="#">Outdoors</a>
+        <a class="bf-btn" href="#">City</a>
+        <a class="bf-btn" href="#">Studio</a>
+      </nav>
+
+      <div class="bf-row">
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%23c7d2e0' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23344' font-family='sans-serif' font-size='28'%3EHarbor%3C/text%3E%3C/svg%3E" width="640" height="400" alt="Harbor at sunrise with dock pilings" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Sunrise dock</h2>
+              <p class="bf-m-b-0">Harbor light study · ISO 200</p>
+            </div>
+          </article>
+        </div>
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%231e293b' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23e2e8f0' font-family='sans-serif' font-size='28'%3ENight%3C/text%3E%3C/svg%3E" width="640" height="400" alt="City skyline at night with lit windows" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Night grid</h2>
+              <p class="bf-m-b-0">Downtown skyline · 1/30s</p>
+            </div>
+          </article>
+        </div>
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img class="bf-filter-grayscale" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%234d7c5a' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23f0fdf4' font-family='sans-serif' font-size='28'%3EForest%3C/text%3E%3C/svg%3E" width="640" height="400" alt="Sunlit path through green forest" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Forest path</h2>
+              <p class="bf-m-b-0">Trail series · morning</p>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div class="bf-row">
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%23e7e5e4' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23444' font-family='sans-serif' font-size='28'%3EStudio%3C/text%3E%3C/svg%3E" width="640" height="400" alt="Product on seamless studio backdrop" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Studio still</h2>
+              <p class="bf-m-b-0">Product pack · softbox</p>
+            </div>
+          </article>
+        </div>
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%23d97706' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23fff7ed' font-family='sans-serif' font-size='28'%3EWarm%3C/text%3E%3C/svg%3E" width="640" height="400" alt="Warm desert dusk with grain" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Warm grain</h2>
+              <p class="bf-m-b-0">Film scan · Portra 400</p>
+            </div>
+          </article>
+        </div>
+        <div class="bf-col-4">
+          <article class="bf-m-b-2" style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); overflow: hidden">
+            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='400' viewBox='0 0 640 400'%3E%3Crect fill='%230891b2' width='640' height='400'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23ecfeff' font-family='sans-serif' font-size='28'%3ECyan%3C/text%3E%3C/svg%3E" width="640" height="400" alt="Cyan geometric poster print" style="display: block; width: 100%; height: auto" />
+            <div style="padding: var(--bf-spacing-xl)">
+              <h2 class="bf-m-t-0" style="font-size: 1.15rem">Cyan print</h2>
+              <p class="bf-m-b-0">Poster draft · A2</p>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <section id="reel" class="bf-m-t-3">
+        <h2>Weekend reel · 16:9</h2>
+        <p>Wrap players in <code>.bf-embed-responsive</code>. Default ratio is 16:9.</p>
+        <div class="bf-embed-responsive">
+          <div class="bf-embed-responsive--item bf-t-center bf-p-4" role="img" aria-label="Placeholder for a 16:9 portfolio reel" style="background: var(--bf-light); display: flex; align-items: center; justify-content: center">Reel placeholder</div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/dist/skills/bullframe-theming/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: bullframe-theming
+description: Theme Bullframe CSS with token overrides, dark or system builds, and a short project stylesheet. Use when branding colours or fonts, picking a dark or prefers-color-scheme build, or adding custom.css on top of one base build.
+bullframe: '>=6.1.0 <7.0.0'
+builds: [bullframe.css, bullframe-dark.css, bullframe-system-default.css, bullframe-classless.css, bullframe-classless-dark.css, bullframe-classless-system-default.css, bullframe-utilities.css]
+requires: [bullframe-core]
+docs: ['/theming', '/theming/dark-mode', '/theming/customization', '/variables']
+---
+
+# Theming
+
+<!-- bf-absent: bf-theme, bf-theme-toggle, bf-dark-mode -->
+
+Bullframe themes through CSS custom properties and build choice. Override `--bf-*` tokens
+after the stylesheet; do not fork the framework or invent theme classes.
+
+## When to use
+
+Brand colour or type, a dark or system-prefers page, a short `custom.css` on top of one
+base build, or any task that changes appearance without new component CSS.
+
+## Inputs to gather
+
+Brand primary colour (and a hover/focus sibling), optional font stacks, light / dark /
+system preference, and whether overrides are global (`:root`) or scoped to a class.
+
+## Rules
+
+1. Link exactly one base build. Dark is `bullframe-dark.css`; OS-follows is
+   `bullframe-system-default.css` (or the classless equivalents). Do not stack two bases.
+2. Override tokens, not selectors. Set `--bf-blue`, `--bf-blue-light`,
+   `--bf-focus-ring-color`, grays, and font stacks. Links, primary buttons and focus rings
+   follow those tokens.
+3. Load project CSS after Bullframe. Prefer a `<style>` block or one `custom.css` link.
+   Keep it to token overrides plus a few layout or type rules.
+4. Scope when the brand is not site-wide: put the overrides on a class such as
+   `.brand`, not on every page.
+5. Replaced blues must clear WCAG AA contrast (4.5:1) on the page background. The shipped
+   blues already do; a replacement has to match that bar.
+6. Do not add a theme-toggle script to get dark mode. Pick a `-dark` or `-system-default`
+   build instead.
+7. Leave the HTML alone when tokens suffice. Prefer element styles and utilities over
+   restyling `.bf-btn` selectors unless a token cannot reach the property.
+
+## Recipe
+
+1. Choose the build from `bullframe-core` (light, dark, or system; class-based or
+   classless).
+2. Emit the page scaffold.
+3. Add a token block on `:root` or a brand scope class.
+4. If a few layout rules are needed, keep them in the same stylesheet and name them for
+   the project, not as fake `.bf-*` classes.
+5. Check contrast on primary buttons, links and body text.
+
+## Example
+
+[`examples/branded.html`](examples/branded.html) is a class-based page with a scoped brand
+class: teal primary tokens, serif headings, and no second Bullframe build.
+
+## Expected output
+
+One HTML file that links exactly one Bullframe stylesheet, overrides only real `--bf-*`
+tokens from `api.json`, and needs no JavaScript for theming.
+
+## Failure modes
+
+- Linking `bullframe.css` and `bullframe-dark.css` together.
+- Inventing `.bf-theme`, `.bf-theme-toggle` or `.bf-dark-mode`.
+- Hard-coding `#0f766e` on buttons instead of setting `--bf-blue`.
+- Dropping contrast below AA when swapping the primary colour.
+- A large custom stylesheet that reimplements grid, spacing or type scales.
+
+## Do not
+
+- Do not write a theme toggle for OS dark mode; use a `-system-default` build.
+- Do not put token overrides in a stylesheet loaded before Bullframe.
+- Do not rebuild the framework from source for a colour change.
+- Do not set `outline: none`; tune `--bf-focus-ring-*` instead.
+
+## Canonical docs
+
+- Theming: <https://bullframecss.marcopontili.com/theming.md>
+- Dark mode: <https://bullframecss.marcopontili.com/theming/dark-mode.md>
+- Customization: <https://bullframecss.marcopontili.com/theming/customization.md>
+- Variables: <https://bullframecss.marcopontili.com/variables.md>

package/dist/skills/bullframe-theming/examples/branded.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Northwind Press · Seasonal notes</title>
+    <meta name="description" content="Sample branded page using Bullframe token overrides." />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
+    <style>
+      .brand {
+        --bf-blue: #0f766e;
+        --bf-blue-light: #0d9488;
+        --bf-blue-light-extra: #ccfbf1;
+        --bf-dark: #134e4a;
+        --bf-gray-dark: #3f5f5b;
+        --bf-gray-light: #c7e0db;
+        --bf-light: #f0fdfa;
+        --bf-focus-ring-color: #0f766e;
+        --bf-font-serif: Georgia, 'Times New Roman', serif;
+        color: var(--bf-dark);
+        background: var(--bf-light);
+      }
+
+      .brand h1,
+      .brand h2 {
+        font-family: var(--bf-font-serif);
+      }
+    </style>
+  </head>
+  <body class="brand">
+    <a class="bf-skip-link" href="#main-content">Skip to content</a>
+
+    <main id="main-content" class="bf-container bf-container--break-md bf-p-b-4">
+      <p class="bf-m-b-1"><small>Northwind Press</small></p>
+      <h1>Seasonal notes from the shop</h1>
+      <p class="bf-lead">Colours and type come from token overrides on a brand scope class. The HTML stays ordinary Bullframe markup.</p>
+      <p>
+        <a class="bf-btn bf-btn--primary" href="#notes">Read the notes</a>
+        <a class="bf-btn" href="https://bullframecss.marcopontili.com/theming">Theming docs</a>
+      </p>
+
+      <div id="notes" class="bf-row bf-m-t-3">
+        <div class="bf-col-6">
+          <article style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+            <h2 class="bf-m-t-0">Token overrides</h2>
+            <p class="bf-m-b-0">Set <code>--bf-blue</code>, grays and font stacks. Buttons and links pick them up.</p>
+          </article>
+        </div>
+        <div class="bf-col-6">
+          <article style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+            <h2 class="bf-m-t-0">One base build</h2>
+            <p class="bf-m-b-0">Light, dark or system-default. Never stack two Bullframe stylesheets.</p>
+          </article>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

package/dist/skills/index.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "docs": "https://bullframecss.marcopontili.com",
   "api": "api.json",
   "agentsBlock": "AGENTS.bullframe.md",
@@ -34,6 +34,30 @@
         "SKILL.md"
       ]
     },
+    {
+      "name": "bullframe-components",
+      "description": "Compose navigation, cards and native dialog modals with Bullframe CSS. Use when building a header nav, breadcrumb, pagination, content or media cards, or a confirm dialog without a component library.",
+      "path": "bullframe-components/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/components/navigation",
+        "https://bullframecss.marcopontili.com/components/cards",
+        "https://bullframecss.marcopontili.com/components/modals",
+        "https://bullframecss.marcopontili.com/components/button-patterns"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/components.html"
+      ]
+    },
     {
       "name": "bullframe-convert",
       "description": "Convert existing HTML and CSS to Bullframe CSS. Use when migrating a page off Bootstrap, Tailwind, a hand-rolled stylesheet, or an older Bullframe version, and when asked to remove custom CSS in favour of the framework.",
@@ -129,6 +153,58 @@
         "SKILL.md",
         "examples/landing.html"
       ]
+    },
+    {
+      "name": "bullframe-media",
+      "description": "Build galleries, responsive embeds and media grids with Bullframe CSS. Use when creating an album, photo grid, video or map embed, figure with caption, or mixed media cards.",
+      "path": "bullframe-media/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/utilities/embeds",
+        "https://bullframecss.marcopontili.com/utilities/filters",
+        "https://bullframecss.marcopontili.com/utilities/grid",
+        "https://bullframecss.marcopontili.com/components/cards"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/album.html"
+      ]
+    },
+    {
+      "name": "bullframe-theming",
+      "description": "Theme Bullframe CSS with token overrides, dark or system builds, and a short project stylesheet. Use when branding colours or fonts, picking a dark or prefers-color-scheme build, or adding custom.css on top of one base build.",
+      "path": "bullframe-theming/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css",
+        "bullframe-classless.css",
+        "bullframe-classless-dark.css",
+        "bullframe-classless-system-default.css",
+        "bullframe-utilities.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/theming",
+        "https://bullframecss.marcopontili.com/theming/dark-mode",
+        "https://bullframecss.marcopontili.com/theming/customization",
+        "https://bullframecss.marcopontili.com/variables"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/branded.html"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "type": "module",
   "description": "Bullframe CSS is a lightweight CSS framework for fast, responsive, accessible UIs. Semantic by default. Any stack. Classless when you want it. System dark built in. Seven builds, solid cross-browser support.",
   "main": "dist/css/bullframe.css",
@@ -37,12 +37,14 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "prepack": "node scripts/npm-readme-light.mjs prepack",
+    "postpack": "node scripts/npm-readme-light.mjs postpack",
     "prepublishOnly": "npm run build && npm run skills:build",
     "lint": "stylelint \"src/**/*.css\"",
     "lint:fix": "stylelint \"src/**/*.css\" --fix",
     "lint:html": "html-validate \"src/**/*.html\"",
-    "format": "prettier --write \"src/**/*.css\" \"src/**/*.html\" \"src/**/*.mjs\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
-    "format:check": "prettier --check \"src/**/*.css\" \"src/**/*.html\" \"src/**/*.mjs\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
+    "format": "prettier --write \"src/**/*.css\" \"src/**/*.html\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
+    "format:check": "prettier --check \"src/**/*.css\" \"src/**/*.html\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
     "test:e2e": "playwright test",
     "test:e2e:update": "playwright test --update-snapshots",
     "test:e2e:sync-from-ci": "node scripts/sync-e2e-baselines-from-ci.mjs",
@@ -58,8 +60,8 @@
     "examples:shots": "node scripts/capture-example-screenshots.mjs",
     "kitchen-sink:variants": "node scripts/generate-kitchen-sink-variants.mjs",
     "brand:icons": "node scripts/render-brand-icons.mjs",
-    "brand:images": "node scripts/generate-brand-images.mjs",
-    "brand:images:check": "node scripts/generate-brand-images.mjs --check"
+    "brand:images": "node .github/brand/render.mjs",
+    "brand:images:check": "node .github/brand/render.mjs --check"
   },
   "repository": {
     "type": "git",
@@ -97,9 +99,11 @@
     "cssnano": "^7.1.2",
     "glob": "^13.0.1",
     "html-validate": "^10.7.0",
+    "playwright": "1.62.1",
     "postcss": "^8.5.12",
     "postcss-import": "^16.1.1",
     "prettier": "^3.5.3",
+    "sharp": "0.35.4",
     "stylelint": "^17.1.1",
     "stylelint-config-standard": "^40.0.0",
     "vite": "^7.3.1",