pm-workflow-studio 0.1.0

package/.codex/bundled-skills/impeccable/scripts/detector/profile/profiler.mjs

@@ -0,0 +1,166 @@
+function profileNow() {
+  return typeof performance !== 'undefined' && performance.now
+    ? performance.now()
+    : Date.now();
+}
+
+function createDetectorProfile() {
+  return { events: [] };
+}
+
+function recordProfileEvent(profile, event) {
+  if (!profile) return;
+  const normalized = {
+    engine: event.engine || 'unknown',
+    phase: event.phase || 'unknown',
+    ruleId: event.ruleId || 'unknown',
+    target: event.target || '',
+    ms: Number.isFinite(event.ms) ? event.ms : 0,
+    findings: Number.isFinite(event.findings) ? event.findings : 0,
+  };
+  if (event.detail) normalized.detail = event.detail;
+  if (Array.isArray(event.findingIds) && event.findingIds.length) {
+    normalized.findingIds = event.findingIds;
+  }
+  if (typeof profile === 'function') {
+    profile(normalized);
+  } else if (typeof profile.record === 'function') {
+    profile.record(normalized);
+  } else if (Array.isArray(profile.events)) {
+    profile.events.push(normalized);
+  } else if (Array.isArray(profile)) {
+    profile.push(normalized);
+  }
+}
+
+function extractFindingIds(findings) {
+  if (!Array.isArray(findings) || findings.length === 0) return [];
+  return [...new Set(findings.map(f => f?.id || f?.type || f?.antipattern).filter(Boolean))];
+}
+
+function profileFindings(profile, meta, callback) {
+  if (!profile) return callback();
+  const started = profileNow();
+  const findings = callback();
+  recordProfileEvent(profile, {
+    ...meta,
+    ms: profileNow() - started,
+    findings: Array.isArray(findings) ? findings.length : 0,
+    findingIds: extractFindingIds(findings),
+  });
+  return findings;
+}
+
+function profileStep(profile, meta, callback) {
+  if (!profile) return callback();
+  const started = profileNow();
+  try {
+    return callback();
+  } finally {
+    recordProfileEvent(profile, {
+      ...meta,
+      ms: profileNow() - started,
+      findings: 0,
+    });
+  }
+}
+
+async function profileFindingsAsync(profile, meta, callback) {
+  if (!profile) return callback();
+  const started = profileNow();
+  const findings = await callback();
+  recordProfileEvent(profile, {
+    ...meta,
+    ms: profileNow() - started,
+    findings: Array.isArray(findings) ? findings.length : 0,
+    findingIds: extractFindingIds(findings),
+  });
+  return findings;
+}
+
+async function profileStepAsync(profile, meta, callback) {
+  if (!profile) return callback();
+  const started = profileNow();
+  try {
+    return await callback();
+  } finally {
+    recordProfileEvent(profile, {
+      ...meta,
+      ms: profileNow() - started,
+      findings: 0,
+    });
+  }
+}
+
+function percentile(sortedValues, pct) {
+  if (!sortedValues.length) return 0;
+  const idx = Math.min(
+    sortedValues.length - 1,
+    Math.max(0, Math.ceil((pct / 100) * sortedValues.length) - 1),
+  );
+  return sortedValues[idx];
+}
+
+function summarizeDetectorProfile(profile) {
+  const events = Array.isArray(profile)
+    ? profile
+    : (Array.isArray(profile?.events) ? profile.events : []);
+  const groups = new Map();
+  for (const event of events) {
+    const key = [
+      event.engine || 'unknown',
+      event.phase || 'unknown',
+      event.ruleId || 'unknown',
+      event.target || '',
+    ].join('\u0000');
+    let group = groups.get(key);
+    if (!group) {
+      group = {
+        engine: event.engine || 'unknown',
+        phase: event.phase || 'unknown',
+        ruleId: event.ruleId || 'unknown',
+        target: event.target || '',
+        calls: 0,
+        totalMs: 0,
+        findings: 0,
+        samples: [],
+      };
+      groups.set(key, group);
+    }
+    const ms = Number.isFinite(event.ms) ? event.ms : 0;
+    group.calls += 1;
+    group.totalMs += ms;
+    group.findings += Number.isFinite(event.findings) ? event.findings : 0;
+    group.samples.push(ms);
+  }
+  return [...groups.values()]
+    .map(group => {
+      const samples = group.samples.sort((a, b) => a - b);
+      return {
+        engine: group.engine,
+        phase: group.phase,
+        ruleId: group.ruleId,
+        target: group.target,
+        calls: group.calls,
+        totalMs: Number(group.totalMs.toFixed(3)),
+        avgMs: Number((group.totalMs / group.calls).toFixed(3)),
+        p50: Number(percentile(samples, 50).toFixed(3)),
+        p95: Number(percentile(samples, 95).toFixed(3)),
+        findings: group.findings,
+      };
+    })
+    .sort((a, b) => b.totalMs - a.totalMs);
+}
+
+export {
+  profileNow,
+  createDetectorProfile,
+  recordProfileEvent,
+  extractFindingIds,
+  profileFindings,
+  profileStep,
+  profileFindingsAsync,
+  profileStepAsync,
+  percentile,
+  summarizeDetectorProfile,
+};

