Files
pbakaus_impeccable/scripts/lib/sub-pages-data.js
T
Paul Bakaus a89f7f5040 Polish pass on editorial wrappers and skill detail layout
Feedback round from first review of the skill pages. Six concrete fixes:

1. Contain the auto-rendered SKILL.md in a distinct card.
   The "skill itself" section was flowing straight into the editorial
   wrapper above, making the two blocks read as one long mixed
   document. Wrap the canonical body in .skill-source-card: white
   paper background, mist border, rounded, with a small "SKILL.md"
   badge header and an italic subtitle. Drop the old full-width
   divider treatment; the card does the visual separation work.

2. Rewrite the /impeccable "do not fight the opinion" pitfall.
   The old text said "fighting the opinion usually produces worse
   output", which discouraged informed pushback. Replace with language
   that explicitly encourages users with real reasons (brand guideline,
   accessibility, user research) to push back; the skill raises the
   floor, not overrules your judgment when you have evidence.

3. Move /onboard from create to refine.
   Onboarding is refinement of empty states and first-run experiences,
   not greenfield creation. Fixed in:
   - scripts/lib/sub-pages-data.js SKILL_CATEGORIES
   - public/js/data.js commandCategories
   Both locations now list onboard under 'refine'.

4. De-dupe overdrive and animate.
   - overdrive: "how it works" listed 7 techniques as bullets and then
     "try it" listed 5 concrete examples using the same 7 techniques.
     Collapse "how it works" into a tight paragraph and make "try it"
     a specific scenario instead of a laundry list.
   - animate: pitfalls repeated the "no layout properties" rule that
     was already stated in "how it works". Drop the duplicate.

5. Remove outdated tutorial guidance.
   getting-started.md said "Cursor needs Nightly channel plus Agent
   Skills in Settings. Gemini CLI needs the preview version." Neither
   is true anymore. Replace with a generic pointer to check the
   harness's own skill docs.

6. Embed the live visual overlay in critique-with-overlay tutorial.
   The tutorial now renders the same demo iframe the homepage uses
   (/antipattern-examples/visual-mode-demo.html) inside step 2, with
   a mac-window chrome frame that mirrors the homepage preview. New
   .tutorial-embed CSS in sub-pages.css defines the header with
   traffic-light dots + mono title, the iframe body (520px tall),
   and an optional caption. The user now sees the overlay in action
   before being asked to run it locally.
2026-04-08 10:26:01 -07:00

189 lines
6.0 KiB
JavaScript

