skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 08:36:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update commands grid layout and impeccable command demo

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-06 21:34:56 -07:00
co-authored by Claude Opus 4.6
parent bb4de8ed9b
commit 83330a66cb
6 changed files with 96 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+4 -1
View File
@@ -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;
public/css/workflow.css
+4 -1
View File
@@ -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) */
public/js/components/framework-viz.js
+16
View File
@@ -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' });
public/js/components/glass-terminal.js
+18
View File
@@ -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 => {
public/js/demo-renderer.js
+53 -22
View File
@@ -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 `
<div class="demo-container">
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
<div style="display: flex; flex-direction: column; gap: 12px; color: var(--color-ash);">
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">When to run</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="color: var(--color-accent); flex-shrink: 0;">1.</span>
<span>Once per project, before using other commands</span>
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">Three ways to use /impeccable</div>
<div style="display: flex; flex-direction: column; gap: 14px;">
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable</code>
<span style="opacity: 0.4; font-size: 11px;">freeform</span>
</div>
<span style="padding-left: 0; opacity: 0.8;">Use on any task. Loads full design intelligence, anti-patterns, and reference knowledge into the current context.</span>
</div>
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="color: var(--color-accent); flex-shrink: 0;">2.</span>
<span>Again if your brand or design direction changes</span>
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable teach</code>
<span style="opacity: 0.4; font-size: 11px;">one-time setup</span>
</div>
<span style="padding-left: 0; opacity: 0.8;">Scans your codebase, interviews you about brand and audience, then saves a Design Context that all other commands use automatically.</span>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<code style="font-size: 12px; color: var(--spread-accent, var(--color-accent)); font-weight: 600; white-space: nowrap;">/impeccable craft</code>
<span style="opacity: 0.4; font-size: 11px;">build a feature</span>
</div>
<span style="padding-left: 0; opacity: 0.8;">Runs /shape to plan UX first, loads the right references, then builds and iterates visually until the result delights.</span>
</div>
</div>
<div style="font-size: 14px; color: var(--color-text); font-weight: 600; margin-top: 4px;">What it does</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="opacity: 0.5; flex-shrink: 0;">→</span>
<span>Scans your codebase for existing design patterns</span>
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">Start with <code style="font-size: 11px;">/impeccable teach</code> once per project. Then use the other modes as needed.</div>
</div>
</div>
</div>
`;
}
// shape is a planning skill — show the process
if (commandId === 'shape') {
return `
<div class="demo-container">
<div class="demo-viewport" style="padding: var(--spacing-lg); font-size: 13px; line-height: 1.6;">
<div style="display: flex; flex-direction: column; gap: 16px; color: var(--color-ash);">
<div style="font-size: 14px; color: var(--color-text); font-weight: 600;">Design before you build</div>
<div style="display: flex; flex-direction: column; gap: 14px;">
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">1. Discovery</span>
</div>
<span style="opacity: 0.8;">Interviews you about purpose, audience, content, constraints, and anti-goals. Adapts questions based on your answers.</span>
</div>
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="opacity: 0.5; flex-shrink: 0;">→</span>
<span>Asks about brand, users, and aesthetic direction</span>
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">2. Design Brief</span>
</div>
<span style="opacity: 0.8;">Synthesizes a 9-section brief: feature summary, primary action, design direction, layout strategy, key states, interaction model, content needs, recommended references, and open questions.</span>
</div>
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="opacity: 0.5; flex-shrink: 0;">→</span>
<span>Saves a Design Context to your AI config file</span>
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; gap: 8px; align-items: baseline;">
<span style="color: var(--spread-accent, var(--color-accent)); font-weight: 600; font-size: 12px;">3. Handoff</span>
</div>
<span style="opacity: 0.8;">The confirmed brief guides <code style="font-size: 11px;">/impeccable craft</code> or any other implementation approach. No code written, just the thinking that makes code good.</span>
</div>
</div>
<div style="font-size: 12px; opacity: 0.6; margin-top: 4px; font-style: italic;">All other commands use this context automatically.</div>
<div style="font-size: 12px; opacity: 0.5; margin-top: 2px; font-style: italic;">Use standalone or as the first step of <code style="font-size: 11px;">/impeccable craft</code>.</div>
</div>
</div>
</div>
public/js/generated/counts.js
+1 -1
View File
@@ -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;