Project HTML Wiki Skill

Use this skill to create and maintain an HTML-first project memory layer for agentic development. Zero-context intake and bootstrapping are modes; ongoing feature planning, plan maintenance, codebase-to-wiki sync, decision capture, project-context logging, and wiki audits are also first-class work.

HTML-First Output

Generated project wiki pages must be standalone .html artifacts, not Markdown documents renamed with an HTML extension. Use HTML because project memory often needs richer information density than prose-only notes: tables for source evidence, inline SVG for flows and architecture, visual status summaries, responsive layouts, annotated snippets, and lightweight controls such as tabs, filters, toggles, sliders, or copy buttons when interaction helps the user review or export decisions.

Keep the files portable and inspectable:

• include complete document structure, embedded CSS, semantic sections, accessible headings, and relative links
• use inline SVG diagrams, tables, callouts, timelines, and compact dashboards when they improve clarity
• use small inline JavaScript only for useful document interaction or export helpers
• avoid external dependencies, build steps, remote assets, and placeholder leakage
• preserve AGENTS.md, CLAUDE.md, and repo-local SKILL.md files as Markdown because those are agent guidance conventions

Before creating or materially restyling any generated HTML page, use $frontend-design when that skill is available. Apply it to choose a named visual direction for the artifact's purpose and audience, avoid generic AI-looking layouts, refine typography, color, spacing, hierarchy, responsive behavior, and motion, and keep the result production-grade rather than merely valid HTML. For utilitarian project wiki pages, the aesthetic can be restrained and work-focused, but it must still feel specifically designed for that project's domain. Plain white-card document pages, default system-font styling, and interchangeable dashboards are not acceptable final output.

Before writing a substantial HTML artifact, load references/html-artifact-patterns.md. Classify the page as planning/exploration, code review/explainer, report/research, design/prototype, custom editor, or a deliberate hybrid. Define the reader goal, choose a visual concept, avoid long prose by converting it into visual structures, add copy/export controls for interactive or decision-oriented pages, treat code snippets with annotations and line context, show evidence/confidence UI for source-heavy claims, use a local CSS style system, and perform visual QA or document why preview was not feasible.