/**
* Build the data model used by the skill / anti-pattern / tutorial page
* generators.
*
* Single source of truth:
* - source/skills/{id}/SKILL.md → skill frontmatter + body
* - source/skills/{id}/reference/*.md → skill reference files
* - src/detect-antipatterns.mjs → ANTIPATTERNS array (parsed)
* - content/site/skills/{id}.md → optional editorial wrapper
* - content/site/tutorials/{slug}.md → full tutorial content
*/
import fs from 'node:fs';
import path from 'node:path';
import { readSourceFiles, parseFrontmatter } from './utils.js';
/**
* Skills that should be excluded from the index and not get a detail page.
* These are deprecated shims or internal skills that users shouldn't browse.
*/
const EXCLUDED_SKILLS = new Set([
'frontend-design', // deprecated, renamed to impeccable
'teach-impeccable', // deprecated, folded into /impeccable teach
]);
/**
* Hand-curated category map for user-invocable skills.
* Mirrors public/js/data.js commandCategories. Validated below: the
* generator fails if any user-invocable skill is missing from this map.
*/
const SKILL_CATEGORIES = {
// CREATE - build something new
impeccable: 'create',
shape: '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',
onboard: '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
extract: 'system',
};
export const CATEGORY_ORDER = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system'];
export const CATEGORY_LABELS = {
create: 'Create',
evaluate: 'Evaluate',
refine: 'Refine',
simplify: 'Simplify',
harden: 'Harden',
system: 'System',
};
export const CATEGORY_DESCRIPTIONS = {
create: 'Build something new, from a blank page to a working feature.',
evaluate: 'Review what you have. Score it, critique it, find what to fix.',
refine: 'Improve one dimension at a time: type, layout, color, motion.',
simplify: 'Strip complexity. Remove what does not earn its place.',
harden: 'Make it production-ready. Edge cases, performance, polish.',
system: 'Setup and tooling. Design system work, extraction, organization.',
};
/**
* Parse the ANTIPATTERNS array out of src/detect-antipatterns.mjs.
* Mirrors the trick in scripts/build.js validateAntipatternRules() so we
* don't have to run the browser-only module.
*/
export function readAntipatternRules(rootDir) {
const detectPath = path.join(rootDir, 'src/detect-antipatterns.mjs');
const src = fs.readFileSync(detectPath, 'utf-8');
const match = src.match(/const ANTIPATTERNS = \[([\s\S]*?)\n\];/);
if (!match) {
throw new Error(`Could not extract ANTIPATTERNS from ${detectPath}`);
}
// eslint-disable-next-line no-new-func
return new Function(`return [${match[1]}]`)();
}
/**
* Read an optional editorial wrapper file for a skill or tutorial.
* Returns { frontmatter, body } or null if the file doesn't exist.
*/
export function readEditorialWrapper(contentDir, kind, slug) {
const filePath = path.join(contentDir, kind, `${slug}.md`);
if (!fs.existsSync(filePath)) return null;
const content = fs.readFileSync(filePath, 'utf-8');
return parseFrontmatter(content);
}
/**
* Build the full sub-page data model.
*
* @param {string} rootDir - repo root
* @returns {{
* skills: Array,
* skillsByCategory: Record<string, Array>,
* knownSkillIds: Set<string>,
* rules: Array,
* tutorials: Array,
* }}
*/
export function buildSubPageData(rootDir) {
const { skills: rawSkills } = readSourceFiles(rootDir);
const contentDir = path.join(rootDir, 'content/site');
// Filter to user-invocable, non-deprecated skills.
const skills = rawSkills
.filter((s) => s.userInvocable && !EXCLUDED_SKILLS.has(s.name))
.map((s) => {
const category = SKILL_CATEGORIES[s.name];
const editorial = readEditorialWrapper(contentDir, 'skills', s.name);
return {
id: s.name,
name: s.name,
description: s.description,
argumentHint: s.argumentHint,
category,
body: s.body,
references: s.references,
editorial, // may be null
};
})
.sort((a, b) => a.name.localeCompare(b.name));
// Validate the category map covers every user-invocable skill.
const missing = skills.filter((s) => !s.category).map((s) => s.id);
if (missing.length > 0) {
throw new Error(
`SKILL_CATEGORIES in scripts/lib/sub-pages-data.js is missing entries for: ${missing.join(', ')}`,
);
}
const knownSkillIds = new Set(skills.map((s) => s.id));
const skillsByCategory = {};
for (const cat of CATEGORY_ORDER) skillsByCategory[cat] = [];
for (const skill of skills) skillsByCategory[skill.category].push(skill);
// Anti-pattern rules, grouped for the index.
const rules = readAntipatternRules(rootDir);
// Tutorials: each required file in content/site/tutorials/.
const tutorialsDir = path.join(contentDir, 'tutorials');
const tutorials = [];
if (fs.existsSync(tutorialsDir)) {
const files = fs.readdirSync(tutorialsDir).filter((f) => f.endsWith('.md'));
for (const file of files) {
const slug = path.basename(file, '.md');
const raw = fs.readFileSync(path.join(tutorialsDir, file), 'utf-8');
const { frontmatter, body } = parseFrontmatter(raw);
tutorials.push({
slug,
title: frontmatter.title || slug,
description: frontmatter.description || '',
tagline: frontmatter.tagline || '',
order: frontmatter.order ? Number(frontmatter.order) : 99,
body,
});
}
tutorials.sort((a, b) => a.order - b.order);
}
return {
skills,
skillsByCategory,
knownSkillIds,
rules,
tutorials,
};
}