From cogni-website
This skill builds the static website by orchestrating CSS generation, parallel page generation, hero rendering, and site assembly. It produces a deployable output/website/ folder from the website-plan.json blueprint. This skill should be used when the user mentions "build the website", "generate website", "website build", "Website erstellen", "Website generieren", "Seiten erzeugen", "HTML erzeugen", "render the website", "assemble the site", "create all pages", or wants to execute the website plan — even if they don't say "build" explicitly. Requires website-plan.json.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cogni-website:website-buildThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Orchestrate the full website generation pipeline: shared CSS, homepage hero, parallel page generation, and site assembly.
Orchestrate the full website generation pipeline: shared CSS, homepage hero, parallel page generation, and site assembly.
Both website-project.json and website-plan.json must exist (from setup and plan skills). If missing, redirect to the appropriate skill.
Read website-project.json and website-plan.json. Extract:
Before generating anything, verify that the source files referenced in the plan still exist. Content may have changed since planning — a deleted product or moved narrative would cause a page-generator agent to fail.
For each page in website-plan.json:
source_files existsource_entities resolve to at least one fileIf sources are missing: present a summary of affected pages and missing files. Ask whether to proceed (skipping those pages) or abort. Do not silently launch agents with broken source references.
If all sources exist: proceed without interruption.
mkdir -p output/website/{css,pages,images,.partials}
Ensure the directory structure matches the plan's slug paths. Create subdirectories for nested pages (e.g., pages/produkte/, pages/blog/).
If output/design-variables.json does not exist or is outdated:
cogni-workspace/references/design-variables-pattern.mdoutput/design-variables.jsonDelegate to the site-assembler agent with:
project_dir: absolute path to website projectplugin_root: $CLAUDE_PLUGIN_ROOTwebsite_plan: full plan JSONtheme_path: from project configdesign_variables_path: path to design-variables.jsonThe site-assembler produces:
output/website/css/style.cssoutput/website/.partials/header.htmloutput/website/.partials/footer.htmloutput/website/sitemap.xmlWait for this to complete before page generation.
If the homepage page spec has "hero_renderer": "pencil":
Delegate to the hero-renderer agent with:
project_dir: absolute pathplugin_root: $CLAUDE_PLUGIN_ROOThome_page_spec: homepage page spec from plantheme_path: from project configdesign_variables: from design-variables.jsoncompany: company object from project configlanguage: from project configThe hero-renderer produces:
output/website/.partials/hero.htmloutput/website/images/hero-bg.pngRead the generated navigation partials:
output/website/.partials/header.htmloutput/website/.partials/footer.htmlFor the homepage, also read output/website/.partials/hero.html if it exists.
Launch page-generator agents in parallel for each page in the plan. For each page, provide:
{
"page_spec": {page spec from plan},
"project_dir": "{absolute path}",
"plugin_root": "$CLAUDE_PLUGIN_ROOT",
"css_path": "{relative path from page to css/style.css}",
"navigation_header": "{header HTML with active state for this page}",
"navigation_footer": "{footer HTML}",
"site_title": "{site title from plan}",
"language": "{language}",
"design_variables": {design variables JSON}
}
Active state: For each page, mark the matching nav link with site-nav__link--active class in the header HTML before passing it to the agent.
CSS path calculation:
index.html → css/style.csspages/produkte.html → ../css/style.csspages/produkte/cloud.html → ../../css/style.cssHomepage hero: For the homepage page-generator, include the hero HTML partial in the prompt so it can splice it into the hero section instead of generating a CSS-only hero.
Parallelism: Launch all page-generator agents in a single message for maximum parallelism. Independent pages have no dependencies on each other.
After all agents return:
Website erstellt: output/website/
{N} Seiten generiert
{M} Bilder erstellt
CSS: {size}KB
Gesamtgröße: {total}KB
Dateien:
├── index.html (Startseite)
├── css/style.css
├── pages/
│ ├── produkte.html
│ ├── produkte/cloud-platform.html
│ ├── ...
│ └── kontakt.html
├── images/
│ └── hero-bg.png
└── sitemap.xml
Nächste Schritte:
• /website-preview — Website im Browser öffnen und prüfen
• python3 -m http.server -d output/website 8080 — Lokaler Testserver
• Output-Ordner auf Netlify/Vercel/S3 deployen
The skill supports partial rebuilds:
Detect the mode from the user's request and skip unnecessary steps.
${CLAUDE_PLUGIN_ROOT}/libraries/page-templates.md — HTML patterns for page types${CLAUDE_PLUGIN_ROOT}/libraries/navigation-patterns.md — Header, footer, breadcrumb CSS${CLAUDE_PLUGIN_ROOT}/libraries/EXAMPLE_WEBSITE_PLAN.md — Plan format reference${CLAUDE_PLUGIN_ROOT}/skills/website-build/scripts/generate-css.py — Standalone CSS generator from design-variables.json (alternative to site-assembler agent for CSS-only updates)npx claudepluginhub cogni-work/insight-wave --plugin cogni-websiteAutonomously builds multi-page websites via baton-passing loop: generates HTML/CSS/Tailwind pages with Claude or Stitch, integrates, verifies visually via browser automation, queues next tasks.
Automatically builds websites using Stitch in an iterative baton-passing loop. Reads task prompts, generates pages, integrates them, and writes next instructions.
Guides creation of production-ready Power Pages code sites as SPAs using React, Angular, Vue, or Astro, from requirements discovery to deployment with live dev server previews and git commits.