Add typeset and arrange to website, docs, and all metadata

- Add to data.js (process steps, categories, relationships)
- Add to framework-viz.js (periodic table symbols and numbers)
- Create before/after demos for both commands
- Update command count 17→19 across all locations:
  index.html, cheatsheet.html, README, NOTICE, AGENTS,
  plugin.json, marketplace.json
- Add critique→typeset/arrange in relationship flow
- Add "Adding New Skills" checklist to CLAUDE.md so future
  skill additions don't miss any locations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude-plugin/marketplace.json

@@ -2,7 +2,7 @@
   "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
   "name": "impeccable",
   "metadata": {
-    "description": "Design fluency for AI harnesses. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design."
+    "description": "Design fluency for AI harnesses. 1 skill, 19 commands, and curated anti-patterns for impeccable frontend design."
   },
   "owner": {
     "name": "Paul Bakaus",
@@ -11,7 +11,7 @@
   "plugins": [
     {
       "name": "impeccable",
-      "description": "Design vocabulary and skills for frontend development. Includes 17 commands (/polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
+      "description": "Design vocabulary and skills for frontend development. Includes 19 commands (/polish, /distill, /audit, /typeset, /arrange, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
       "version": "1.3.0",
       "author": {
         "name": "Paul Bakaus",

.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "impeccable",
-  "description": "Design vocabulary and skills for frontend development. Includes 18 skills (17 user-invokable: /polish, /distill, /audit, /bolder, /quieter, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
+  "description": "Design vocabulary and skills for frontend development. Includes 20 skills (19 user-invokable: /polish, /distill, /audit, /typeset, /arrange, etc.) and an enhanced frontend-design skill with curated anti-patterns.",
   "version": "1.3.0",
   "author": {
     "name": "Paul Bakaus",

AGENTS.md

@@ -1,6 +1,6 @@
 # Impeccable
 
-The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
+The vocabulary you didn't know you needed. 1 skill, 19 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
 
 ## Repository Purpose
 

CLAUDE.md

@@ -50,3 +50,18 @@ When bumping the version, update **all** of these locations to keep them in sync
 - `.claude-plugin/plugin.json` → `version`
 - `.claude-plugin/marketplace.json` → `plugins[0].version`
 - `public/index.html` → hero version link text + new changelog entry
+
+## Adding New Skills
+
+When adding a new user-invokable skill, update the command count in **all** of these locations:
+
+- `public/index.html` → meta descriptions, hero box, section lead
+- `public/cheatsheet.html` → meta description, subtitle, `commandCategories`, `commandRelationships`
+- `public/js/data.js` → `commandProcessSteps`, `commandCategories`, `commandRelationships`
+- `public/js/components/framework-viz.js` → `commandSymbols`, `commandNumbers`
+- `public/js/demos/commands/` → new demo file + import in `index.js`
+- `README.md` → intro, command count, commands table
+- `NOTICE.md` → steering commands count
+- `AGENTS.md` → intro command count
+- `.claude-plugin/plugin.json` → description
+- `.claude-plugin/marketplace.json` → metadata description + plugin description

NOTICE.md

@@ -13,5 +13,5 @@ The `frontend-design` skill in this project builds on Anthropic's original front
 
 This project extends the original with:
 - 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing)
-- 17 steering commands
+- 19 steering commands
 - Expanded patterns and anti-patterns

README.md

@@ -1,6 +1,6 @@
 # Impeccable
 
-The vocabulary you didn't know you needed. 1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.
+The vocabulary you didn't know you needed. 1 skill, 19 commands, and curated anti-patterns for impeccable frontend design.
 
 > **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.
 
@@ -12,7 +12,7 @@ Every LLM learned from the same generic templates. Without guidance, you get the
 
 Impeccable fights that bias with:
 - **An expanded skill** with 7 domain-specific reference files ([view source](source/skills/frontend-design/))
-- **17 steering commands** to audit, review, polish, distill, animate, and more
+- **19 steering commands** to audit, review, polish, distill, animate, and more
 - **Curated anti-patterns** that explicitly tell the AI what NOT to do
 
 ## What's Included
@@ -31,7 +31,7 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou
 | [responsive-design](source/skills/frontend-design/reference/responsive-design.md) | Mobile-first, fluid design, container queries |
 | [ux-writing](source/skills/frontend-design/reference/ux-writing.md) | Button labels, error messages, empty states |
 
-### 17 Commands
+### 19 Commands
 
 | Command | What it does |
 |---------|--------------|
@@ -52,6 +52,8 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou
 | `/extract` | Pull into reusable components |
 | `/adapt` | Adapt for different devices |
 | `/onboard` | Design onboarding flows |
+| `/typeset` | Fix font choices, hierarchy, sizing |
+| `/arrange` | Fix layout, spacing, visual rhythm |
 
 ### Anti-Patterns
 

public/cheatsheet.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Impeccable Command Cheatsheet</title>
-  <meta name="description" content="Quick reference for all 17 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
+  <meta name="description" content="Quick reference for all 19 Impeccable commands. Print-friendly cheatsheet for design fluency in AI harnesses.">
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -160,7 +160,7 @@
 <body>
   <header>
     <h1>Impeccable Commands</h1>
-    <p class="subtitle">Quick reference for all 17 design commands</p>
+    <p class="subtitle">Quick reference for all 19 design commands</p>
     <a href="/" class="back-link">&larr; Back to impeccable.style</a>
   </header>
 
@@ -201,13 +201,15 @@
       'delight': 'enhancement',
       'extract': 'system',
       'adapt': 'adaptation',
-      'onboard': 'enhancement'
+      'onboard': 'enhancement',
+      'typeset': 'enhancement',
+      'arrange': 'enhancement'
     };
 
     const commandRelationships = {
       'teach-impeccable': { flow: 'One-time project context gathering' },
       'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Technical quality audit' },
-      'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter'], flow: 'UX and design review' },
+      'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'arrange'], flow: 'UX and design review' },
       'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Align with design system' },
       'polish': { flow: 'Final pass before shipping' },
       'optimize': { flow: 'Performance improvements' },
