Files
pbakaus_impeccable/public/js/data.js
T
Paul Bakaus 0d87b5afb5 Overhaul /anti-patterns with visuals, detection layers, and LLM rules
Three additions to the anti-patterns catalog page, all sourced from a
new content/site/anti-patterns-catalog.js file so the user's parallel
edits to src/detect-antipatterns.mjs don't conflict with display metadata.

1. Detection layer badge per rule. Three layers:
     cli     - static analysis or jsdom. Runs from `npx impeccable detect`
               on files, no browser required. 23 of 25 current rules.
     browser - needs real browser layout (getBoundingClientRect).
               Runs via the browser extension or Puppeteer, not the
               plain CLI. Only 2 rules: cramped-padding and line-length,
               as documented in tests/detect-antipatterns-browser.test.mjs.
     llm     - no deterministic detector. Flagged by /critique's LLM
               review pass. 13 rules live only in the skill's DON'T list.
   Each card renders a mono pill with the layer label, color-coded per
   layer (neutral mist for CLI, blue tint for browser, amber tint for LLM).
   The How-to-read legend grows a dl explaining what each layer means.

2. Inline visual example per detected rule. All 25 detection rules get
   a ~140px tall preview area at the top of the card showing the bad
   pattern as live HTML (cream background, self-contained inline styles).
   Visuals for side-tab, gradient-text, dark-glow, nested-cards, and the
   rest let you see what the detector is actually flagging. LLM-only
   rules ship without visuals for now; their card bodies take the full
   card height.

3. LLM-only rules merged into the sections. Parsed out from
   source/skills/impeccable/SKILL.md DON'T lines that the detector
   doesn't cover: Syne, monospace-as-technical, dark-mode-default,
   everything-in-cards, identical-card-grids, hero-metric-layout,
   glassmorphism, sparkline-decoration, generic-drop-shadows,
   modal-reflex, every-button-primary, redundant-headers,
   mobile-amputation. Each renders like a detection rule card but
   shows the 'LLM only' layer badge and has no rule id chip. They
   slot into the same section groups as detected rules (Interaction
   and Responsive sections added to the section order so these get
   real headings).

- scripts/lib/sub-pages-data.js: imports the catalog, enriches
  detected rules with { layer, visual }, appends LLM_ONLY_RULES with
  layer: 'llm'. Re-exports LAYER_LABELS and LAYER_DESCRIPTIONS for
  the generator.
- scripts/build-sub-pages.js: renderRuleCard adds the visual block
  and the layer badge; LLM rules drop the rule id chip since their id
  is just an internal slug. groupRulesBySection now extends the
  primary order with whatever extra sections rules reference.
- public/css/sub-pages.css: .rule-card now has a .rule-card-visual
  preview area on top with border-bottom, body section below. New
  .rule-card-layer pill styling per layer. Layer legend dl using a
  2-column grid for badge -> description.

Dev server serves 38 total cards (25 detected + 13 LLM) across 8
sections: Visual Details, Typography, Color & Contrast, Layout & Space,
Motion, Interaction, Responsive, General quality.
2026-04-08 12:05:12 -07:00

148 lines
6.2 KiB
JavaScript

// ============================================
// DATA: Skill focus areas, command processes, relationships
// ============================================
// Items that are fully complete and ready for public use
// All others will show "Coming Soon"
export const readySkills = [
'impeccable' // Consolidated skill with all design domains
];
export const readyCommands = [
'normalize' // First command to be fully completed
];
// Commands marked as beta — shown with a badge in the UI
export const betaCommands = [
'overdrive'
];
// Consolidated impeccable skill with reference domains
export const skillFocusAreas = {
'impeccable': [
{ area: 'Typography', detail: 'Scale, rhythm, hierarchy, expression' },
{ area: 'Color & Contrast', detail: 'Accessibility, systems, theming' },
{ area: 'Spatial Design', detail: 'Layout, spacing, composition' },
{ area: 'Responsive', detail: 'Fluid layouts, touch targets' },
{ area: 'Interaction', detail: 'States, feedback, affordances' },
{ area: 'Motion', detail: 'Micro-interactions, transitions' },
{ area: 'UX Writing', detail: 'Clarity, voice, error messages' }
]
};
// Guideline counts per dimension (verified from reference files)
export const dimensionGuidelineCounts = {
'Typography': 33,
'Color & Contrast': 29,
'Spatial Design': 27,
'Motion': 32,
'Interaction': 36,
'Responsive': 23,
'UX Writing': 32
};
// Reference domains within the impeccable skill
export const skillReferenceDomains = [
'typography',
'color-and-contrast',
'spatial-design',
'responsive-design',
'interaction-design',
'motion-design',
'ux-writing'
];
export const commandProcessSteps = {
'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'],
'impeccable teach': ['Explore', 'Interview', 'Synthesize', 'Save'],
'extract': ['Identify', 'Abstract', 'Document']
};
export const commandCategories = {
// CREATE - build something new
'shape': 'create',
'impeccable craft': 'create',
'impeccable': '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',
'onboard': 'refine',
'overdrive': '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
// The impeccable skill contains all domains as reference files
export const skillRelationships = {
'impeccable': {
description: 'Comprehensive design intelligence with progressive reference loading',
referenceDomains: ['typography', 'color-and-contrast', 'spatial-design', 'responsive-design', 'interaction-design', 'motion-design', 'ux-writing']
}
};
export const commandRelationships = {
'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: 'Refine: 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' }
};