← ClaudeAtlas

project-scaffoldlisted

Use when the user invokes /project-scaffold <slug> or asks to create/scaffold/build a project showcase page. Reads project metadata from src/projects/content/<slug>/meta.json, invokes brainstorming to design a creative showcase, then implements via frontend-design and a screenshot loop. Triggers on "/project-scaffold", "create a project page", "scaffold a project", "build a project showcase", "add a project", or agent invocation with a slug. Use this even when the user just says "I want to add my project to the site" or provides a GitHub link and asks to showcase it.
Kevinnnnn-ai/astronology.dev · ★ 0 · Web & Frontend · score 60
Install: claude install-skill Kevinnnnn-ai/astronology.dev
# Project Scaffold Build a bespoke, visually distinct project showcase page from a content folder of metadata and assets. Each page should feel designed for that project specifically — not templated. --- ## On Invoke Announce: > "Using project-scaffold to build the project page: <slug>." Read before doing anything else: - [docs/code-map.md](../../../docs/code-map.md) - [src/js/config.js](../../../src/js/config.js): to inspect the existing `SITE_CONFIG.projects` array - [src/projects/sample-project.html](../../../src/projects/sample-project.html): existing page shell reference - [src/css/pages/project.css](../../../src/css/pages/project.css): existing project page styles (do not duplicate these) - [res/design-criteria.md](../../../res/design-criteria.md): site-wide visual constraints --- ## Phase 1: Gather 1. Locate the content folder: `src/projects/content/<slug>/` - If it does not exist, create it and ask the user to add their assets. Do not proceed until the folder exists. 2. Look for `meta.json` in the content folder. This file drives everything. **`meta.json` schema:** ```json { "title": "Project Name", "description": "One or two sentences for the listing card.", "github": "https://github.com/...", "demo": "https://...", "stack": ["JavaScript", "Canvas API"], "status": "live", "highlights": [ { "title": "What to call this section", "description": "What makes this interesting and why — the m