From 45bcf7b4854d6d7f4a8a5d51a39649ccdd39d5fb Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sun, 15 Mar 2026 19:26:35 -0700 Subject: [PATCH] Add typeset and arrange to website, docs, and all metadata MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- .claude-plugin/marketplace.json | 4 +-- .claude-plugin/plugin.json | 2 +- AGENTS.md | 2 +- CLAUDE.md | 15 ++++++++ NOTICE.md | 2 +- README.md | 8 +++-- public/cheatsheet.html | 14 +++++--- public/index.html | 10 +++--- public/js/components/framework-viz.js | 8 +++-- public/js/data.js | 14 +++++--- public/js/demos/commands/arrange.js | 50 +++++++++++++++++++++++++++ public/js/demos/commands/index.js | 4 +++ public/js/demos/commands/typeset.js | 23 ++++++++++++ 13 files changed, 132 insertions(+), 24 deletions(-) create mode 100644 public/js/demos/commands/arrange.js create mode 100644 public/js/demos/commands/typeset.js diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 39e681432..a40e07883 100644 --- a/.claude-plugin/marketplace.json +++ b/.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", diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index ff9296bf0..ae647c5c8 100644 --- a/.claude-plugin/plugin.json +++ b/.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", diff --git a/AGENTS.md b/AGENTS.md index 03e9b0a6b..3119602a7 100644 --- a/AGENTS.md +++ b/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 diff --git a/CLAUDE.md b/CLAUDE.md index 55507dd63..33de089a2 100644 --- a/CLAUDE.md +++ b/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 diff --git a/NOTICE.md b/NOTICE.md index 1920a3307..c74d45c23 100644 --- a/NOTICE.md +++ b/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 diff --git a/README.md b/README.md index 973da610e..fa200af4d 100644 --- a/README.md +++ b/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 diff --git a/public/cheatsheet.html b/public/cheatsheet.html index 179a09307..094b782f4 100644 --- a/public/cheatsheet.html +++ b/public/cheatsheet.html @@ -4,7 +4,7 @@ Impeccable Command Cheatsheet - + @@ -160,7 +160,7 @@

Impeccable Commands

-

Quick reference for all 17 design commands

+

Quick reference for all 19 design commands

← Back to impeccable.style
@@ -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() { diff --git a/public/index.html b/public/index.html index 220094f3c..bcbf78be0 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ Impeccable: The missing upgrade to Anthropic's frontend-design skill - + @@ -12,7 +12,7 @@ - + @@ -20,7 +20,7 @@ - + @@ -57,7 +57,7 @@
Enhanced frontend-design skill + anti-patterns · - 17 design skills: /polish, /audit, /distill, /bolder... + 19 design skills: /polish, /audit, /typeset, /arrange...
@@ -162,7 +162,7 @@

The Framework

-

One comprehensive skill with deep expertise, plus 17 commands that form the language of design.

+

One comprehensive skill with deep expertise, plus 19 commands that form the language of design.

diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index bac0e0bda..a20455872 100644 --- a/public/js/components/framework-viz.js +++ b/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 { diff --git a/public/js/data.js b/public/js/data.js index 15f3f6cab..2e0c49cde 100644 --- a/public/js/data.js +++ b/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' } }; diff --git a/public/js/demos/commands/arrange.js b/public/js/demos/commands/arrange.js new file mode 100644 index 000000000..e9299c6a8 --- /dev/null +++ b/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: ` +
+
+
Team Members
+
+
+
+
+
Alice Chen
+
Designer
+
+
+
+
Bob Park
+
Engineer
+
+
+
+ `, + + after: ` +
+
+
Team
+
Members
+
+
+
+
AC
+
+
Alice Chen
+
Designer
+
+
+
+
BP
+
+
Bob Park
+
Engineer
+
+
+
+
+ ` +}; diff --git a/public/js/demos/commands/index.js b/public/js/demos/commands/index.js index 95c30f12a..f57744725 100644 --- a/public/js/demos/commands/index.js +++ b/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) { diff --git a/public/js/demos/commands/typeset.js b/public/js/demos/commands/typeset.js new file mode 100644 index 000000000..2f226e054 --- /dev/null +++ b/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: ` +
+
Project Update
+
Q1 Design Sprint
+

The team completed the redesign of the dashboard. All components have been reviewed and approved by stakeholders.

+
Updated 2 hours ago
+
+ `, + + after: ` +
+
Project Update
+
Q1 Design Sprint
+

The team completed the redesign of the dashboard. All components reviewed and approved.

+
Updated 2 hours ago
+
+ ` +};