diff --git a/public/css/main.css b/public/css/main.css index 0e42ecbc2..dc77e44ad 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -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; diff --git a/public/css/styles.css b/public/css/styles.css index 27aa8eb87..4b4fd4548 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -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; diff --git a/public/css/workflow.css b/public/css/workflow.css index ffe55f257..46de535ea 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -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 { diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index ad035b87b..8cc41039d 100644 --- a/public/js/components/framework-viz.js +++ b/public/js/components/framework-viz.js @@ -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 = ` -
Scan files, directories, or URLs for 25 anti-patterns. Deterministic detection, no LLM needed.
- `; - 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() { diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index dbfb664ab..6a7829ddf 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -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 => { diff --git a/public/js/data.js b/public/js/data.js index 619d38342..50d475207 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -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' } }; diff --git a/source/skills/impeccable/reference/craft.md b/source/skills/impeccable/reference/craft.md index 3d149ae65..2bc10df79 100644 --- a/source/skills/impeccable/reference/craft.md +++ b/source/skills/impeccable/reference/craft.md @@ -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. diff --git a/source/skills/validate/SKILL.md b/source/skills/validate/SKILL.md deleted file mode 100644 index a85fd638d..000000000 --- a/source/skills/validate/SKILL.md +++ /dev/null @@ -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.