mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Reorganize periodic table, remove validate skill
New categories that distinguish create-new vs improve-existing: - Create: shape, impeccable craft, impeccable, onboard, overdrive - Evaluate: critique, audit - Refine: typeset, arrange, colorize, animate, delight, bolder, quieter - Simplify: distill, clarify, adapt - Harden: normalize, polish, optimize, harden - System: impeccable teach, extract Also: remove Dt (detect CLI) from table, remove validate skill, split /impeccable into its sub-commands (craft, teach). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
7154b4d080
commit
9ccdb9148a
+15
-15
@@ -82,25 +82,25 @@ button, input, textarea, select {
|
||||
--color-accent-soft: oklch(60% 0.25 350 / 0.25);
|
||||
|
||||
/* Framework category colors - Light mode */
|
||||
--cat-diagnostic-bg: #fdf4ff;
|
||||
--cat-diagnostic-border: #d946ef;
|
||||
--cat-diagnostic-text: #a21caf;
|
||||
--cat-create-bg: #fdf2f8;
|
||||
--cat-create-border: #ec4899;
|
||||
--cat-create-text: #be185d;
|
||||
|
||||
--cat-quality-bg: #f0fdf4;
|
||||
--cat-quality-border: #22c55e;
|
||||
--cat-quality-text: #15803d;
|
||||
--cat-evaluate-bg: #fdf4ff;
|
||||
--cat-evaluate-border: #d946ef;
|
||||
--cat-evaluate-text: #a21caf;
|
||||
|
||||
--cat-intensity-bg: #fffbeb;
|
||||
--cat-intensity-border: #f59e0b;
|
||||
--cat-intensity-text: #b45309;
|
||||
--cat-refine-bg: #eff6ff;
|
||||
--cat-refine-border: #3b82f6;
|
||||
--cat-refine-text: #1d4ed8;
|
||||
|
||||
--cat-adaptation-bg: #eff6ff;
|
||||
--cat-adaptation-border: #3b82f6;
|
||||
--cat-adaptation-text: #1d4ed8;
|
||||
--cat-simplify-bg: #fffbeb;
|
||||
--cat-simplify-border: #f59e0b;
|
||||
--cat-simplify-text: #b45309;
|
||||
|
||||
--cat-enhancement-bg: #fdf2f8;
|
||||
--cat-enhancement-border: #ec4899;
|
||||
--cat-enhancement-text: #be185d;
|
||||
--cat-harden-bg: #f0fdf4;
|
||||
--cat-harden-border: #22c55e;
|
||||
--cat-harden-text: #15803d;
|
||||
|
||||
--cat-system-bg: #f5f5f4;
|
||||
--cat-system-border: #78716c;
|
||||
|
||||
+25
-25
@@ -100,20 +100,20 @@
|
||||
.commands-gallery {
|
||||
display: block;
|
||||
}
|
||||
.magazine-spread[data-category="diagnostic"] {
|
||||
--spread-accent: oklch(55% 0.20 25);
|
||||
.magazine-spread[data-category="create"] {
|
||||
--spread-accent: oklch(55% 0.20 340);
|
||||
}
|
||||
.magazine-spread[data-category="quality"] {
|
||||
--spread-accent: oklch(55% 0.20 160);
|
||||
.magazine-spread[data-category="evaluate"] {
|
||||
--spread-accent: oklch(55% 0.20 300);
|
||||
}
|
||||
.magazine-spread[data-category="intensity"] {
|
||||
--spread-accent: oklch(55% 0.22 350);
|
||||
}
|
||||
.magazine-spread[data-category="adaptation"] {
|
||||
.magazine-spread[data-category="refine"] {
|
||||
--spread-accent: oklch(55% 0.18 260);
|
||||
}
|
||||
.magazine-spread[data-category="enhancement"] {
|
||||
--spread-accent: oklch(55% 0.20 300);
|
||||
.magazine-spread[data-category="simplify"] {
|
||||
--spread-accent: oklch(55% 0.20 80);
|
||||
}
|
||||
.magazine-spread[data-category="harden"] {
|
||||
--spread-accent: oklch(55% 0.20 160);
|
||||
}
|
||||
.magazine-spread[data-category="system"] {
|
||||
--spread-accent: oklch(45% 0.05 0);
|
||||
@@ -2414,21 +2414,21 @@ button, input, textarea, select {
|
||||
--color-accent-hover: oklch(52% 0.25 350);
|
||||
--color-accent-dim: oklch(60% 0.25 350 / 0.15);
|
||||
--color-accent-soft: oklch(60% 0.25 350 / 0.25);
|
||||
--cat-diagnostic-bg: #fdf4ff;
|
||||
--cat-diagnostic-border: #d946ef;
|
||||
--cat-diagnostic-text: #a21caf;
|
||||
--cat-quality-bg: #f0fdf4;
|
||||
--cat-quality-border: #22c55e;
|
||||
--cat-quality-text: #15803d;
|
||||
--cat-intensity-bg: #fffbeb;
|
||||
--cat-intensity-border: #f59e0b;
|
||||
--cat-intensity-text: #b45309;
|
||||
--cat-adaptation-bg: #eff6ff;
|
||||
--cat-adaptation-border: #3b82f6;
|
||||
--cat-adaptation-text: #1d4ed8;
|
||||
--cat-enhancement-bg: #fdf2f8;
|
||||
--cat-enhancement-border: #ec4899;
|
||||
--cat-enhancement-text: #be185d;
|
||||
--cat-create-bg: #fdf2f8;
|
||||
--cat-create-border: #ec4899;
|
||||
--cat-create-text: #be185d;
|
||||
--cat-evaluate-bg: #fdf4ff;
|
||||
--cat-evaluate-border: #d946ef;
|
||||
--cat-evaluate-text: #a21caf;
|
||||
--cat-refine-bg: #eff6ff;
|
||||
--cat-refine-border: #3b82f6;
|
||||
--cat-refine-text: #1d4ed8;
|
||||
--cat-simplify-bg: #fffbeb;
|
||||
--cat-simplify-border: #f59e0b;
|
||||
--cat-simplify-text: #b45309;
|
||||
--cat-harden-bg: #f0fdf4;
|
||||
--cat-harden-border: #22c55e;
|
||||
--cat-harden-text: #15803d;
|
||||
--cat-system-bg: #f5f5f4;
|
||||
--cat-system-border: #78716c;
|
||||
--cat-system-text: #44403c;
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
============================================ */
|
||||
|
||||
/* Category accent colors */
|
||||
.magazine-spread[data-category="diagnostic"] { --spread-accent: oklch(55% 0.20 25); }
|
||||
.magazine-spread[data-category="quality"] { --spread-accent: oklch(55% 0.20 160); }
|
||||
.magazine-spread[data-category="intensity"] { --spread-accent: oklch(55% 0.22 350); }
|
||||
.magazine-spread[data-category="adaptation"] { --spread-accent: oklch(55% 0.18 260); }
|
||||
.magazine-spread[data-category="enhancement"] { --spread-accent: oklch(55% 0.20 300); }
|
||||
.magazine-spread[data-category="create"] { --spread-accent: oklch(55% 0.20 340); }
|
||||
.magazine-spread[data-category="evaluate"] { --spread-accent: oklch(55% 0.20 300); }
|
||||
.magazine-spread[data-category="refine"] { --spread-accent: oklch(55% 0.18 260); }
|
||||
.magazine-spread[data-category="simplify"] { --spread-accent: oklch(55% 0.20 80); }
|
||||
.magazine-spread[data-category="harden"] { --spread-accent: oklch(55% 0.20 160); }
|
||||
.magazine-spread[data-category="system"] { --spread-accent: oklch(45% 0.05 0); }
|
||||
|
||||
.magazine-container {
|
||||
|
||||
@@ -7,52 +7,64 @@
|
||||
import { commandCategories, commandRelationships, betaCommands } from '../data.js';
|
||||
|
||||
const categoryColors = {
|
||||
diagnostic: { bg: 'var(--cat-diagnostic-bg)', border: 'var(--cat-diagnostic-border)', text: 'var(--cat-diagnostic-text)' },
|
||||
quality: { bg: 'var(--cat-quality-bg)', border: 'var(--cat-quality-border)', text: 'var(--cat-quality-text)' },
|
||||
intensity: { bg: 'var(--cat-intensity-bg)', border: 'var(--cat-intensity-border)', text: 'var(--cat-intensity-text)' },
|
||||
adaptation: { bg: 'var(--cat-adaptation-bg)', border: 'var(--cat-adaptation-border)', text: 'var(--cat-adaptation-text)' },
|
||||
enhancement: { bg: 'var(--cat-enhancement-bg)', border: 'var(--cat-enhancement-border)', text: 'var(--cat-enhancement-text)' },
|
||||
create: { bg: 'var(--cat-create-bg)', border: 'var(--cat-create-border)', text: 'var(--cat-create-text)' },
|
||||
evaluate: { bg: 'var(--cat-evaluate-bg)', border: 'var(--cat-evaluate-border)', text: 'var(--cat-evaluate-text)' },
|
||||
refine: { bg: 'var(--cat-refine-bg)', border: 'var(--cat-refine-border)', text: 'var(--cat-refine-text)' },
|
||||
simplify: { bg: 'var(--cat-simplify-bg)', border: 'var(--cat-simplify-border)', text: 'var(--cat-simplify-text)' },
|
||||
harden: { bg: 'var(--cat-harden-bg)', border: 'var(--cat-harden-border)', text: 'var(--cat-harden-text)' },
|
||||
system: { bg: 'var(--cat-system-bg)', border: 'var(--cat-system-border)', text: 'var(--cat-system-text)' }
|
||||
};
|
||||
|
||||
const categoryLabels = {
|
||||
diagnostic: 'Diagnostic',
|
||||
quality: 'Quality',
|
||||
intensity: 'Intensity',
|
||||
adaptation: 'Adaptation',
|
||||
enhancement: 'Enhancement',
|
||||
create: 'Create',
|
||||
evaluate: 'Evaluate',
|
||||
refine: 'Refine',
|
||||
simplify: 'Simplify',
|
||||
harden: 'Harden',
|
||||
system: 'System'
|
||||
};
|
||||
|
||||
const commandSymbols = {
|
||||
'shape': 'Sh',
|
||||
'impeccable craft': 'Ic',
|
||||
'impeccable': 'Im',
|
||||
audit: 'Au',
|
||||
critique: 'Cr',
|
||||
normalize: 'No',
|
||||
polish: 'Po',
|
||||
optimize: 'Op',
|
||||
harden: 'Ha',
|
||||
clarify: 'Cl',
|
||||
distill: 'Di',
|
||||
adapt: 'Ad',
|
||||
extract: 'Ex',
|
||||
animate: 'An',
|
||||
colorize: 'Co',
|
||||
delight: 'De',
|
||||
bolder: 'Bo',
|
||||
quieter: 'Qu',
|
||||
onboard: 'On',
|
||||
typeset: 'Ty',
|
||||
arrange: 'Ar',
|
||||
overdrive: 'Od'
|
||||
'onboard': 'On',
|
||||
'overdrive': 'Od',
|
||||
'critique': 'Cr',
|
||||
'audit': 'Au',
|
||||
'typeset': 'Ty',
|
||||
'arrange': 'Ar',
|
||||
'colorize': 'Co',
|
||||
'animate': 'An',
|
||||
'delight': 'De',
|
||||
'bolder': 'Bo',
|
||||
'quieter': 'Qu',
|
||||
'distill': 'Di',
|
||||
'clarify': 'Cl',
|
||||
'adapt': 'Ad',
|
||||
'normalize': 'No',
|
||||
'polish': 'Po',
|
||||
'optimize': 'Op',
|
||||
'harden': 'Ha',
|
||||
'impeccable teach': 'It',
|
||||
'extract': 'Ex'
|
||||
};
|
||||
|
||||
const commandNumbers = {
|
||||
'impeccable': 0,
|
||||
audit: 1, critique: 2, normalize: 3, polish: 4, optimize: 5,
|
||||
harden: 6, clarify: 7, distill: 8, adapt: 9, extract: 10,
|
||||
animate: 11, colorize: 12, delight: 13, bolder: 14, quieter: 15,
|
||||
onboard: 16, typeset: 17, arrange: 18, overdrive: 19
|
||||
'shape': 0,
|
||||
'impeccable craft': 1, 'impeccable': 2, 'onboard': 3, 'overdrive': 4,
|
||||
'critique': 5, 'audit': 6,
|
||||
'typeset': 7, 'arrange': 8, 'colorize': 9, 'animate': 10,
|
||||
'delight': 11, 'bolder': 12, 'quieter': 13,
|
||||
'distill': 14, 'clarify': 15, 'adapt': 16,
|
||||
'normalize': 17, 'polish': 18, 'optimize': 19, 'harden': 20,
|
||||
'impeccable teach': 21, 'extract': 22
|
||||
};
|
||||
|
||||
// Map sub-commands to their display label and scroll target
|
||||
const commandDisplay = {
|
||||
'impeccable craft': { label: '/impeccable craft', scrollTo: 'impeccable' },
|
||||
'impeccable teach': { label: '/impeccable teach', scrollTo: 'impeccable' },
|
||||
};
|
||||
|
||||
export class PeriodicTable {
|
||||
@@ -85,7 +97,7 @@ export class PeriodicTable {
|
||||
groups[cat].push(cmd);
|
||||
});
|
||||
|
||||
const categoryOrder = ['diagnostic', 'quality', 'adaptation', 'enhancement', 'intensity', 'system'];
|
||||
const categoryOrder = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system'];
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.style.cssText = `
|
||||
@@ -99,13 +111,6 @@ export class PeriodicTable {
|
||||
const commands = groups[cat];
|
||||
if (!commands) return;
|
||||
const group = this.createCategoryGroup(cat, commands);
|
||||
|
||||
// Add CLI element to the system category
|
||||
if (cat === 'system') {
|
||||
const row = group.querySelector('div:last-child');
|
||||
if (row) row.appendChild(this.createCliElement());
|
||||
}
|
||||
|
||||
grid.appendChild(group);
|
||||
});
|
||||
|
||||
@@ -214,6 +219,7 @@ export class PeriodicTable {
|
||||
|
||||
createElement(cmd, category) {
|
||||
const colors = categoryColors[category];
|
||||
const display = commandDisplay[cmd];
|
||||
|
||||
const el = document.createElement('button');
|
||||
el.type = 'button';
|
||||
@@ -265,12 +271,16 @@ export class PeriodicTable {
|
||||
const name = document.createElement('div');
|
||||
name.style.cssText = `
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
font-size: ${display ? '6.5px' : '8px'};
|
||||
color: ${colors.text};
|
||||
opacity: 0.7;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
max-width: 52px;
|
||||
line-height: 1.3;
|
||||
${display ? '' : 'white-space: nowrap;'}
|
||||
`;
|
||||
name.textContent = `/${cmd}`;
|
||||
name.textContent = display ? display.label : `/${cmd}`;
|
||||
el.appendChild(name);
|
||||
|
||||
// Beta badge
|
||||
@@ -322,7 +332,8 @@ export class PeriodicTable {
|
||||
|
||||
el.addEventListener('click', () => {
|
||||
activate();
|
||||
const target = document.getElementById(`cmd-${cmd}`);
|
||||
const scrollTarget = display ? display.scrollTo : cmd;
|
||||
const target = document.getElementById(`cmd-${scrollTarget}`);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
@@ -330,102 +341,6 @@ export class PeriodicTable {
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
createCliElement() {
|
||||
const colors = categoryColors.system;
|
||||
|
||||
const el = document.createElement('button');
|
||||
el.type = 'button';
|
||||
el.setAttribute('aria-label', 'CLI: npx impeccable detect');
|
||||
el.style.cssText = `
|
||||
width: 56px;
|
||||
height: 64px;
|
||||
background: ${colors.bg};
|
||||
border: 1.5px dashed ${colors.border};
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
// "CLI" top-left badge (like atomic number)
|
||||
const number = document.createElement('div');
|
||||
number.style.cssText = `
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 7px;
|
||||
color: ${colors.text};
|
||||
opacity: 0.5;
|
||||
`;
|
||||
number.textContent = 'CLI';
|
||||
el.appendChild(number);
|
||||
|
||||
// Symbol
|
||||
const symbol = document.createElement('div');
|
||||
symbol.style.cssText = `
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: ${colors.text};
|
||||
line-height: 1;
|
||||
`;
|
||||
symbol.textContent = 'Dt';
|
||||
el.appendChild(symbol);
|
||||
|
||||
// Label
|
||||
const name = document.createElement('div');
|
||||
name.style.cssText = `
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
color: ${colors.text};
|
||||
opacity: 0.7;
|
||||
margin-top: 3px;
|
||||
`;
|
||||
name.textContent = 'detect';
|
||||
el.appendChild(name);
|
||||
|
||||
// Tooltip on hover
|
||||
el.style.cursor = 'default';
|
||||
el.addEventListener('mouseenter', () => {
|
||||
this.hideTooltip();
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'ptable-tooltip';
|
||||
tooltip.style.cssText = `
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
background: var(--color-paper);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12);
|
||||
pointer-events: none;
|
||||
max-width: 280px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
`;
|
||||
tooltip.innerHTML = `
|
||||
<div style="font-family: var(--font-body); font-size: 13px; color: var(--color-charcoal); line-height: 1.4;">Scan files, directories, or URLs for 25 anti-patterns. Deterministic detection, no LLM needed.</div>
|
||||
`;
|
||||
this.container.appendChild(tooltip);
|
||||
const elRect = el.getBoundingClientRect();
|
||||
const containerRect = this.container.getBoundingClientRect();
|
||||
tooltip.style.left = `${Math.min(elRect.left - containerRect.left, containerRect.width - 290)}px`;
|
||||
tooltip.style.top = `${elRect.bottom - containerRect.top + 6}px`;
|
||||
requestAnimationFrame(() => { tooltip.style.opacity = '1'; });
|
||||
this.activeTooltip = tooltip;
|
||||
});
|
||||
el.addEventListener('mouseleave', () => this.hideTooltip());
|
||||
|
||||
return el;
|
||||
}
|
||||
}
|
||||
|
||||
export function initFrameworkViz() {
|
||||
|
||||
@@ -58,11 +58,11 @@ let magazineState = {
|
||||
|
||||
const categoryOrder = ['diagnostic', 'quality', 'intensity', 'adaptation', 'enhancement', 'system'];
|
||||
const categoryLabels = {
|
||||
'diagnostic': 'Diagnose',
|
||||
'quality': 'Quality',
|
||||
'intensity': 'Intensity',
|
||||
'adaptation': 'Adaptation',
|
||||
'enhancement': 'Enhancement',
|
||||
'create': 'Create',
|
||||
'evaluate': 'Evaluate',
|
||||
'refine': 'Refine',
|
||||
'simplify': 'Simplify',
|
||||
'harden': 'Harden',
|
||||
'system': 'System'
|
||||
};
|
||||
|
||||
@@ -71,14 +71,14 @@ function renderDesktopLayout(container, commands) {
|
||||
|
||||
let startIndex = -1;
|
||||
|
||||
// Filter out deprecated shims, then sort by category
|
||||
const deprecated = new Set(['teach-impeccable', 'frontend-design', 'impeccable']);
|
||||
// Filter out deprecated shims and sub-commands (no standalone demos)
|
||||
const deprecated = new Set(['teach-impeccable', 'frontend-design', 'impeccable craft', 'impeccable teach']);
|
||||
const filteredCommands = commands.filter(c => !deprecated.has(c.id));
|
||||
|
||||
const categoryOrder = ['diagnostic', 'quality', 'adaptation', 'enhancement', 'intensity', 'system'];
|
||||
const categoryOrder = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system'];
|
||||
const categoryLabelsShort = {
|
||||
'diagnostic': 'Diagnose', 'quality': 'Quality', 'adaptation': 'Adapt',
|
||||
'enhancement': 'Enhance', 'intensity': 'Intensity', 'system': 'System'
|
||||
'create': 'Create', 'evaluate': 'Evaluate', 'refine': 'Refine',
|
||||
'simplify': 'Simplify', 'harden': 'Harden', 'system': 'System'
|
||||
};
|
||||
const grouped = {};
|
||||
filteredCommands.forEach(cmd => {
|
||||
|
||||
+70
-55
@@ -53,49 +53,61 @@ export const skillReferenceDomains = [
|
||||
];
|
||||
|
||||
export const commandProcessSteps = {
|
||||
'impeccable': ['Gather', 'Clarify', 'Document', 'Save'],
|
||||
'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'],
|
||||
'shape': ['Interview', 'Synthesize', 'Brief', 'Confirm'],
|
||||
'impeccable craft': ['Shape', 'Reference', 'Build', 'Iterate'],
|
||||
'impeccable': ['Direct', 'Design', 'Build', 'Refine'],
|
||||
'onboard': ['Map', 'Design', 'Guide'],
|
||||
'overdrive': ['Assess', 'Choose', 'Build', 'Polish'],
|
||||
'critique': ['Evaluate', 'Critique', 'Prioritize', 'Suggest'],
|
||||
'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'],
|
||||
'typeset': ['Assess', 'Select', 'Scale', 'Refine'],
|
||||
'arrange': ['Assess', 'Grid', 'Rhythm', 'Balance'],
|
||||
'colorize': ['Analyze', 'Strategy', 'Apply', 'Balance'],
|
||||
'animate': ['Identify', 'Design', 'Implement', 'Polish'],
|
||||
'delight': ['Identify', 'Design', 'Implement'],
|
||||
'bolder': ['Analyze', 'Amplify', 'Impact'],
|
||||
'quieter': ['Analyze', 'Reduce', 'Refine'],
|
||||
'distill': ['Audit', 'Remove', 'Clarify'],
|
||||
'clarify': ['Read', 'Simplify', 'Improve', 'Test'],
|
||||
'adapt': ['Analyze', 'Adjust', 'Optimize'],
|
||||
'normalize': ['Analyze', 'Identify', 'Align', 'Verify'],
|
||||
'polish': ['Review', 'Refine', 'Verify'],
|
||||
'optimize': ['Profile', 'Identify', 'Improve', 'Measure'],
|
||||
'harden': ['Test', 'Handle', 'Wrap', 'Validate'],
|
||||
'clarify': ['Read', 'Simplify', 'Improve', 'Test'],
|
||||
'quieter': ['Analyze', 'Reduce', 'Refine'],
|
||||
'bolder': ['Analyze', 'Amplify', 'Impact'],
|
||||
'distill': ['Audit', 'Remove', 'Clarify'],
|
||||
'animate': ['Identify', 'Design', 'Implement', 'Polish'],
|
||||
'colorize': ['Analyze', 'Strategy', 'Apply', 'Balance'],
|
||||
'delight': ['Identify', 'Design', 'Implement'],
|
||||
'extract': ['Identify', 'Abstract', 'Document'],
|
||||
'adapt': ['Analyze', 'Adjust', 'Optimize'],
|
||||
'onboard': ['Map', 'Design', 'Guide'],
|
||||
'typeset': ['Assess', 'Select', 'Scale', 'Refine'],
|
||||
'arrange': ['Assess', 'Grid', 'Rhythm', 'Balance'],
|
||||
'overdrive': ['Assess', 'Choose', 'Build', 'Polish']
|
||||
'impeccable teach': ['Explore', 'Interview', 'Synthesize', 'Save'],
|
||||
'extract': ['Identify', 'Abstract', 'Document']
|
||||
};
|
||||
|
||||
export const commandCategories = {
|
||||
'impeccable': 'system',
|
||||
'audit': 'diagnostic',
|
||||
'critique': 'diagnostic',
|
||||
'normalize': 'quality',
|
||||
'polish': 'quality',
|
||||
'optimize': 'quality',
|
||||
'harden': 'quality',
|
||||
'clarify': 'adaptation',
|
||||
'quieter': 'intensity',
|
||||
'bolder': 'intensity',
|
||||
'distill': 'adaptation',
|
||||
'animate': 'enhancement',
|
||||
'colorize': 'enhancement',
|
||||
'delight': 'enhancement',
|
||||
'extract': 'system',
|
||||
'adapt': 'adaptation',
|
||||
'onboard': 'enhancement',
|
||||
'typeset': 'enhancement',
|
||||
'arrange': 'enhancement',
|
||||
'overdrive': 'enhancement'
|
||||
// CREATE - build something new
|
||||
'shape': 'create',
|
||||
'impeccable craft': 'create',
|
||||
'impeccable': 'create',
|
||||
'onboard': 'create',
|
||||
'overdrive': 'create',
|
||||
// EVALUATE - review and assess
|
||||
'critique': 'evaluate',
|
||||
'audit': 'evaluate',
|
||||
// REFINE - improve existing design
|
||||
'typeset': 'refine',
|
||||
'arrange': 'refine',
|
||||
'colorize': 'refine',
|
||||
'animate': 'refine',
|
||||
'delight': 'refine',
|
||||
'bolder': 'refine',
|
||||
'quieter': 'refine',
|
||||
// SIMPLIFY - reduce and clarify
|
||||
'distill': 'simplify',
|
||||
'clarify': 'simplify',
|
||||
'adapt': 'simplify',
|
||||
// HARDEN - production-ready
|
||||
'normalize': 'harden',
|
||||
'polish': 'harden',
|
||||
'optimize': 'harden',
|
||||
'harden': 'harden',
|
||||
// SYSTEM - setup and tooling
|
||||
'impeccable teach': 'system',
|
||||
'extract': 'system'
|
||||
};
|
||||
|
||||
// Skill relationships - now consolidated into impeccable skill
|
||||
@@ -108,25 +120,28 @@ export const skillRelationships = {
|
||||
};
|
||||
|
||||
export const commandRelationships = {
|
||||
'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', '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' },
|
||||
'harden': { combinesWith: ['optimize'], flow: 'Quality: Error handling & edge cases' },
|
||||
'clarify': { combinesWith: ['normalize', 'adapt'], flow: 'Adaptation: Improve UX copy' },
|
||||
'quieter': { pairs: 'bolder', flow: 'Intensity: Tone down bold designs' },
|
||||
'bolder': { pairs: 'quieter', flow: 'Intensity: Amplify timid designs' },
|
||||
'distill': { combinesWith: ['quieter', 'normalize'], flow: 'Adaptation: Strip to essence' },
|
||||
'animate': { combinesWith: ['delight'], flow: 'Enhancement: Add motion' },
|
||||
'colorize': { combinesWith: ['bolder', 'delight'], flow: 'Enhancement: Add strategic color' },
|
||||
'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' },
|
||||
'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Enhancement: Fix typography' },
|
||||
'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Enhancement: Fix layout & spacing' },
|
||||
'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Enhancement: Technically extraordinary effects' }
|
||||
'shape': { flow: 'Create: Plan UX and UI through structured discovery', leadsTo: ['impeccable craft'] },
|
||||
'impeccable craft': { flow: 'Create: Full shape-then-build flow with visual iteration' },
|
||||
'impeccable': { flow: 'Create: Freeform design with full design intelligence' },
|
||||
'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Create: Onboarding flows and empty states' },
|
||||
'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Create: Technically extraordinary effects' },
|
||||
'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'arrange'], flow: 'Evaluate: UX and design review with scoring' },
|
||||
'audit': { leadsTo: ['normalize', 'harden', 'optimize', 'adapt', 'clarify'], flow: 'Evaluate: Technical quality audit' },
|
||||
'typeset': { combinesWith: ['bolder', 'normalize'], flow: 'Refine: Fix typography and type hierarchy' },
|
||||
'arrange': { combinesWith: ['distill', 'adapt'], flow: 'Refine: Fix layout and spacing' },
|
||||
'colorize': { combinesWith: ['bolder', 'delight'], flow: 'Refine: Add strategic color' },
|
||||
'animate': { combinesWith: ['delight'], flow: 'Refine: Add purposeful motion' },
|
||||
'delight': { combinesWith: ['bolder', 'animate'], flow: 'Refine: Add personality and joy' },
|
||||
'bolder': { pairs: 'quieter', flow: 'Refine: Amplify timid designs' },
|
||||
'quieter': { pairs: 'bolder', flow: 'Refine: Tone down aggressive designs' },
|
||||
'distill': { combinesWith: ['quieter', 'normalize'], flow: 'Simplify: Strip to essence' },
|
||||
'clarify': { combinesWith: ['normalize', 'adapt'], flow: 'Simplify: Improve UX copy' },
|
||||
'adapt': { combinesWith: ['normalize', 'clarify'], flow: 'Simplify: Adapt for different contexts' },
|
||||
'normalize': { combinesWith: ['clarify', 'adapt'], flow: 'Harden: Align with design system' },
|
||||
'polish': { flow: 'Harden: Final pass before shipping' },
|
||||
'optimize': { flow: 'Harden: Performance improvements' },
|
||||
'harden': { combinesWith: ['optimize'], flow: 'Harden: Error handling and edge cases' },
|
||||
'impeccable teach': { flow: 'System: One-time project design context setup' },
|
||||
'extract': { flow: 'System: Create design system components and tokens' }
|
||||
};
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ Iterate through these checks visually:
|
||||
|
||||
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
|
||||
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
|
||||
3. **Run {{command_prefix}}validate.** Fix any P0 or P1 issues.
|
||||
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
|
||||
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
|
||||
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
|
||||
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
name: validate
|
||||
description: "Fast visual validation after UX/UI changes. Checks anti-patterns, spacing consistency, design system adherence, and copy quality in a single pass. Use after completing any UI work, when the user wants a quick quality check, or proactively after implementing a feature."
|
||||
argument-hint: "[area to validate]"
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke {{command_prefix}}impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run {{command_prefix}}impeccable teach first.
|
||||
|
||||
---
|
||||
|
||||
A fast, focused quality gate. Not a full audit or critique; this is the 2-minute check you run after every UI change to catch the most common and damaging issues before they ship.
|
||||
|
||||
Think of this as a design linter: opinionated, fast, and actionable. Flag what's wrong, say how to fix it, move on.
|
||||
|
||||
## When to Run
|
||||
|
||||
Run {{command_prefix}}validate after:
|
||||
- Implementing or modifying any UI component
|
||||
- Completing a feature's visual design
|
||||
- Before requesting a design review from a human
|
||||
- Any time you're about to mark UI work as "done"
|
||||
|
||||
## Validation Pass
|
||||
|
||||
Read the changed files. If browser automation is available, take a screenshot for visual inspection. Then run through ALL of the following checks in a single pass. Be fast and direct.
|
||||
|
||||
### 1. Anti-Pattern Scan
|
||||
|
||||
Check against ALL **DON'T** guidelines in the impeccable skill. The most common offenders:
|
||||
- AI color palette (purple gradients, cyan-on-dark, neon glows)
|
||||
- Identical card grids, hero metric layouts
|
||||
- Overused fonts (Inter, Roboto, system defaults)
|
||||
- Glassmorphism, gradient text, dark-mode-by-default
|
||||
- Cards inside cards, everything centered, modals for everything
|
||||
|
||||
**The test**: Would someone immediately guess an AI made this?
|
||||
|
||||
### 2. Spacing & Rhythm
|
||||
|
||||
- Are margins, paddings, and gaps consistent within the same visual context?
|
||||
- Is there varied rhythm (tight groupings vs generous separations), or is everything evenly spaced?
|
||||
- Do similar elements at the same hierarchy level use the same spacing?
|
||||
- Are spacing values from the design system tokens, or are there magic numbers?
|
||||
|
||||
### 3. Design System Adherence
|
||||
|
||||
- Are colors from the project's palette/tokens, or are there one-off hex values?
|
||||
- Are font sizes, weights, and families from the type scale?
|
||||
- Do border radii, shadows, and transitions match existing patterns?
|
||||
- Are interactive elements styled consistently with others of the same type?
|
||||
|
||||
### 4. Visual Consistency
|
||||
|
||||
- Do elements that should look the same actually look the same?
|
||||
- Is the visual hierarchy clear? (One primary action, clear reading order)
|
||||
- Are alignment and grid lines maintained across the section?
|
||||
- Do hover/focus/active states exist and feel consistent?
|
||||
|
||||
### 5. Copy Quality
|
||||
|
||||
- Is any text redundant with what's already visible? (Headers restating the page title, labels repeating obvious context)
|
||||
- Are labels, buttons, and messages concise? Every word should earn its place.
|
||||
- Is the tone consistent with the rest of the interface?
|
||||
- Are error/empty/loading states handled with helpful copy?
|
||||
|
||||
## Output Format
|
||||
|
||||
Report findings as a flat list, grouped by severity:
|
||||
|
||||
**Severity levels:**
|
||||
- **P0 (Broken)**: Visually broken, inaccessible, or fundamentally wrong. Fix before shipping.
|
||||
- **P1 (Anti-pattern)**: Clear design anti-pattern that undermines quality. Fix now.
|
||||
- **P2 (Inconsistency)**: Spacing, token, or style drift from the design system. Fix soon.
|
||||
- **P3 (Polish)**: Minor refinement opportunity. Fix if time allows.
|
||||
|
||||
For each finding:
|
||||
```
|
||||
[P0-P3] [Category] Short description of what's wrong
|
||||
→ Fix: Concrete action to take (file:line if applicable)
|
||||
```
|
||||
|
||||
Keep the total list short. If everything looks good, say so. Don't invent issues.
|
||||
|
||||
## After Validation
|
||||
|
||||
If P0 or P1 issues are found, fix them immediately. For P2/P3 issues, {{ask_instruction}} whether the user wants them addressed now or noted for later.
|
||||
|
||||
If the issues map cleanly to an existing command (e.g., spacing issues → {{command_prefix}}arrange, copy issues → {{command_prefix}}clarify), suggest that command instead of fixing manually.
|
||||
Reference in New Issue
Block a user