page-scaffoldlisted

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

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

# Page Scaffold Scaffold a new page on astronology.dev. This skill drives the full lifecycle: brainstorm > spec > implement > verify > document. --- ## On Invoke Announce: > "Using page-scaffold to build [page 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 - [index.html](../../../src/index.html): the existing page structure to use as a shell reference ## Workflow ### Phase 1: Brainstorm Invoke Superpowers' `brainstorming` skill. Before brainstorming begins, inject the following site context so the brainstorming session is grounded in the codebase: Site context to inject: - The website is fully vanilla JS, HTML, and CSS with no frameworks. It uses Tailwind CSS via CDN for utility classes, but custom CSS is written in separate files under `src/css/`. - The existing page structure is in [index.html](../../../src/index.html). - [CLAUDE.md](../../../CLAUDE.md) - [code-map.md](../../../docs/code-map.md) - [change-log.md](../../../docs/change-log.md) The brainstorming skill will ask clarifying questions, propose a design, write a spec doc, and get user approval. **Do not proceed past Phase 1 until the user has approved the spec doc.** ### Phase 2: Implementation Once the spec doc is approved, imple