package/.codex/bundled-skills/impeccable/scripts/detector/registry/antipatterns.mjs

@@ -0,0 +1,278 @@
+const ANTIPATTERNS = [
+  // ── AI slop: tells that something was AI-generated ──
+  {
+    id: 'side-tab',
+    category: 'slop',
+    name: 'Side-tab accent border',
+    description:
+      'Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs. Use a subtler accent or remove it entirely.',
+    skillSection: 'Visual Details',
+    skillGuideline: 'colored accent stripe',
+  },
+  {
+    id: 'border-accent-on-rounded',
+    category: 'slop',
+    name: 'Border accent on rounded element',
+    description:
+      'Thick accent border on a rounded card — the border clashes with the rounded corners. Remove the border or the border-radius.',
+    skillSection: 'Visual Details',
+    skillGuideline: 'colored accent stripe',
+  },
+  {
+    id: 'overused-font',
+    category: 'slop',
+    name: 'Overused font',
+    description:
+      'Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.',
+    skillSection: 'Typography',
+    skillGuideline: 'overused fonts like Inter',
+  },
+  {
+    id: 'single-font',
+    category: 'slop',
+    name: 'Single font for everything',
+    description:
+      'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+    skillSection: 'Typography',
+    skillGuideline: 'only one font family for the entire page',
+  },
+  {
+    id: 'flat-type-hierarchy',
+    category: 'slop',
+    name: 'Flat type hierarchy',
+    description:
+      'Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).',
+    skillSection: 'Typography',
+    skillGuideline: 'flat type hierarchy',
+  },
+  {
+    id: 'gradient-text',
+    category: 'slop',
+    name: 'Gradient text',
+    description:
+      'Gradient text is decorative rather than meaningful — a common AI tell, especially on headings and metrics. Use solid colors for text.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'gradient text for',
+  },
+  {
+    id: 'ai-color-palette',
+    category: 'slop',
+    name: 'AI color palette',
+    description:
+      'Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs. Choose a distinctive, intentional palette.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'AI color palette',
+  },
+  {
+    id: 'nested-cards',
+    category: 'slop',
+    name: 'Nested cards',
+    description:
+      'Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.',
+    skillSection: 'Layout & Space',
+    skillGuideline: 'Nest cards inside cards',
+  },
+  {
+    id: 'monotonous-spacing',
+    category: 'slop',
+    name: 'Monotonous spacing',
+    description:
+      'The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.',
+    skillSection: 'Layout & Space',
+    skillGuideline: 'same spacing everywhere',
+  },
+  {
+    id: 'everything-centered',
+    category: 'slop',
+    name: 'Everything centered',
+    description:
+      'Every text element is center-aligned. Left-aligned text with asymmetric layouts feels more designed. Center only hero sections and CTAs.',
+    skillSection: 'Layout & Space',
+    skillGuideline: 'Center everything',
+  },
+  {
+    id: 'bounce-easing',
+    category: 'slop',
+    name: 'Bounce or elastic easing',
+    description:
+      'Bounce and elastic easing feel dated and tacky. Real objects decelerate smoothly — use exponential easing (ease-out-quart/quint/expo) instead.',
+    skillSection: 'Motion',
+    skillGuideline: 'bounce or elastic easing',
+  },
+  {
+    id: 'dark-glow',
+    category: 'slop',
+    name: 'Dark mode with glowing accents',
+    description:
+      'Dark backgrounds with colored box-shadow glows are the default "cool" look of AI-generated UIs. Use subtle, purposeful lighting instead — or skip the dark theme entirely.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'dark mode with glowing accents',
+  },
+  {
+    id: 'icon-tile-stack',
+    category: 'slop',
+    name: 'Icon tile stacked above heading',
+    description:
+      'A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.',
+    skillSection: 'Typography',
+    skillGuideline: 'large icons with rounded corners above every heading',
+  },
+  {
+    id: 'italic-serif-display',
+    category: 'slop',
+    name: 'Italic serif display headline',
+    description:
+      'Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.',
+    skillSection: 'Typography',
+    skillGuideline: 'oversized italic serif as the hero headline',
+  },
+  {
+    id: 'hero-eyebrow-chip',
+    category: 'slop',
+    name: 'Hero eyebrow / pill chip',
+    description:
+      'A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.',
+    skillSection: 'Typography',
+    skillGuideline: 'tiny uppercase tracked label above the hero headline',
+  },
+  {
+    id: 'repeated-section-kickers',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Repeated section kicker labels',
+    description:
+      'Repeating tiny uppercase tracked labels above section headings turns a brand page into AI editorial scaffolding. Replace them with stronger structure, artifacts, imagery, or a deliberate brand system.',
+    skillSection: 'Typography',
+    skillGuideline: 'repeated eyebrow or kicker labels as section scaffolding',
+  },
+
+  // ── Quality: general design and accessibility issues ──
+  {
+    id: 'pure-black-white',
+    category: 'quality',
+    name: 'Pure black background',
+    description:
+      'Pure #000000 as a background color looks harsh and unnatural. Tint it slightly toward your brand hue (e.g., oklch(12% 0.01 250)) for a more refined feel.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'pure black (#000)',
+  },
+  {
+    id: 'gray-on-color',
+    category: 'quality',
+    name: 'Gray text on colored background',
+    description:
+      'Gray text looks washed out on colored backgrounds. Use a darker shade of the background color instead, or white/near-white for contrast.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'gray text on colored backgrounds',
+  },
+  {
+    id: 'low-contrast',
+    category: 'quality',
+    name: 'Low contrast text',
+    description:
+      'Text does not meet WCAG AA contrast requirements (4.5:1 for body, 3:1 for large text). Increase the contrast between text and background.',
+  },
+  {
+    id: 'layout-transition',
+    category: 'quality',
+    name: 'Layout property animation',
+    description:
+      'Animating width, height, padding, or margin causes layout thrash and janky performance. Use transform and opacity instead, or grid-template-rows for height animations.',
+    skillSection: 'Motion',
+    skillGuideline: 'Animate layout properties',
+  },
+  {
+    id: 'line-length',
+    category: 'quality',
+    name: 'Line length too long',
+    description:
+      'Text lines wider than ~80 characters are hard to read. The eye loses its place tracking back to the start of the next line. Add a max-width (65ch to 75ch) to text containers.',
+    skillSection: 'Layout & Space',
+    skillGuideline: 'wrap beyond ~80 characters',
+  },
+  {
+    id: 'cramped-padding',
+    category: 'quality',
+    name: 'Cramped padding',
+    description:
+      'Text is too close to the edge of its container. Add at least 8px (ideally 12-16px) of padding inside bordered or colored containers.',
+  },
+  {
+    id: 'body-text-viewport-edge',
+    category: 'quality',
+    name: 'Body text touching viewport edge',
+    description:
+      'Body paragraphs render flush against the left or right viewport edge with no container providing horizontal padding. Wrap content in a container with at least 16px (ideally 24-32px) of horizontal padding, or apply max-width with mx-auto.',
+  },
+  {
+    id: 'tight-leading',
+    category: 'quality',
+    name: 'Tight line height',
+    description:
+      'Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.',
+  },
+  {
+    id: 'skipped-heading',
+    category: 'quality',
+    name: 'Skipped heading level',
+    description:
+      'Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.',
+  },
+  {
+    id: 'justified-text',
+    category: 'quality',
+    name: 'Justified text',
+    description:
+      'Justified text without hyphenation creates uneven word spacing ("rivers of white"). Use text-align: left for body text, or enable hyphens: auto if you must justify.',
+  },
+  {
+    id: 'tiny-text',
+    category: 'quality',
+    name: 'Tiny body text',
+    description:
+      'Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.',
+  },
+  {
+    id: 'all-caps-body',
+    category: 'quality',
+    name: 'All-caps body text',
+    description:
+      'Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.',
+    skillSection: 'Typography',
+    skillGuideline: 'long body passages in uppercase',
+  },
+  {
+    id: 'wide-tracking',
+    category: 'quality',
+    name: 'Wide letter spacing on body text',
+    description:
+      'Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.',
+  },
+];
+
+const RULE_ENGINE_SUPPORT = {
+  regex: new Set(['source', 'page-analyzer']),
+  'static-html': new Set(['element', 'page']),
+  browser: new Set(['element', 'page', 'layout']),
+  visual: new Set(['visual-contrast']),
+};
+
+function getAntipattern(id) {
+  return ANTIPATTERNS.find(rule => rule.id === id);
+}
+
+function getRulesForCategory(category) {
+  return ANTIPATTERNS.filter(rule => rule.category === category);
+}
+
+function getRuleEngineSupport(engine) {
+  return RULE_ENGINE_SUPPORT[engine] || new Set();
+}
+
+export {
+  ANTIPATTERNS,
+  RULE_ENGINE_SUPPORT,
+  getAntipattern,
+  getRulesForCategory,
+  getRuleEngineSupport,
+};