Add Neon Mirai showcase

scripts/build-sub-pages.js

@@ -64,6 +64,29 @@ function renderSkillDemo(skill) {
 </section>`;
 }
 
+function renderCraftCaseCallout() {
+  return `
+<aside class="craft-case-callout" aria-labelledby="craft-case-title">
+  <div class="craft-case-copy">
+    <span class="craft-case-eyebrow">Real example</span>
+    <h2 id="craft-case-title">Neon Mirai: generated reference to shipped page.</h2>
+    <p>A retro-futurist AI design conference moved through the full loop: brand toolkit, hi-fi mock, semantic implementation, regenerated assets, responsive fixes, and browser polish.</p>
+    <div class="code-block-wrap craft-case-command">
+      <pre class="code-block code-block--bash"><code>npx impeccable craft retro-futurist AI design conference website</code></pre>
+      <button class="code-block-copy" type="button" data-copy="npx impeccable craft retro-futurist AI design conference website" aria-label="Copy to clipboard"></button>
+    </div>
+    <p class="craft-case-link-row">
+      <a href="/cases/neon-mirai">Read the case</a>
+      <a href="/neon-mirai/">Open the build</a>
+    </p>
+  </div>
+  <div class="craft-case-images" aria-hidden="true">
+    <img src="../assets/openai_image_2_hifi.jpg" alt="" loading="lazy" width="864" height="1821" />
+    <img src="../assets/cases/neon-mirai/home.png" alt="" loading="lazy" width="1440" height="1100" />
+  </div>
+</aside>`;
+}
+
 /**
  * Render one skill detail page HTML body (without the site shell).
  */
@@ -78,6 +101,7 @@ function renderSkillDetail(skill, knownSkillIds) {
     : '';
 
   const demoHtml = renderSkillDemo(skill);
+  const caseCalloutHtml = skill.id === 'craft' ? renderCraftCaseCallout() : '';
 
   const tagline = skill.editorial?.frontmatter?.tagline || skill.description;
   const categoryLabel = CATEGORY_LABELS[skill.category] || skill.category;
@@ -142,6 +166,8 @@ ${refBody}
 
   ${editorialHtml ? `<section class="skill-detail-editorial prose">\n${editorialHtml}\n</section>` : ''}
 
+  ${caseCalloutHtml}
+
   <section class="skill-source-card">
     <header class="skill-source-card-header">
       <span class="skill-source-card-label">${skill.isSubCommand ? 'reference/' + escapeHtml(skill.id) + '.md' : 'SKILL.md'}</span>
@@ -1020,13 +1046,13 @@ function renderDesigningMain() {
 
       <div class="designing-start-step">
         <span class="designing-start-step-label">shape + craft &middot; in pictures</span>
-        <p class="designing-start-step-note">Since image generation crossed the reference-quality threshold, <code>shape</code> drafts a brand toolkit you can review at a glance, and <code>craft</code> codes toward a hi-fi mock instead of a paragraph.</p>
+        <p class="designing-start-step-note">Since image generation crossed the reference-quality threshold, <code>shape</code> can draft a brand toolkit you review at a glance, and <code>craft</code> can code toward a hi-fi mock instead of a paragraph. Neon Mirai is the full loop: generated direction, implemented page, browser iteration.</p>
 
         <div class="designing-visualize-spread">
           <figure class="designing-visualize-plate designing-visualize-plate--brand">
-            <div class="designing-visualize-plate-frame">
+            <a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
               <img src="../assets/openai_image_2_brand.jpg" alt="Auto-generated brand toolkit plate: identity lockups, colour palette, type specimens, icon system, and application mocks for a fictional AI design conference, rendered in warm earth tones." loading="lazy" width="1536" height="1024" />
-            </div>
+            </a>
             <figcaption class="designing-visualize-plate-cap">
               <span class="designing-visualize-plate-kind">Shape</span>
               <p class="designing-visualize-plate-note">Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into <code>DESIGN.md</code>.</p>
@@ -1034,17 +1060,27 @@ function renderDesigningMain() {
           </figure>
 
           <figure class="designing-visualize-plate designing-visualize-plate--hifi">
-            <div class="designing-visualize-plate-frame">
+            <a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
               <img src="../assets/openai_image_2_hifi.jpg" alt="Auto-generated hi-fi landing-page mock: a long vertical editorial comp for a fictional Tokyo AI design conference, in warm earth tones with committed serif display type." loading="lazy" width="864" height="1821" />
-            </div>
+            </a>
             <figcaption class="designing-visualize-plate-cap">
-              <span class="designing-visualize-plate-kind">Craft</span>
+              <span class="designing-visualize-plate-kind">Visualize</span>
               <p class="designing-visualize-plate-note">Hi-fi reference. The destination, before the first line of CSS. Craft codes toward a concrete image, not an abstract brief. That is the step change.</p>
             </figcaption>
           </figure>
+
+          <figure class="designing-visualize-plate designing-visualize-plate--live">
+            <a class="designing-visualize-plate-frame" href="/neon-mirai/" aria-label="Open the Neon Mirai live site">
+              <img src="../assets/cases/neon-mirai/live-page.png" alt="Full-page screenshot of the implemented Neon Mirai website." loading="lazy" width="1440" height="3013" />
+            </a>
+            <figcaption class="designing-visualize-plate-cap">
+              <span class="designing-visualize-plate-kind">Ship</span>
+              <p class="designing-visualize-plate-note">Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. <a href="/neon-mirai/">Open the live site</a>.</p>
+            </figcaption>
+          </figure>
         </div>
 
-        <p class="designing-visualize-foot">Plates generated by <strong>OpenAI GPT Image 2</strong>. <strong>Gemini Nano Banana Pro</strong>, <strong>Imagen 4 Ultra</strong>, and <strong>Grok Imagen</strong> work the same way, via Codex, Gemini CLI, and compatible harnesses.</p>
+        <p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neon Mirai page. <strong>Gemini Nano Banana Pro</strong>, <strong>Imagen 4 Ultra</strong>, and <strong>Grok Imagen</strong> work the same way, via Codex, Gemini CLI, and compatible harnesses.</p>
       </div>
     </div>
   </section>

scripts/build.js

@@ -564,8 +564,13 @@ async function build() {
   const { files: subPageFiles } = await generateSubPages(ROOT_DIR);
   console.log(`✓ Generated ${subPageFiles.length} sub-page(s)\n`);
 
+  const casePageFiles = [
+    path.join(ROOT_DIR, 'public', 'cases', 'neon-mirai', 'index.html'),
+    path.join(ROOT_DIR, 'public', 'neon-mirai', 'index.html'),
+  ].filter((pagePath) => fs.existsSync(pagePath));
+
   // Bundle HTML, JS, and CSS with Bun (including generated sub-pages)
-  await buildStaticSite(subPageFiles);
+  await buildStaticSite([...subPageFiles, ...casePageFiles]);
 
   // Copy root-level static assets that need stable (unhashed) URLs
   const staticAssets = ['og-image.jpg', 'robots.txt', 'sitemap.xml', 'favicon.svg', 'apple-touch-icon.png'];