@@ -221,7 +223,9 @@
       'delight': { combinesWith: ['bolder', 'animate'], flow: 'Add personality' },
       'extract': { flow: 'Create design system elements' },
       'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Different devices/contexts' },
-      'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Onboarding & empty states' }
+      'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Onboarding & empty states' },
+      'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Fix typography' },
+      'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Fix layout & spacing' }
     };
 
     async function loadCommands() {

public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Impeccable: The missing upgrade to Anthropic's frontend-design skill</title>
-  <meta name="description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+  <meta name="description" content="1 skill, 19 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
   <meta name="theme-color" content="#1a1a1a">
   <link rel="canonical" href="https://impeccable.style">
 
@@ -12,7 +12,7 @@
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://impeccable.style">
   <meta property="og:title" content="Impeccable: Design skills for AI harnesses">
-  <meta property="og:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
+  <meta property="og:description" content="1 skill, 19 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
   <meta property="og:image" content="https://impeccable.style/og-image.jpg">
 
   <!-- Twitter -->
@@ -20,7 +20,7 @@
   <meta name="twitter:site" content="@pbakaus">
   <meta name="twitter:creator" content="@pbakaus">
   <meta name="twitter:title" content="Impeccable: Design skills for AI harnesses">
-  <meta name="twitter:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.">
+  <meta name="twitter:description" content="1 skill, 19 commands, and curated anti-patterns for impeccable frontend design.">
   <meta name="twitter:image" content="https://impeccable.style/og-image.jpg">
 
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
@@ -57,7 +57,7 @@
           <div class="hero-included-items">
             <span>Enhanced <em>frontend-design</em> skill + anti-patterns</span>
             <span class="hero-included-sep">·</span>
-            <span>17 design skills: /polish, /audit, /distill, /bolder...</span>
+            <span>19 design skills: /polish, /audit, /typeset, /arrange...</span>
           </div>
         </div>
 
@@ -162,7 +162,7 @@
         <h2 class="section-title">The Framework</h2>
       </div>
       <div class="solution-content">
-        <p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 17 commands that form the language of design.</p>
+        <p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 19 commands that form the language of design.</p>
 
         <div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
           <!-- Subway map generated by JS -->

public/js/components/framework-viz.js

@@ -42,7 +42,9 @@ const commandSymbols = {
 	delight: 'De',
 	bolder: 'Bo',
 	quieter: 'Qu',
-	onboard: 'On'
+	onboard: 'On',
+	typeset: 'Ty',
+	arrange: 'Ar'
 };
 
 // Atomic numbers (just for visual interest)
@@ -63,7 +65,9 @@ const commandNumbers = {
 	delight: 13,
 	bolder: 14,
 	quieter: 15,
-	onboard: 16
+	onboard: 16,
+	typeset: 17,
+	arrange: 18
 };
 
 export class PeriodicTable {

public/js/data.js

@@ -53,7 +53,9 @@ export const commandProcessSteps = {
   'delight': ['Identify', 'Design', 'Implement'],
   'extract': ['Identify', 'Abstract', 'Document'],
   'adapt': ['Analyze', 'Adjust', 'Optimize'],
-  'onboard': ['Map', 'Design', 'Guide']
+  'onboard': ['Map', 'Design', 'Guide'],
+  'typeset': ['Assess', 'Select', 'Scale', 'Refine'],
+  'arrange': ['Assess', 'Grid', 'Rhythm', 'Balance']
 };
 
 export const commandCategories = {
@@ -73,7 +75,9 @@ export const commandCategories = {
   'delight': 'enhancement',
   'extract': 'system',
   'adapt': 'adaptation',
-  'onboard': 'enhancement'
+  'onboard': 'enhancement',
+  'typeset': 'enhancement',
+  'arrange': 'enhancement'
 };
 
 // Skill relationships - now consolidated into frontend-design skill
@@ -88,7 +92,7 @@ export const skillRelationships = {
 export const commandRelationships = {
   'teach-impeccable': { flow: 'Setup: One-time project context gathering' },
   'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Diagnostic: Technical quality audit' },
-  'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter'], flow: 'Diagnostic: UX and design review' },
+  'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'arrange'], flow: 'Diagnostic: UX and design review' },
   'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Quality: Align with design system' },
   'polish': { flow: 'Quality: Final pass before shipping' },
   'optimize': { flow: 'Quality: Performance improvements' },
@@ -102,6 +106,8 @@ export const commandRelationships = {
   'delight': { combinesWith: ['bolder', 'animate'], flow: 'Enhancement: Add personality' },
   'extract': { flow: 'System: Create design system elements' },
   'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Adaptation: Different devices/contexts' },
-  'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Enhancement: Onboarding & empty states' }
+  'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Enhancement: Onboarding & empty states' },
+  'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Enhancement: Fix typography' },
+  'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Enhancement: Fix layout & spacing' }
 };
 

