create-hlou-site 0.1.0 → 0.1.2

package/README.md

@@ -17,11 +17,13 @@ It asks for the site's name, its source locale and its other locales, then:
   Next.js static-export template every Hlou site is built from;
 - writes an empty **site spec** in `hlou/site/`: `site.json` (locales, theme,
   the site's name), `pages/home.json`, `content/<locale>.json`;
-- names Hlou's Claude Code plugin marketplace in `.claude/settings.json`
-  (`/plugin marketplace add hloudev/hlou-claude-plugins`).
+- names Hlou's Claude Code plugin marketplace in `.claude/settings.json` and
+  enables its Figma plugin, so Claude Code offers to install it when you trust
+  the folder (otherwise: `/plugin marketplace add hloudev/hlou-claude-plugins`,
+  then `/plugin install hlou-figma-handoff@hlou-claude-plugins`).
 
-Then ask your agent for pages — the starter's `AGENTS.md` and `.claude/skills/`
-teach it the spec — and bring the site to Hlou with `pnpm hlou:pack` and
+Then ask your agent for pages — it reads the starter's `AGENTS.md` and
+`.claude/skills/` on its own — and bring the site to Hlou with `pnpm hlou:pack` and
 **New project › Import**. The starter's README says more.
 
 ## Options
@@ -33,7 +35,7 @@ create-hlou-site [folder] [options]
   --locale <tag>       the source locale, e.g. fr (default fr)
   --locales <tags>     the other locales, comma-separated, e.g. en,ar
   --yes, -y            ask nothing: the defaults for whatever is missing
-  --no-plugin-hint     leave .claude/settings.json as the starter has it
+  --no-plugin-hint     leave .claude/settings.json as the starter has it (no plugin)
   --from <path|url>    a local starter folder or .tar.gz instead of the pinned release
   --ref <commit>       another commit of hloudev/hlou-starter-next
 ```

package/index.mjs

@@ -25,6 +25,7 @@ import { fileURLToPath } from 'node:url';
 
 import {
   emptySpec,
+  FIGMA_PLUGIN,
   parseLocales,
   PLUGIN_MARKETPLACE,
   sitePackageJson,
@@ -209,11 +210,12 @@ export async function createSite(args, log = (line) => stdout.write(`${line}\n`)
   log('  pnpm install          # pnpm 10 (corepack enable), Node 24');
   log('  pnpm dev              # compiles hlou/site/ and serves http://localhost:3000');
   log('');
-  log('Then ask your agent for pages: AGENTS.md and .claude/skills/ teach it the spec.');
+  log('Then ask your agent for pages: it reads AGENTS.md and .claude/skills/ on its own.');
   if (args.pluginHint) {
-    log('In Claude Code, Hlou’s plugins (Figma → spec):');
+    log('Claude Code offers Hlou’s Figma plugin (Figma → spec) when you trust the folder;');
+    log('if it does not:');
     log(`  /plugin marketplace add ${PLUGIN_MARKETPLACE.repo}`);
-    log(`  /plugin install hlou-figma-handoff@${PLUGIN_MARKETPLACE.name}`);
+    log(`  /plugin install ${FIGMA_PLUGIN}`);
   }
   log('When it is ready: pnpm hlou:pack, then Hlou › New project › Import.');
   return target;

package/lib/spec.mjs

@@ -1,7 +1,8 @@
 /*
  * The empty site spec a new Hlou site starts from (format 1, decision 219):
  * the locales, a neutral theme, the site's name in the `site.name` slot and
- * one home page with no section yet. Pure: options in, files out.
+ * one home page whose hero shows that name, so the first `pnpm dev` draws
+ * something. Pure: options in, files out.
  */
 
 /** A language tag as the spec reads it (`fr`, `en-GB`, `ar-TN`). */
@@ -116,11 +117,43 @@ export function emptySpec({ name, locales }) {
       title: homeTitle(source),
       position: 0,
       status: 'ready',
-      sections: [],
+      sections: [
+        {
+          key: 'hero',
+          label: 'Hero',
+          slots: [{ key: 'hero.title', kind: 'heading' }],
+        },
+      ],
+      document: {
+        root: 'root',
+        rootProps: {},
+        nodes: {
+          root: { id: 'root', type: 'root', parent: null, slot: '', order: 'a0', props: {} },
+          'hero-home': {
+            id: 'hero-home',
+            type: 'hero',
+            parent: 'root',
+            slot: 'content',
+            order: 'a0',
+            role: 'hero',
+            section: 'hero',
+            props: {
+              eyebrow: '',
+              title: { $slot: 'hero.title' },
+              description: { type: 'doc', content: [] },
+              buttons: [],
+              align: 'start',
+            },
+          },
+        },
+      },
     }),
     [`hlou/site/content/${source}.json`]: json({
       $schema: '../../../renderer/spec/json-schema/content.schema.json',
-      values: { 'site/site.name': { kind: 'text', text: name } },
+      values: {
+        'site/site.name': { kind: 'text', text: name },
+        'home/hero.title': { kind: 'heading', text: name },
+      },
     }),
   };
 }
@@ -131,10 +164,13 @@ export const PLUGIN_MARKETPLACE = {
   repo: 'hloudev/hlou-claude-plugins',
 };
 
+/** The plugin the scaffold enables: Figma → the site spec. */
+export const FIGMA_PLUGIN = `hlou-figma-handoff@${PLUGIN_MARKETPLACE.name}`;
+
 /**
- * `.claude/settings.json` with Hlou's plugin marketplace known: Claude Code
- * offers it when the folder is trusted. `existing` is the starter's file, if
- * any; nothing in it is dropped.
+ * `.claude/settings.json` with Hlou's plugin marketplace known and its Figma
+ * plugin enabled: Claude Code offers to install both when the folder is
+ * trusted. `existing` is the starter's file, if any; nothing in it is dropped.
  */
 export function withPluginMarketplace(existing) {
   const settings = existing && typeof existing === 'object' ? { ...existing } : {};
@@ -144,6 +180,7 @@ export function withPluginMarketplace(existing) {
       source: { source: 'github', repo: PLUGIN_MARKETPLACE.repo },
     },
   };
+  settings.enabledPlugins = { ...(settings.enabledPlugins ?? {}), [FIGMA_PLUGIN]: true };
   return settings;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-hlou-site",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Start a Hlou site: the Next.js starter with an empty site spec, ready for Claude Code.",
   "keywords": [
     "hlou",