section-scaffoldlisted

Use when the user invokes /section-scaffold followed by a description of a new section to add to an existing page. Runs a site-aware brainstorming phase, produces a spec doc, then implements via frontend-design, screenshot-feedback, and code-navigation-system. Triggers on "/section-scaffold" or "scaffold a new section".
Kevinnnnn-ai/astronology.dev · ★ 0 · Web & Frontend · score 60

Install: claude install-skill Kevinnnnn-ai/astronology.dev

# Section Scaffold Scaffold a new section on an existing page of astronology.dev. This skill drives the full lifecycle: brainstorm > spec > implement > verify > document. --- ## On Invoke Announce: > "Using section-scaffold to build [section description]." Read the following before doing anything else: - [code-map.md](../../../docs/code-map.md): section-level map of all existing JS and CSS - [design-criteria.md](../../../res/design-criteria.md): visual design constraints for the site - [change-log.md](../../../docs/change-log.md): recent changes for context ## Workflow ### Phase 1: Brainstorm Invoke the `brainstorming` skill. Before brainstorming begins, inject the following site context so the brainstorming session is grounded in the codebase: Site context to inject: - The site is vanilla HTML/CSS/JS with no build step or framework. - The only page is [src/index.html](../../../src/index.html). New sections are added to this file. - All content data lives in [src/js/config.js](../../../src/js/config.js) under the `SITE_CONFIG` object. - Render functions that inject HTML live in [src/js/render.js](../../../src/js/render.js). - Section-specific JavaScript (initializers, animations, demos) lives in `src/js/sections/<name>.js`. - Section-specific CSS lives in [src/css/pages/home.css](../../../src/css/pages/home.css). Shared component primitives go in [src/css/components.css](../../../src/css/components.css). - All section initializers are called from [src/js/main.js](