page-skills-and-agents

Skills & Agents pages

Routes

URL	Kind	Render
https://sahin.io/angel-investments/skills-and-agents	legacyFeature (menu page, Research group)	React page skillsAndAgents
https://sahin.io/angel-investments/skills-and-agents/{name}	reactPage (slug family, one per skill or agent)	React page skillDetail

{name} is the skill or agent name from its frontmatter (kebab-case). One detail page per catalog item (about 25 today).

Files

Part	File
Catalog generator	scripts/sync-skills-catalog.mjs (buildSkillsCatalog, redact, REDACTION_DENY_LIST, EXCLUDED_SKILLS)
Generated catalog (committed)	data/skills-catalog.json
Props builder	server/publicPages/skillsAndAgents.ts (buildSkillsAndAgentsProps, listSkillSlugs, skillDetailPageMeta, buildSkillDetailProps)
Types	client/src/publicPages/skillsAndAgentsTypes.ts
Components	client/src/publicPages/SkillsAndAgentsPage.tsx, client/src/publicPages/SkillDetailPage.tsx
CSS	client/src/publicPages/styles/skillsAndAgents.css (imported in client/src/index.css)
Copy	content/pages/skills-and-agents.yaml (labels, detail titles, foundation list, rebuildOrder)
Menu entry, index title and description	content/shared/navigation.yaml (path /skills-and-agents, Research group)
Index route	server/publicReactPages.ts reactPageForRoute (SKILLS_PATH)
Detail family	server/reactPageRoutes.ts FAMILIES entry with prefix: SKILLS_PATH
Registration	client/src/publicPages/types.ts, PublicReactPageView.tsx, components.client.ts, components.server.ts

Inputs: .claude/skills/<name>/SKILL.md (directory skills only; the loose legacy .claude/skills/*.md files are not listed) and .claude/agents/*.md. The private data-source skills (EXCLUDED_SKILLS) are left out.

Sections

Index: header (eyebrow, title, subtitle, group counts) → Rebuild order (numbered chips linking to each spec; a numbered list on mobile) → Foundation → Pages → Quality & Ship → Agents (cards: type, name, description, route-pattern count, "Read spec").

Grouping (groupOf): agents → Agents; names in the YAML foundation list → Foundation; skills with routes: → Pages; every other skill → Quality & Ship.

Detail: back link → name and description → facts (source file, routes covered, agent tools) → the spec, Markdown rendered on the server with marked. Raw HTML in a spec is escaped, relative links render as plain text, images as their alt text.

SEO

• Index: title and description from its navigation.yaml entry; JSON-LD from renderLegacyFeaturePage (see seo-head-and-schema).
• Detail: title {name}: Skill Spec | Sahin Boydas (or Agent Spec), description = the item's description; shell from renderReactShellPage; indexable, in the sitemap.

Rules

• Never hand-edit data/skills-catalog.json. After changing any skill or agent: node scripts/sync-skills-catalog.mjs and commit the catalog with it.
• Redaction: the deny-list turns the Airtable base/table/view IDs, the token path and the Cloudflare account ID into {PLACEHOLDERS}; lines with an AngelList portfolio link, private deal-field keys and the public content policy's terms become [redacted]. Add a new private value to REDACTION_DENY_LIST before it can reach a skill (private-data-boundary).
• Every page word lives in content/pages/skills-and-agents.yaml (page-content-yaml); names in rebuildOrder and foundation must exist in the catalog or the build fails.

Tests

• server/skills-catalog.test.ts: catalog current; no deny-listed value, AngelList link, deal-field key or restricted term.
• server/page-skills-coverage.test.ts: every manifest route matches exactly one page skill's routes:.
• server/shared-content.test.ts, server/site-copy-module.test.ts: menu and generated copy module.

Rebuild from scratch

1. Write scripts/sync-skills-catalog.mjs (frontmatter via js-yaml, redaction, --check), run it to create data/skills-catalog.json.
2. Write content/pages/skills-and-agents.yaml, then node scripts/sync-site-copy-module.mjs (creates client/src/generated/copy/pages/skills-and-agents.ts).
3. Types, builder, the two components and the CSS (see Files), following new-react-page.
4. Register both kinds in types.ts, PublicReactPageView.tsx, components.client.ts, components.server.ts; index in reactPageForRoute, detail family in reactPageRoutes.ts FAMILIES.
5. Add /skills-and-agents to the Research section and pages of content/shared/navigation.yaml, rerun the copy sync.
6. Add both tests; run them, then deploy-gate, ui-before-after (/skills-and-agents and one detail page, desktop and mobile) and ship-to-production.