From 83330a66cbfc530ca03708cb58a95525f6acd77f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 6 Apr 2026 21:34:56 -0700 Subject: [PATCH] Update commands grid layout and impeccable command demo Adds the three /impeccable usage modes (freeform, teach, craft) to the command demo, with a clearer multi-pane layout. Also tightens the commands grid spacing on the site and refreshes the framework viz and glass terminal styles for consistency. Co-Authored-By: Claude Opus 4.6 (1M context) --- public/css/styles.css | 5 +- public/css/workflow.css | 5 +- public/js/components/framework-viz.js | 16 ++++++ public/js/components/glass-terminal.js | 18 +++++++ public/js/demo-renderer.js | 75 ++++++++++++++++++-------- public/js/generated/counts.js | 2 +- 6 files changed, 96 insertions(+), 25 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 4b4fd4548..a4d28459a 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -204,7 +204,7 @@ display: grid; grid-template-columns: 38% 1fr; grid-template-rows: 1fr auto; - gap: 0 var(--spacing-xl); + gap: 0 var(--spacing-2xl); padding: var(--spacing-lg) var(--spacing-lg); opacity: 0; pointer-events: none; @@ -393,6 +393,9 @@ display: flex; align-items: center; justify-content: center; + max-width: 420px; + background: none; + min-height: auto; } .commands-container { display: grid; diff --git a/public/css/workflow.css b/public/css/workflow.css index 46de535ea..23ba1082e 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -122,7 +122,7 @@ display: grid; grid-template-columns: 38% 1fr; grid-template-rows: 1fr auto; - gap: 0 var(--spacing-xl); + gap: 0 var(--spacing-2xl); padding: var(--spacing-lg) var(--spacing-lg); opacity: 0; pointer-events: none; @@ -342,6 +342,9 @@ display: flex; align-items: center; justify-content: center; + max-width: 420px; + background: none; + min-height: auto; } /* (nav moved to fisheye list) */ diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index 8cc41039d..28ba69f60 100644 --- a/public/js/components/framework-viz.js +++ b/public/js/components/framework-viz.js @@ -333,6 +333,22 @@ export class PeriodicTable { el.addEventListener('click', () => { activate(); const scrollTarget = display ? display.scrollTo : cmd; + + // Navigate the fisheye scroller to this command + const fisheyeList = document.getElementById('fisheye-list'); + if (fisheyeList) { + const items = [...fisheyeList.querySelectorAll('.fisheye-item')]; + const idx = items.findIndex(item => item.dataset.id === scrollTarget); + if (idx >= 0 && fisheyeList._scrollToCommand) { + // Scroll the commands section into view first + const section = document.querySelector('.commands-subsection'); + if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' }); + fisheyeList._scrollToCommand(idx); + return; + } + } + + // Fallback: scroll to the spread element const target = document.getElementById(`cmd-${scrollTarget}`); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'center' }); diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index 6a7829ddf..be239b944 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -80,12 +80,30 @@ function renderDesktopLayout(container, commands) { 'create': 'Create', 'evaluate': 'Evaluate', 'refine': 'Refine', 'simplify': 'Simplify', 'harden': 'Harden', 'system': 'System' }; + // Preferred order within each category (unlisted commands append at end) + const categoryCommandOrder = { + 'create': ['impeccable', 'shape', 'onboard', 'overdrive'], + 'evaluate': ['critique', 'audit'], + 'refine': ['typeset', 'arrange', 'colorize', 'animate', 'delight', 'bolder', 'quieter'], + 'simplify': ['distill', 'clarify', 'adapt'], + 'harden': ['normalize', 'polish', 'optimize', 'harden'], + 'system': ['extract'] + }; const grouped = {}; filteredCommands.forEach(cmd => { const cat = commandCategories[cmd.id] || 'other'; if (!grouped[cat]) grouped[cat] = []; grouped[cat].push(cmd); }); + // Sort each group by preferred order + Object.entries(grouped).forEach(([cat, cmds]) => { + const order = categoryCommandOrder[cat] || []; + cmds.sort((a, b) => { + const ai = order.indexOf(a.id); + const bi = order.indexOf(b.id); + return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi); + }); + }); const orderedCommands = []; const headerIndices = []; categoryOrder.forEach(cat => { diff --git a/public/js/demo-renderer.js b/public/js/demo-renderer.js index d435e5d63..7247e3a97 100644 --- a/public/js/demo-renderer.js +++ b/public/js/demo-renderer.js @@ -25,39 +25,70 @@ export function renderCommandDemo(commandId) { const demo = getCommandDemo(commandId); if (!demo) { - // impeccable is a setup command, not a visual transform — show usage guide instead + // impeccable has multiple modes — show a usage guide if (commandId === 'impeccable') { return `
-
-
When to run
-
-
- 1. - Once per project, before using other commands +
+
Three ways to use /impeccable
+
+
+
+ /impeccable + freeform +
+ Use on any task. Loads full design intelligence, anti-patterns, and reference knowledge into the current context.
-
- 2. - Again if your brand or design direction changes +
+
+ /impeccable teach + one-time setup +
+ Scans your codebase, interviews you about brand and audience, then saves a Design Context that all other commands use automatically. +
+
+
+ /impeccable craft + build a feature +
+ Runs /shape to plan UX first, loads the right references, then builds and iterates visually until the result delights.
-
What it does
-
-
- → - Scans your codebase for existing design patterns +
Start with /impeccable teach once per project. Then use the other modes as needed.
+
+
+
+ `; + } + // shape is a planning skill — show the process + if (commandId === 'shape') { + return ` +
+
+
+
Design before you build
+
+
+
+ 1. Discovery +
+ Interviews you about purpose, audience, content, constraints, and anti-goals. Adapts questions based on your answers.
-
- → - Asks about brand, users, and aesthetic direction +
+
+ 2. Design Brief +
+ Synthesizes a 9-section brief: feature summary, primary action, design direction, layout strategy, key states, interaction model, content needs, recommended references, and open questions.
-
- → - Saves a Design Context to your AI config file +
+
+ 3. Handoff +
+ The confirmed brief guides /impeccable craft or any other implementation approach. No code written, just the thinking that makes code good.
-
All other commands use this context automatically.
+
Use standalone or as the first step of /impeccable craft.
diff --git a/public/js/generated/counts.js b/public/js/generated/counts.js index 7473a08f3..34105cc2a 100644 --- a/public/js/generated/counts.js +++ b/public/js/generated/counts.js @@ -1,3 +1,3 @@ // GENERATED by build.js — do not edit -export const COMMAND_COUNT = 22; +export const COMMAND_COUNT = 21; export const DETECTION_COUNT = 24;