public/js/demos/commands/arrange.js

@@ -0,0 +1,50 @@
+// Arrange command demo - shows monotonous equal spacing becoming rhythmic and intentional
+export default {
+  id: 'arrange',
+  caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
+
+  before: `
+    <div style="width: 100%; max-width: 240px; padding: 16px;">
+      <div style="text-align: center; margin-bottom: 16px;">
+        <div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
+          <div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
+          <div style="font-size: 13px; color: #333;">Alice Chen</div>
+          <div style="font-size: 12px; color: #888;">Designer</div>
+        </div>
+        <div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
+          <div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
+          <div style="font-size: 13px; color: #333;">Bob Park</div>
+          <div style="font-size: 12px; color: #888;">Engineer</div>
+        </div>
+      </div>
+    </div>
+  `,
+
+  after: `
+    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
+      <div style="margin-bottom: 20px;">
+        <div style="font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 4px;">Team</div>
+        <div style="font-size: 1.05rem; font-weight: 600; color: var(--color-ink);">Members</div>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 6px;">
+        <div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
+          <div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
+          <div style="flex: 1;">
+            <div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
+            <div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
+          <div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
+          <div style="flex: 1;">
+            <div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
+            <div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+};

public/js/demos/commands/index.js

@@ -16,6 +16,8 @@ import delight from "./delight.js";
 import extract from "./extract.js";
 import adapt from "./adapt.js";
 import onboard from "./onboard.js";
+import typeset from "./typeset.js";
+import arrange from "./arrange.js";
 
 export const commandDemos = {
 	normalize,
@@ -34,6 +36,8 @@ export const commandDemos = {
 	extract,
 	adapt,
 	onboard,
+	typeset,
+	arrange,
 };
 
 export function getCommandDemo(commandId) {

public/js/demos/commands/typeset.js

@@ -0,0 +1,23 @@
+// Typeset command demo - shows generic typography becoming intentional and hierarchical
+export default {
+  id: 'typeset',
+  caption: 'Generic system fonts → Intentional type hierarchy',
+
+  before: `
+    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: Arial, sans-serif;">
+      <div style="font-size: 15px; font-weight: bold; color: #333; margin-bottom: 6px;">Project Update</div>
+      <div style="font-size: 14px; font-weight: bold; color: #555; margin-bottom: 8px;">Q1 Design Sprint</div>
+      <p style="font-size: 14px; color: #666; line-height: 1.4; margin: 0 0 8px;">The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.</p>
+      <div style="font-size: 13px; color: #888;">Updated 2 hours ago</div>
+    </div>
+  `,
+
+  after: `
+    <div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
+      <div style="font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 8px;">Project Update</div>
+      <div style="font-family: 'Cormorant Garamond', serif; font-size: 1.375rem; font-weight: 600; color: var(--color-ink); line-height: 1.15; margin-bottom: 10px;">Q1 Design Sprint</div>
+      <p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-ink) 70%, transparent); line-height: 1.6; margin: 0 0 12px; max-width: 32ch;">The team completed the redesign of the dashboard. All components reviewed and approved.</p>
+      <div style="font-size: 0.75rem; color: var(--color-ash); font-variant-numeric: tabular-nums;">Updated 2 hours ago</div>
+    </div>
+  `
+};