Add anti-pattern detection CLI, browser visualizer, gallery page, and build DRY refactor

- Anti-pattern detector script (source/skills/critique/scripts/detect-antipatterns.mjs):
  CLI tool that scans files/dirs for UI anti-patterns via regex. Detects side-tab
  accent borders and border-accent-on-rounded patterns across Tailwind, CSS, JSX.
  Context-aware: skips safe elements (blockquotes, nav, inputs, code), neutral
  colors, and adjusts thresholds based on border-radius co-occurrence.

- Browser visualizer (public/js/detect-antipatterns-browser.js):
  Drop-in script that highlights anti-patterns directly in the browser with
  labeled overlays. Two modes: "static" (regex, matches CLI) and "computed"
  (getComputedStyle, catches CSS cascade). Scans both inline styles and
  <style> blocks.

- Gallery of Shame (public/gallery.html):
  Standalone page showcasing 11 AI anti-pattern examples with thumbnails
  and links. Anti-pattern example pages updated from 1080x1080 Twitter
  format to responsive layouts, labels removed, screenshots retaken at 16:10.

- Critique skill updated to run detector before manual review.

- Build system: skills now support scripts/ directories alongside reference/.
  All 8 provider transformers refactored to use shared.js (DRY).

- 58 new tests covering detection logic, fixtures, CLI integration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

scripts/lib/transformers/opencode.js

@@ -1,84 +1,23 @@
-import path from 'path';
-import {
-  cleanDir,
-  ensureDir,
-  generateYamlFrontmatter,
-  prefixSkillReferences,
-  replacePlaceholders,
-  writeFile,
-} from '../utils.js';
+import { transformProvider } from './shared.js';
 
 /**
- * OpenCode Transformer (Skills Only)
- *
- * All skills output to .opencode/skills/{name}/SKILL.md
- * User-invokable skills get args support in frontmatter.
- *
- * @param {Array} skills - All skills (including user-invokable ones)
- * @param {string} distDir - Distribution output directory
- * @param {Object} patterns - Design patterns data (unused, kept for interface consistency)
- * @param {Object} options - Optional settings
- * @param {string} options.prefix - Prefix to add to user-invokable skill names (e.g., 'i-')
- * @param {string} options.outputSuffix - Suffix for output directory (e.g., '-prefixed')
+ * OpenCode Transformer
+ * Output: .opencode/skills/{name}/SKILL.md
  */
-export function transformOpenCode(
-  skills,
-  distDir,
-  patterns = null,
-  options = {},
-) {
-  const { prefix = '', outputSuffix = '' } = options;
-  const opencodeDir = path.join(distDir, `opencode${outputSuffix}`);
-  const skillsDir = path.join(opencodeDir, '.opencode/skills');
-
-  cleanDir(opencodeDir);
-  ensureDir(skillsDir);
-
-  const allSkillNames = skills.map((s) => s.name);
-  const commandNames = skills
-    .filter((s) => s.userInvokable)
-    .map((s) => `${prefix}${s.name}`);
-  let refCount = 0;
-  for (const skill of skills) {
-    const skillName = `${prefix}${skill.name}`;
-    const skillDir = path.join(skillsDir, skillName);
-
-    const frontmatterObj = {
-      name: skillName,
-      description: skill.description,
-    };
-
-    if (skill.userInvokable) frontmatterObj['user-invokable'] = true;
-    if (skill.args && skill.args.length > 0) frontmatterObj.args = skill.args;
-    if (skill.license) frontmatterObj.license = skill.license;
-    if (skill.compatibility) frontmatterObj.compatibility = skill.compatibility;
-    if (skill.metadata) frontmatterObj.metadata = skill.metadata;
-    if (skill.allowedTools)
-      frontmatterObj['allowed-tools'] = skill.allowedTools;
-
-    const frontmatter = generateYamlFrontmatter(frontmatterObj);
-    let skillBody = replacePlaceholders(skill.body, 'opencode', commandNames);
-    if (prefix)
-      skillBody = prefixSkillReferences(skillBody, prefix, allSkillNames);
-    const content = `${frontmatter}\n\n${skillBody}`;
-    const outputPath = path.join(skillDir, 'SKILL.md');
-    writeFile(outputPath, content);
-
-    // Copy reference files if they exist
-    if (skill.references && skill.references.length > 0) {
-      const refDir = path.join(skillDir, 'reference');
-      ensureDir(refDir);
-      for (const ref of skill.references) {
-        const refOutputPath = path.join(refDir, `${ref.name}.md`);
-        const refContent = replacePlaceholders(ref.content, 'opencode');
-        writeFile(refOutputPath, refContent);
-        refCount++;
-      }
-    }
-  }
-
-  const userInvokableCount = skills.filter((s) => s.userInvokable).length;
-  const refInfo = refCount > 0 ? ` (${refCount} reference files)` : '';
-  const prefixInfo = prefix ? ` [${prefix}prefixed]` : '';
-  console.log(`✓ OpenCode${prefixInfo}: ${skills.length} skills (${userInvokableCount} user-invokable)${refInfo}`);
+export function transformOpenCode(skills, distDir, patterns = null, options = {}) {
+  transformProvider({
+    provider: 'opencode',
+    displayName: 'OpenCode',
+    configDir: '.opencode',
+    buildFrontmatter: (skill, skillName) => {
+      const obj = { name: skillName, description: skill.description };
+      if (skill.userInvokable) obj['user-invokable'] = true;
+      if (skill.args && skill.args.length > 0) obj.args = skill.args;
+      if (skill.license) obj.license = skill.license;
+      if (skill.compatibility) obj.compatibility = skill.compatibility;
+      if (skill.metadata) obj.metadata = skill.metadata;
+      if (skill.allowedTools) obj['allowed-tools'] = skill.allowedTools;
+      return obj;
+    },
+  }, skills, distDir, options);
 }