Stats
Actions
Tags
From localstudios
Website generation toolkit by LocalStudios. Use /localstudios generate <url> to create a single-page homepage as a client pitch. SEO-optimized, ready to show.
How this skill is triggered — by the user, by Claude, or both
Slash command
/localstudios:localstudiosThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Command | Description |
phases/00-preflight.mdphases/01-scrape.mdphases/02-interview.mdphases/03-keywords.mdphases/04-geo-strategy.mdphases/05-outline.mdphases/06-content.mdphases/07-schema.mdphases/08-design.mdphases/09-build.mdphases/10-quality.mdphases/11-report.mdphases/clone/00-preflight.mdphases/clone/01-read-source.mdphases/clone/02-scrape.mdphases/clone/03-interview.mdphases/clone/04-keywords.mdphases/clone/05-adapt.mdphases/clone/06-quality.mdphases/clone/07-report.md| Command | Description |
|---|---|
generate <url> | Generate a single-page homepage as client pitch |
clone <source-path> <new-url> | Clone an existing project for a new client |
extend | Extend homepage into full website with all pages + Sanity CMS |
generate → Execute generate workflow (second arg = URL)clone → Execute clone workflow (second arg = source path, third = new URL)extend → Extend existing homepage into full website (run in project dir)The plugin builds websites from scratch — no block libraries, no generic design skills, no variants.
Every design decision flows from ONE file: design.md (in the project root, READ-ONLY).
design.md → Single source of truth for colors, fonts, buttons, spacing, atmosphere — READ-ONLY
layout-plan.md → One layout strategy for ONE homepage (Phase 8 output)
globals.css → CSS vars from design.md + Tailwind v4 @theme inline mapping
components/… → Flat custom components, semantic HTML, clean code
Playwright MCP → Visual validation at the end — screenshot vs. design.md, iterate until match (fix code, never design.md)
Pflicht-Input (Phase 2): Der User muss ENTWEDER einen getdesign CLI-Command liefern
(z.B. npx getdesign@latest add nike) ODER den Pfad zu einer existierenden design.md.
Ohne eines von beiden wird nicht weitergemacht.
design.md ist READ-ONLY — ab Phase 8 wird die Datei nicht mehr angefasst. Einzige Ausnahme: ein explizit vom User in Phase 2 gewünschter Farbwechsel (z.B. „primary von gelb auf blau") — dann NUR die Farb-Tokens ersetzen. Gefühl, Typografie, Atmosphäre, Anti-Muster, Wording bleiben 1:1.
Creates a single homepage to pitch the client (one design, no variants).
| Phase | File | Pause? | Group |
|---|---|---|---|
| 0. Preflight | ./phases/00-preflight.md | WAIT | — |
| 1. Scrape | ./phases/01-scrape.md | — | |
| 2. Interview + Design Source | ./phases/02-interview.md | WAIT | — |
| 3. Keywords | ./phases/03-keywords.md | — | |
| 4. Geo-Strategy | ./phases/04-geo-strategy.md | after 3 | |
| 5. Outline | ./phases/05-outline.md | WAIT | — |
| 6. Content | ./phases/06-content.md | ⬇ parallel | |
| 7. Schema | ./phases/07-schema.md | ⬇ parallel with 6 | |
| 8. Design System (from getdesign/design.md) | ./phases/08-design.md | ⬇ parallel with 6+7 | |
| 9. Build (custom components, single homepage) | ./phases/09-build.md | — (needs 6+7+8) | |
| 10. QA + Playwright Validation + SEO Audit | ./phases/10-quality.md | — | |
| 11. Report | ./phases/11-report.md | — |
| Tool | Phase | Role |
|---|---|---|
npx getdesign@latest add <brand> | 8 | Design source — erzeugt design.md (einmalig, danach READ-ONLY) |
frontend-design Skill (in diesem Plugin) | 8+9 | Design-Qualitäts-Prinzipien — MUSS zusammen mit design.md geladen sein bevor geplant/gebaut wird |
| Playwright MCP | 10 | Visual validation — Screenshots der Homepage, Abgleich mit design.md, Fixes IMMER im Code |
/seo page | 10 | Audit: validates NEW homepage — must FIX all issues |
/seo schema | 10 | Audit: validates schema |
/seo content | 10 | Audit: validates content quality |
| Semrush MCP | 3 | Keyword research |
Design-Prozess:
Phase 2 Interview → getdesign Command ODER design.md Pfad (+ optional: Farbwechsel-Wunsch)
→ Phase 8 → 1) frontend-design Skill laden (Design-Prinzipien)
+ design.md beschaffen + verstehen (brand-spezifische Atmosphäre) — READ-ONLY ab hier
2) layout-plan.md schreiben (Skill + design.md → EIN Layout-Plan, 10 Sections)
→ Phase 9 → globals.css aus design.md (CSS-Vars + Tailwind v4 @theme inline)
+ Custom Components flach in components/sections/ (Skill-Prinzipien beim Bau anwenden)
+ Hero MUSS above-the-fold Bild haben
→ Phase 10 → Playwright Screenshots vs. design.md
+ /seo audits
→ Fixes im Code bis Match (NIE design.md anpassen)
/variant-2, kein Switcherdesign.md ist READ-ONLY ab Phase 8 (einzige Ausnahme: Farbtoken-Ersetzung bei explizitem Farbwechsel-Wunsch in Phase 2)[Image …]-Platzhalter-Strings im JSX — Image-Metadaten gehören in docs/pages/home.mdnpm run build muss passen| Tool | Check | Status |
|---|---|---|
| Playwright MCP | mcp__playwright__* | PFLICHT für Phase 10 Visual Validation |
| Semrush MCP | mcp__semrush__* | PFLICHT für Phase 3 Keyword-Research (Fallback: manuelle Keywords) |
| claude-seo | /seo skill loaded | PFLICHT für Phase 10 SEO Audit |
frontend-design Skill | in skills/frontend-design/ (Plugin) | PFLICHT — wird in Phase 8 geladen |
npx getdesign@latest | CLI via npx verfügbar | PFLICHT falls Design-Source A gewählt (Fallback: User liefert fertige design.md) |
npx create-next-app@latest . --typescript --tailwind --app)components/sections/, semantisches HTML, keine fremden Block-Libraries, keine Variantendesign.md + @theme inline Mapping + minimale Base-Styles/Reuses an existing project as template. Faster than generate — no design decisions needed unless the client wants style changes.
/localstudios clone <source-project-path> <new-url>
| Phase | File | Pause? |
|---|---|---|
| 0. Preflight | ./phases/clone/00-preflight.md | WAIT |
| 1. Read Source | ./phases/clone/01-read-source.md | |
| 2. Scrape New | ./phases/clone/02-scrape.md | |
| 3. Interview (+ optional getdesign) | ./phases/clone/03-interview.md | WAIT |
| 4. Keywords | ./phases/clone/04-keywords.md | |
| 5. Adapt | ./phases/clone/05-adapt.md | |
| 6. QA + Playwright + SEO | ./phases/clone/06-quality.md | |
| 7. Report | ./phases/clone/07-report.md |
Extends an existing homepage (from generate) into a full website with all pages, Sanity CMS for dynamic content, and technical files.
/localstudios extend
Run in the existing project directory. Reads docs/, design.md, and homepage.
| Phase | File | Pause? |
|---|---|---|
| 0. Preflight | ./phases/extend/00-preflight.md | WAIT |
| 1. Read Project | ./phases/extend/01-read-project.md | |
| 2. Interview | ./phases/extend/02-interview.md | WAIT |
| 3. Sanity Setup | ./phases/extend/03-sanity.md | |
| 4. Static Pages | ./phases/extend/04-static-pages.md | |
| 5. Dynamic Pages | ./phases/extend/05-dynamic-pages.md | |
| 6. Technical Files | ./phases/extend/06-technical.md | |
| 7. Content | ./phases/extend/07-content.md | |
| 8. QA + Playwright + SEO | ./phases/extend/08-quality.md | |
| 9. Report | ./phases/extend/09-report.md |
Static: Services Overview, About, Team Overview, Regions Overview, FAQ, Blog Overview, Contact, Impressum, Datenschutz, 404
Dynamic (Sanity CMS): Service Detail [slug], Team Member [slug], Region Detail [slug], Blog Category [slug], Blog Post [slug]
Technical: sitemap.xml, robots.txt, llms.txt, llms-full.txt
design.md, gleiche globals.css, gleicher Header/Footermcp__Sanity__*) for schema + content setupRun on EVERY page built:
/seo page — on-page SEO validation/seo schema — structured data validation/seo content — content quality + E-E-A-T/seo technical — crawlability, performanceFIX all issues immediately. Re-audit after fixes.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub deomiarn/localstudios-plugin --plugin localstudios