โ† ClaudeAtlas

project-scaffold-from-artefactlisted

{{ ๐›€๐›€๐›€ }} Convert an exported Claude artefact (HTML or JSX) into a working Svelte 5 / SvelteKit 2 project: interview for the project-shaping decisions, translate React idioms, rewire styling onto Reasonable Colors, then optionally wire up tests, git, docs, and deploy.
JasonWarrenUK/goblin-mode ยท โ˜… 5 ยท Web & Frontend ยท score 73
Install: claude install-skill JasonWarrenUK/goblin-mode
Take a single-file artefact exported from Claude Chat or Cowork (an interactive HTML page or a JSX component) and grow it into a real, runnable project in Jason's default stack. Understand the artefact, interview for the decisions only a human can make, then port it: scaffold a project, translate the artefact into components or routes, and rewire its styling onto Reasonable Colors. A **full-project tail** (tests, git, docs, deploy) follows and is skippable. Default target is **Svelte 5 (runes) / SvelteKit 2**. A JSX artefact becomes Svelte 5 components; an HTML artefact becomes a SvelteKit route. React/Next.js is an explicit opt-in. Nothing is scaffolded until the project config is approved. **Announce at start:** "I'm using the Scaffold-from-Artefact skill. I'll read `{file}` first, then ask a few quick questions before building anything." ## Step 1 โ€” Interpret `$ARGUMENTS` and locate the artefact - **A path is given and the file exists:** use it. Record its extension (`.html`, `.htm`, `.jsx`, `.tsx`, `.svelte`). - **`react` (or `next`) appears in the arguments:** set the target stack to React/Next.js instead of the Svelte default. Note it and carry it into Step 3. - **No path given:** search the likely export locations before asking. Run a read-only scan: ```bash find . ~/Downloads ~/Desktop -maxdepth 3 \ \( -iname "*.jsx" -o -iname "*.tsx" -o -iname "*.html" \) \ -not -path "*/node_modules/*" -mtime -7 2>/dev/null ``` Present the candidates (most-recent