pm-workflow-studio 0.1.0

package/.claude/skills/impeccable/scripts/detector/engines/static-html/detect-html.mjs

@@ -0,0 +1,174 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { GENERIC_FONTS, OVERUSED_FONTS } from '../../shared/constants.mjs';
+import { isFullPage } from '../../shared/page.mjs';
+import { finding } from '../../findings.mjs';
+import { profileFindings, profileStep, profileStepAsync } from '../../profile/profiler.mjs';
+import {
+  checkElementBorders,
+  checkElementColors,
+  checkElementGlow,
+  checkElementHeroEyebrow,
+  checkElementIconTile,
+  checkElementItalicSerif,
+  checkElementMotion,
+  checkElementQuality,
+  checkHtmlPatterns,
+  checkPageLayout,
+  checkPageQualityFromDoc,
+  checkRepeatedSectionKickersFromDoc,
+  resolveBackground,
+  resolveBorderRadiusPx,
+} from '../../rules/checks.mjs';
+import { detectText } from '../regex/detect-text.mjs';
+import {
+  StaticDocument,
+  buildStaticStyleMap,
+  buildStaticWindow,
+  collectStaticCssText,
+} from './css-cascade.mjs';
+
+function checkStaticPageTypography(document, window) {
+  const findings = [];
+  const fonts = new Set();
+  const overusedFound = new Set();
+  for (const el of document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, dd, blockquote, figcaption, a, button, label, span, div')) {
+    const hasText = el.childNodes.some(n => n.nodeType === 3 && n.textContent.trim().length > 0);
+    if (!hasText) continue;
+    const ff = window.getComputedStyle(el).fontFamily || '';
+    const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
+    const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
+    if (!primary) continue;
+    fonts.add(primary);
+    if (OVERUSED_FONTS.has(primary)) overusedFound.add(primary);
+  }
+  for (const font of overusedFound) {
+    findings.push({ id: 'overused-font', snippet: `Primary font: ${font}` });
+  }
+  if (fonts.size === 1 && document.querySelectorAll('*').length >= 20) {
+    findings.push({ id: 'single-font', snippet: `only font used is ${[...fonts][0]}` });
+  }
+  const sizes = new Set();
+  for (const el of document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div')) {
+    const fontSize = parseFloat(window.getComputedStyle(el).fontSize);
+    if (fontSize >= 8 && fontSize < 200) sizes.add(Math.round(fontSize * 10) / 10);
+  }
+  if (sizes.size >= 3) {
+    const sorted = [...sizes].sort((a, b) => a - b);
+    const ratio = sorted[sorted.length - 1] / sorted[0];
+    if (ratio < 2.0) {
+      findings.push({ id: 'flat-type-hierarchy', snippet: `Sizes: ${sorted.map(s => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
+    }
+  }
+  return findings;
+}
+
+const STATIC_ELEMENT_RULES = [
+  { id: 'border-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementBorders(tag, style, null, resolveBorderRadiusPx(el, style, parseFloat(style.width) || 0, window)) },
+  { id: 'color-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementColors(el, style, tag, window, customPropMap, false) },
+  { id: 'dark-glow', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementGlow(tag, style, resolveBackground(el.parentElement || el, window, customPropMap)) },
+  { id: 'motion-rules', selector: '*', run: (el, tag, style) => checkElementMotion(tag, style) },
+  { id: 'icon-tile-stack', selector: 'h1,h2,h3,h4,h5,h6', run: (el, tag, _style, window) => checkElementIconTile(el, tag, window) },
+  { id: 'italic-serif-display', selector: 'h1,h2', run: (el, tag, style) => checkElementItalicSerif(el, style, tag) },
+  { id: 'hero-eyebrow-chip', selector: 'h1', run: (el, tag, style, window, customPropMap) => checkElementHeroEyebrow(el, style, tag, window, customPropMap) },
+  { id: 'quality-rules', selector: '*', run: (el, tag, style, window) => checkElementQuality(el, style, tag, window) },
+];
+
+async function detectHtml(filePath, options = {}) {
+  const profile = options?.profile;
+  const html = profileStep(profile, {
+    engine: 'static-html',
+    phase: 'setup',
+    ruleId: 'read-html',
+    target: filePath,
+  }, () => fs.readFileSync(filePath, 'utf-8'));
+
+  let modules;
+  try {
+    modules = await profileStepAsync(profile, {
+      engine: 'static-html',
+      phase: 'setup',
+      ruleId: 'import-static-parser',
+      target: filePath,
+    }, async () => {
+      const [htmlparser2, cssSelect, csstree, domutils] = await Promise.all([
+        import('htmlparser2'),
+        import('css-select'),
+        import('css-tree'),
+        import('domutils'),
+      ]);
+      return {
+        parseDocument: htmlparser2.parseDocument,
+        selectAll: cssSelect.selectAll,
+        selectOne: cssSelect.selectOne,
+        is: cssSelect.is,
+        csstree,
+        domutils,
+      };
+    });
+  } catch {
+    return detectText(html, filePath, options);
+  }
+
+  const resolvedPath = path.resolve(filePath);
+  const fileDir = path.dirname(resolvedPath);
+  const root = profileStep(profile, {
+    engine: 'static-html',
+    phase: 'parse-html',
+    ruleId: 'parse-document',
+    target: filePath,
+  }, () => modules.parseDocument(html, { lowerCaseAttributeNames: false, lowerCaseTags: true }));
+
+  const cssText = collectStaticCssText(root, fileDir, profile, filePath, modules);
+  const document = new StaticDocument(root, modules);
+  buildStaticStyleMap(root, document, cssText, modules, profile, filePath);
+  const window = buildStaticWindow(document);
+
+  const customPropMap = null;
+
+  const findings = [];
+  const runElementCheck = (ruleId, callback) => profile
+    ? profileFindings(profile, { engine: 'static-html', phase: 'element', ruleId, target: filePath }, callback)
+    : callback();
+
+  const visitedByRule = new Map();
+  for (const rule of STATIC_ELEMENT_RULES) {
+    const elements = document.querySelectorAll(rule.selector);
+    visitedByRule.set(rule.id, elements.length);
+    for (const el of elements) {
+      const tag = el.tagName.toLowerCase();
+      const style = window.getComputedStyle(el);
+      for (const f of runElementCheck(rule.id, () => rule.run(el, tag, style, window, customPropMap))) {
+        findings.push(finding(f.id, filePath, f.snippet));
+      }
+    }
+  }
+
+  if (isFullPage(html)) {
+    const runPageCheck = (ruleId, callback) => profile
+      ? profileFindings(profile, { engine: 'static-html', phase: 'page', ruleId, target: filePath }, callback)
+      : callback();
+    for (const f of runPageCheck('typography-rules', () => checkStaticPageTypography(document, window))) {
+      findings.push(finding(f.id, filePath, f.snippet));
+    }
+    for (const f of runPageCheck('repeated-section-kickers', () => checkRepeatedSectionKickersFromDoc(document, window))) {
+      findings.push(finding(f.id, filePath, f.snippet));
+    }
+    for (const f of runPageCheck('layout-rules', () => checkPageLayout(document, window))) {
+      findings.push(finding(f.id, filePath, f.snippet));
+    }
+    for (const f of runPageCheck('skipped-heading', () => checkPageQualityFromDoc(document))) {
+      findings.push(finding(f.id, filePath, f.snippet));
+    }
+    for (const f of runPageCheck('html-patterns', () => checkHtmlPatterns(html).filter(item =>
+      item.id !== 'bounce-easing' && item.id !== 'layout-transition'
+    ))) {
+      findings.push(finding(f.id, filePath, f.snippet));
+    }
+  }
+
+  return findings;
+}
+
+export { checkStaticPageTypography, STATIC_ELEMENT_RULES, detectHtml };

package/.claude/skills/impeccable/scripts/detector/engines/visual/screenshot-contrast.mjs

@@ -0,0 +1,189 @@
+function sanitizeScreenshotClip(clip, viewport) {
+  if (!clip) return null;
+  const x = Math.max(0, Math.floor(clip.x || 0));
+  const y = Math.max(0, Math.floor(clip.y || 0));
+  const width = Math.min(
+    Math.max(1, Math.ceil(clip.width || 0)),
+    Math.max(1, viewport?.width || 1600),
+  );
+  const height = Math.min(
+    Math.max(1, Math.ceil(clip.height || 0)),
+    320,
+  );
+  if (width < 1 || height < 1) return null;
+  return { x, y, width, height };
+}
+
+async function compareScreenshotContrast(page, beforeBase64, afterBase64, candidate) {
+  return page.evaluate(async ({ beforeBase64, afterBase64, candidate }) => {
+    const loadImage = (base64) => new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error('Could not decode contrast screenshot'));
+      img.src = `data:image/png;base64,${base64}`;
+    });
+    const [before, after] = await Promise.all([loadImage(beforeBase64), loadImage(afterBase64)]);
+    const width = Math.min(before.width, after.width);
+    const height = Math.min(before.height, after.height);
+    if (width < 1 || height < 1) return null;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return null;
+
+    ctx.drawImage(before, 0, 0, width, height);
+    const beforePixels = ctx.getImageData(0, 0, width, height).data;
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(after, 0, 0, width, height);
+    const afterPixels = ctx.getImageData(0, 0, width, height).data;
+
+    const luminance = ({ r, g, b }) => {
+      const convert = c => {
+        const v = c / 255;
+        return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+      };
+      return 0.2126 * convert(r) + 0.7152 * convert(g) + 0.0722 * convert(b);
+    };
+    const ratio = (a, b) => {
+      const l1 = luminance(a);
+      const l2 = luminance(b);
+      return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    };
+
+    const cssTextColor = candidate.textColor && !candidate.preferRenderedForeground
+      ? {
+          r: candidate.textColor.r,
+          g: candidate.textColor.g,
+          b: candidate.textColor.b,
+        }
+      : null;
+    const ratios = [];
+    let glyphPixels = 0;
+    let strongestDelta = 0;
+    for (let i = 0; i < beforePixels.length; i += 4) {
+      const delta = Math.abs(beforePixels[i] - afterPixels[i])
+        + Math.abs(beforePixels[i + 1] - afterPixels[i + 1])
+        + Math.abs(beforePixels[i + 2] - afterPixels[i + 2])
+        + Math.abs(beforePixels[i + 3] - afterPixels[i + 3]);
+      strongestDelta = Math.max(strongestDelta, delta);
+      if (delta < 10) continue;
+      glyphPixels++;
+      const fg = cssTextColor || {
+        r: beforePixels[i],
+        g: beforePixels[i + 1],
+        b: beforePixels[i + 2],
+      };
+      const bg = {
+        r: afterPixels[i],
+        g: afterPixels[i + 1],
+        b: afterPixels[i + 2],
+      };
+      ratios.push(ratio(fg, bg));
+    }
+
+    if (ratios.length < 8) {
+      return {
+        glyphPixels,
+        strongestDelta,
+        worstRatio: null,
+        p10Ratio: null,
+        medianRatio: null,
+      };
+    }
+
+    ratios.sort((a, b) => a - b);
+    const pick = pct => ratios[Math.min(ratios.length - 1, Math.max(0, Math.floor((pct / 100) * ratios.length)))];
+    return {
+      glyphPixels,
+      strongestDelta,
+      worstRatio: ratios[0],
+      p10Ratio: pick(10),
+      medianRatio: pick(50),
+    };
+  }, { beforeBase64, afterBase64, candidate });
+}
+
+async function captureVisualContrastCandidate(page, candidate, viewport) {
+  const clip = sanitizeScreenshotClip(candidate.clip, viewport);
+  if (!clip) return null;
+
+  const beforeBase64 = await page.screenshot({
+    encoding: 'base64',
+    clip,
+    captureBeyondViewport: true,
+  });
+  const token = `impeccable-contrast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const applied = await page.evaluate(({ selector, token, backgroundClipText }) => {
+    let el;
+    try {
+      el = document.querySelector(selector);
+    } catch {
+      return false;
+    }
+    if (!el) return false;
+    let style = document.getElementById('impeccable-visual-contrast-hide-style');
+    if (!style) {
+      style = document.createElement('style');
+      style.id = 'impeccable-visual-contrast-hide-style';
+      style.textContent = [
+        '[data-impeccable-visual-contrast-target] {',
+        '  color: transparent !important;',
+        '  -webkit-text-fill-color: transparent !important;',
+        '  text-shadow: none !important;',
+        '}',
+        '[data-impeccable-visual-contrast-target][data-impeccable-bgclip-text="true"] {',
+        '  background-image: none !important;',
+        '}',
+      ].join('\n');
+      document.head.appendChild(style);
+    }
+    el.setAttribute('data-impeccable-visual-contrast-target', token);
+    if (backgroundClipText) el.setAttribute('data-impeccable-bgclip-text', 'true');
+    return true;
+  }, {
+    selector: candidate.selector,
+    token,
+    backgroundClipText: candidate.backgroundClipText,
+  });
+  if (!applied) return null;
+
+  let afterBase64;
+  try {
+    afterBase64 = await page.screenshot({
+      encoding: 'base64',
+      clip,
+      captureBeyondViewport: true,
+    });
+  } finally {
+    await page.evaluate(({ selector }) => {
+      try {
+        const el = document.querySelector(selector);
+        if (el) {
+          el.removeAttribute('data-impeccable-visual-contrast-target');
+          el.removeAttribute('data-impeccable-bgclip-text');
+        }
+      } catch {
+        // Ignore invalid or stale selectors during cleanup.
+      }
+    }, { selector: candidate.selector }).catch(() => {});
+  }
+
+  const metrics = await compareScreenshotContrast(page, beforeBase64, afterBase64, candidate);
+  if (!metrics || !Number.isFinite(metrics.p10Ratio) || metrics.glyphPixels < 8) return null;
+  const measuredRatio = metrics.p10Ratio;
+  if (measuredRatio >= candidate.threshold) return null;
+  const textLabel = candidate.text ? ` "${candidate.text}"` : '';
+  const reasonLabel = (candidate.reasons || []).slice(0, 3).join(', ') || 'visual background';
+  return {
+    id: 'low-contrast',
+    snippet: `pixel contrast ${measuredRatio.toFixed(1)}:1 median ${metrics.medianRatio.toFixed(1)}:1 (need ${candidate.threshold}:1) on ${reasonLabel}${textLabel}`,
+  };
+}
+
+export {
+  sanitizeScreenshotClip,
+  compareScreenshotContrast,
+  captureVisualContrastCandidate,
+};

package/.claude/skills/impeccable/scripts/detector/findings.mjs

@@ -0,0 +1,12 @@
+import { getAntipattern } from './registry/antipatterns.mjs';
+
+function getAP(id) {
+  return getAntipattern(id);
+}
+
+function finding(id, filePath, snippet, line = 0) {
+  const ap = getAP(id);
+  return { antipattern: id, name: ap.name, description: ap.description, severity: ap.severity || 'warning', file: filePath, line, snippet };
+}
+
+export { getAP, finding };

package/.claude/skills/impeccable/scripts/detector/node/file-system.mjs

@@ -0,0 +1,198 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+// ---------------------------------------------------------------------------
+// File walker
+// ---------------------------------------------------------------------------
+
+const SKIP_DIRS = new Set([
+  'node_modules', '.git', 'dist', 'build', '.next', '.nuxt', '.output',
+  '.svelte-kit', '__pycache__', '.turbo', '.vercel',
+]);
+
+const SCANNABLE_EXTENSIONS = new Set([
+  '.html', '.htm', '.css', '.scss', '.less',
+  '.jsx', '.tsx', '.js', '.ts',
+  '.vue', '.svelte', '.astro',
+]);
+
+const HTML_EXTENSIONS = new Set(['.html', '.htm']);
+
+function walkDir(dir) {
+  const files = [];
+  let entries;
+  try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return files; }
+  for (const entry of entries) {
+    if (SKIP_DIRS.has(entry.name)) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...walkDir(full));
+    else if (SCANNABLE_EXTENSIONS.has(path.extname(entry.name).toLowerCase())) files.push(full);
+  }
+  return files;
+}
+
+
+// ---------------------------------------------------------------------------
+// Import graph (multi-file awareness)
+// ---------------------------------------------------------------------------
+
+function resolveImport(specifier, fromDir, fileSet) {
+  if (!/^[./]/.test(specifier)) return null; // skip bare specifiers
+  const base = path.resolve(fromDir, specifier);
+  if (fileSet.has(base)) return base;
+  for (const ext of SCANNABLE_EXTENSIONS) {
+    const withExt = base + ext;
+    if (fileSet.has(withExt)) return withExt;
+  }
+  // index file convention
+  for (const ext of SCANNABLE_EXTENSIONS) {
+    const indexFile = path.join(base, 'index' + ext);
+    if (fileSet.has(indexFile)) return indexFile;
+  }
+  return null;
+}
+
+function buildImportGraph(files) {
+  const fileSet = new Set(files);
+  const graph = new Map();
+
+  for (const file of files) {
+    const content = fs.readFileSync(file, 'utf-8');
+    const dir = path.dirname(file);
+    const imports = new Set();
+
+    // ES imports: import ... from '...' and import '...'
+    const esRe = /import\s+(?:[\s\S]*?from\s+)?['"]([^'"]+)['"]/g;
+    let m;
+    while ((m = esRe.exec(content)) !== null) {
+      const resolved = resolveImport(m[1], dir, fileSet);
+      if (resolved) imports.add(resolved);
+    }
+
+    // CSS @import
+    const cssRe = /@import\s+(?:url\(\s*)?['"]?([^'");\s]+)['"]?\s*\)?/g;
+    while ((m = cssRe.exec(content)) !== null) {
+      const resolved = resolveImport(m[1], dir, fileSet);
+      if (resolved) imports.add(resolved);
+    }
+
+    // SCSS @use / @forward
+    const scssRe = /@(?:use|forward)\s+['"]([^'"]+)['"]/g;
+    while ((m = scssRe.exec(content)) !== null) {
+      const resolved = resolveImport(m[1], dir, fileSet);
+      if (resolved) imports.add(resolved);
+    }
+
+    graph.set(file, imports);
+  }
+  return graph;
+}
+
+// ---------------------------------------------------------------------------
+// Framework dev server detection
+// ---------------------------------------------------------------------------
+
+const FRAMEWORK_CONFIGS = [
+  { name: 'Next.js', files: ['next.config.js', 'next.config.mjs', 'next.config.ts'], defaultPort: 3000,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { header: 'x-powered-by', value: /next/i } },
+  { name: 'SvelteKit', files: ['svelte.config.js', 'svelte.config.ts'], defaultPort: 5173,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { header: 'x-sveltekit-page', value: null } },
+  { name: 'Nuxt', files: ['nuxt.config.js', 'nuxt.config.ts'], defaultPort: 3000,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { header: 'x-powered-by', value: /nuxt/i } },
+  { name: 'Vite', files: ['vite.config.js', 'vite.config.ts', 'vite.config.mjs'], defaultPort: 5173,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { body: /@vite\/client/ } },
+  { name: 'Astro', files: ['astro.config.js', 'astro.config.ts', 'astro.config.mjs'], defaultPort: 4321,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { body: /astro/i } },
+  { name: 'Angular', files: ['angular.json'], defaultPort: 4200,
+    portRe: /"port"\s*:\s*(\d+)/,
+    fingerprint: { body: /ng-version/i } },
+  { name: 'Remix', files: ['remix.config.js', 'remix.config.ts'], defaultPort: 3000,
+    portRe: /port\s*[:=]\s*(\d+)/,
+    fingerprint: { header: 'x-powered-by', value: /remix/i } },
+];
+
+function detectFrameworkConfig(dir) {
+  let entries;
+  try { entries = fs.readdirSync(dir); } catch { return null; }
+  const entrySet = new Set(entries);
+
+  for (const cfg of FRAMEWORK_CONFIGS) {
+    const match = cfg.files.find(f => entrySet.has(f));
+    if (!match) continue;
+
+    const configPath = path.join(dir, match);
+    let port = cfg.defaultPort;
+    try {
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const portMatch = content.match(cfg.portRe);
+      if (portMatch) port = parseInt(portMatch[1], 10);
+    } catch { /* use default */ }
+
+    return { name: cfg.name, port, configPath, fingerprint: cfg.fingerprint };
+  }
+  return null;
+}
+
+/**
+ * Check if a port is listening and optionally verify it matches the expected framework.
+ * Returns { listening: true, matched: true/false } or { listening: false }.
+ */
+async function isPortListening(port, fingerprint = null) {
+  if (!fingerprint) {
+    // Simple TCP probe fallback
+    const net = await import('node:net');
+    return new Promise((resolve) => {
+      const sock = net.default.createConnection({ port, host: '127.0.0.1' });
+      sock.setTimeout(500);
+      sock.on('connect', () => { sock.destroy(); resolve({ listening: true, matched: true }); });
+      sock.on('error', () => resolve({ listening: false }));
+      sock.on('timeout', () => { sock.destroy(); resolve({ listening: false }); });
+    });
+  }
+
+  // HTTP probe with fingerprint matching
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 2000);
+    const res = await fetch(`http://localhost:${port}/`, { signal: controller.signal, redirect: 'follow' });
+    clearTimeout(timeout);
+
+    // Check header fingerprint
+    if (fingerprint.header) {
+      const val = res.headers.get(fingerprint.header);
+      if (val && (!fingerprint.value || fingerprint.value.test(val))) {
+        return { listening: true, matched: true };
+      }
+    }
+
+    // Check body fingerprint
+    if (fingerprint.body) {
+      const body = await res.text();
+      if (fingerprint.body.test(body)) {
+        return { listening: true, matched: true };
+      }
+    }
+
+    // Port is listening but doesn't match the expected framework
+    return { listening: true, matched: false };
+  } catch {
+    return { listening: false };
+  }
+}
+
+export {
+  SKIP_DIRS,
+  SCANNABLE_EXTENSIONS,
+  HTML_EXTENSIONS,
+  walkDir,
+  resolveImport,
+  buildImportGraph,
+  FRAMEWORK_CONFIGS,
+  detectFrameworkConfig,
+  isPortListening,
+};