vitrine-locale

Builds one-page Astro and Tailwind showcase websites for local businesses through structured scoping and TDD.

1|Updated Aug 6, 2026
One-click install
npx skills add https://github.com/YoLaub/JohnAI --skill vitrine-locale-yolaub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vitrine-locale
Source: https://github.com/YoLaub/JohnAI/tree/main/.claude/skills/vitrine-locale
Command: npx skills add https://github.com/YoLaub/JohnAI --skill vitrine-locale-yolaub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a showcase website for a local business (restaurant, fast-food, hairdresser, artisan) often produces generic, AI-sounding copy and inconsistent structure. This Skill provides a proven six-phase methodology that scopes the project through real business questions before writing any code, then delivers a static one-page Astro site with verified design, SEO, and content conventions. ## Core Features & Use Cases - Structured scoping in two phases: one open question to gather business facts (address, hours, menu, pricing), then closed questions targeting only the real ambiguities found in phase 1, never a generic checklist. - Sector-specific content catalogs: reference guides for fast-food, restaurants, hair salons, and artisans define what to ask and how to structure content collections with Zod schemas and JSON-LD local business markup. - Anti-generic style charter: enforced rules against em-dashes, emojis, filler triads, and copy that could be pasted onto a competitor's site, with contrast ratios verified by calculation. - Git-flow plus TDD delivery: feature branches, unit-tested pure logic, build-plus-grep E2E checks on static HTML output, and OKF index cards per feature. - Use Case: A user says "build a website for a kebab shop in Vannes" and the Skill walks through scoping questions, design research, Astro bootstrapping, and TDD feature delivery until a merged, tagged one-page site is ready. ## Quick Start Ask the assistant to create a one-page showcase website for your local business, for example a restaurant or hair salon, and provide its name, address, hours, and menu or price list.

Frequently Asked Questions about vitrine-locale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a one-page website for a local restaurant with Astro?▼

Start with an open scoping question covering name, address, hours, phone, and the source menu, then resolve 2-4 real ambiguities with closed questions. Scaffold Astro with Tailwind CSS-first config, structure the menu as a Content Collection validated by Zod, and deliver each feature via TDD on a git-flow branch.

What content structure works for a fast-food menu website?▼

Use one Content Collection file per menu category with items that support multiple labeled prices such as sizes or with-fries options. Add JSON-LD Restaurant markup with openingHoursSpecification so search engines read the address, phone, and hours correctly.

Does this approach work for hair salons and artisans, not just restaurants?▼

Yes, the business-types reference covers fast-food, traditional restaurants, hair salons and beauty institutes, and artisans. Each sector has its own scoping checklist and content schema, such as a prestations collection with duration and price for salons.

Why does npm install fail when scaffolding an Astro project?▼

npm allow-scripts can block postinstall hooks for esbuild and sharp, breaking the build until you run npm approve-scripts and npm rebuild. Also, npm create astro refuses non-empty directories, so scaffold in a temporary subfolder and merge files into the project root.

How do you test a static Astro site without a browser?▼

Run astro build, then use a Node script that greps the generated HTML in dist for expected CTAs, contact details, JSON-LD, and menu categories. Pure logic like price formatting is unit-tested separately with Vitest against the Zod schema module.

When should I not use this Skill for a website project?▼

Do not use it for multi-page applications or products with business logic; that is the scope of greenfield-tdd-okf. This Skill is strictly for static one-page Astro sites for local businesses, always one page and always a local commerce.