dreative 0.1.0 → 0.3.0

package/skill/dreative/skills/refined.md

@@ -0,0 +1,99 @@
+# Dreative Specialist Skill — Refined Clean Business
+
+Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
+for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
+polish, "professional, not flashy", or names references like ch.maswitzerland.com
+or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
+expressed through restraint — spacing, photography, and type doing all the work,
+with motion barely above zero. Most real client work lands here; treat it as a
+craft discipline, not the absence of one.
+
+It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
+NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
+well with a light dose of `interaction` (press states, underline draws) and the
+first tier of `motion` (one hero sequence, 2-3 in-view reveals).
+
+## 0. The register: expensive silence
+
+What separates premium-clean from generic-clean is not any element — it's the
+ratios:
+
+- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
+  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
+  viewport. If a section feels empty, that's the look working — resist filling.
+- **Photography carries the emotion.** Real product/lifestyle imagery, art-
+  directed to one consistent grade (one light temperature, one background
+  family). Full-bleed image sections alternate with contained text sections —
+  the rhythm image / text / image IS the page structure. Never decorate around
+  weak imagery; demand or generate better imagery instead.
+- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
+  warm or cool neutral family + ONE accent used almost exclusively on the
+  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
+  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
+- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
+  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
+  press states. No parallax beyond 4%, no pinning, no canvas. A single
+  restrained signature (a slow ken-burns on the hero image, or a marquee of
+  press logos) is the ceiling.
+
+## 1. Page anatomy (marketing/DTC form)
+
+The proven skeleton — vary the composition per DESIGN.md §5, not the order
+logic:
+
+1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
+   the value in plain language; one CTA. No feature bullets in the hero.
+2. **Credibility strip**: press/client logos, real marks, grayscale or
+   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
+   this section converts and belongs high on DTC pages).
+3. **Value sections** (2-4): alternating image/text, each making ONE claim
+   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
+   icon-cards is the tell this register must avoid most.
+4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
+   card chrome — image, name, price/one-liner; hover = image swap or subtle
+   zoom-crop INSIDE a fixed frame (no card growth).
+5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
+   (big quote type), never a 3-card testimonial row.
+6. **Closing CTA**: calm full-width section, one sentence, one button.
+7. **Footer**: structured, generous, quiet — the footer's polish is a trust
+   signal in this register; give it real columns, legal, newsletter.
+
+E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
+price always visible, shipping/returns reassurance near the CTA, cart as a
+slide-over drawer not a page.
+
+## 2. The discovery-grid variant (cosmos.so-like)
+
+For content/discovery products (galleries, moodboards, catalogs): near-zero
+chrome around a masonry/justified image grid; dark or paper-white surface;
+images at native aspect ratios (never uniform crops); hover = slight lift +
+metadata fade-in on top of the image; infinite scroll with a sentinel loader;
+the search/filter bar is the only persistent UI. The product IS the grid —
+navigation, branding, and controls stay almost invisible until needed.
+
+## 3. What "modern" means here (2024+, not 2016 flat)
+
+- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
+  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
+  floating elements (dropdowns, drawers).
+- Larger type than feels safe: body 17-18px on marketing pages, display
+  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
+- Radius system: one value family — either near-square (2-4px, editorial/
+  luxury) or soft (12-16px, DTC/consumer) — never mixed.
+- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
+  in the consumer/DTC variant. No outlined-button armies.
+- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
+  product mockups; `object-fit: cover` with art-directed focal points.
+
+## 4. Guardrails
+
+- If you're adding an effect to make a section interesting, the section's
+  content or imagery is the problem — fix that instead.
+- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
+  no emoji in UI copy: all instantly cheapen this register.
+- Accessibility floor is easy here — don't squander it: AA contrast on the
+  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
+  semantic landmarks.
+- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
+  zero animation libraries unless motion is actually used — a clean site
+  that loads instantly reads as more premium than any effect.

package/dist/server/ai.js

@@ -1,177 +0,0 @@
-import { query } from "@anthropic-ai/claude-agent-sdk";
-const BLOCK_SCHEMA = `
-A block is a JSON object:
-{
-  "id": "string (short unique id)",
-  "type": "section|row|column|nav|hero|card-grid|list|form|footer|text|image|button",
-  "label": "short human label, e.g. 'Hero', 'Pricing cards'",
-  "direction": "row" | "column" (optional, layout of children),
-  "sizeHint": "sm" | "md" | "lg" (optional, relative vertical size),
-  "intents": ["optional behavior notes, e.g. 'CTA scrolls to pricing'"],
-  "children": [ ...nested blocks ] (optional)
-}
-Keep trees shallow (max depth 3) and wireframe-level: structure, not styling.`;
-/** Run an Agent SDK query and return the final result text, reporting progress. */
-async function run(prompt, opts = {}) {
-    let result = "";
-    const q = query({
-        prompt,
-        options: {
-            allowedTools: opts.allowRead ? ["Read"] : [],
-            permissionMode: "bypassPermissions",
-            maxTurns: opts.allowRead ? 6 : 2,
-        },
-    });
-    for await (const message of q) {
-        if (message.type === "assistant") {
-            const blocks = message.message?.content ?? [];
-            for (const b of blocks) {
-                if (b.type === "tool_use")
-                    opts.progress?.("Looking at the reference image...");
-                else if (b.type === "text")
-                    opts.progress?.("Writing...");
-            }
-        }
-        else if (message.type === "result") {
-            if (message.subtype === "success")
-                result = message.result;
-            else
-                throw new Error(`AI call failed: ${message.subtype}`);
-        }
-    }
-    if (!result)
-        throw new Error("AI call returned no result");
-    return result;
-}
-/** Run + parse, with one retry that feeds the failure back to the model. */
-async function runParsed(prompt, parse, opts = {}) {
-    const text = await run(prompt, opts);
-    try {
-        return parse(text);
-    }
-    catch (err) {
-        opts.progress?.("Output was malformed - retrying...");
-        const retryText = await run(`${prompt}\n\nIMPORTANT: Your previous response could not be parsed (${String(err)}). Respond again, strictly following the output format instructions.`, opts);
-        return parse(retryText);
-    }
-}
-/** Extract the first JSON value (object or array) from model output. */
-function extractJson(text) {
-    const fenced = text.match(/```(?:json)?\s*([\s\S]*?)```/);
-    const candidate = fenced ? fenced[1] : text;
-    const start = candidate.search(/[[{]/);
-    if (start === -1)
-        throw new Error("No JSON found in AI response");
-    for (let end = candidate.length; end > start; end--) {
-        const ch = candidate[end - 1];
-        if (ch !== "}" && ch !== "]")
-            continue;
-        try {
-            return JSON.parse(candidate.slice(start, end));
-        }
-        catch {
-            /* keep scanning */
-        }
-    }
-    throw new Error("Could not parse JSON from AI response");
-}
-function extractCode(text) {
-    const fence = text.match(/```(?:tsx|jsx|typescript|ts)?\s*([\s\S]*?)```/);
-    const code = fence ? fence[1].trim() : text.trim();
-    if (!code.includes("export default"))
-        throw new Error("Generated code has no default export");
-    return code;
-}
-export async function proposeSkeletons(userPrompt, progress) {
-    progress?.("Proposing page layouts...");
-    return runParsed(`You are a UX/information-architecture expert. Propose 3 distinct page layout skeletons (wireframe-level) for this request:
-
-"${userPrompt}"
-
-${BLOCK_SCHEMA}
-
-Respond with ONLY a JSON array of 3 items, each: {"name": "page variant name", "layout": <block tree with root type "section">}. No prose.`, (t) => extractJson(t), { progress });
-}
-export async function proposeVariants(pageName, layout, progress) {
-    progress?.(`Proposing variants of "${pageName}"...`);
-    return runParsed(`You are a UX expert. Here is the current wireframe skeleton for the page "${pageName}":
-
-${JSON.stringify(layout, null, 2)}
-
-Propose 2 meaningfully different alternative layouts for the SAME content and purpose (e.g. different section order, grid vs list, split vs stacked). Preserve all "intents" values, attached to the equivalent blocks. Use fresh ids.
-
-${BLOCK_SCHEMA}
-
-Respond with ONLY a JSON array of 2 items: {"name": "<pageName> - <variant descriptor>", "layout": <block tree>}. No prose.`, (t) => extractJson(t), { progress });
-}
-export async function editBlock(block, instruction, progress) {
-    progress?.("Editing block...");
-    return runParsed(`You are editing one block of a page wireframe. Current block subtree:
-
-${JSON.stringify(block, null, 2)}
-
-User instruction: "${instruction}"
-
-${BLOCK_SCHEMA}
-
-Apply the instruction. Structural changes go into the tree; behavior/functionality changes go into "intents" arrays on the relevant blocks. If the instruction replaces an existing behavior, replace the corresponding intent instead of appending. Keep existing ids where blocks are unchanged; give new blocks new ids.
-Respond with ONLY the updated block subtree as JSON. No prose.`, (t) => extractJson(t), { progress });
-}
-export async function designPage(args) {
-    const { progress } = args;
-    progress?.("Designing page...");
-    const refPart = args.refImagePath
-        ? `First, use the Read tool to view the reference image at: ${args.refImagePath}\nMatch its visual style (colors, typography feel, spacing, mood) closely.`
-        : "No page-level reference image provided; choose a distinctive, non-generic visual style appropriate to the content.";
-    const blockRefPart = args.blockRefs?.length
-        ? `These specific blocks have their own style reference images. Use the Read tool to view each, and match that image's style for that block specifically (it overrides the page-level style for that block):\n${args.blockRefs
-            .map((r) => `- block "${r.id}" (${r.label}): ${r.path}`)
-            .join("\n")}`
-        : "";
-    const previousPart = args.previousCode
-        ? `A previous version of this page exists below. The user may have made deliberate element-level edits to it. Where a block from the skeleton already exists in the previous version, PRESERVE its styling and content choices; only restructure/add/remove what the updated skeleton requires.
-
-Previous version:
-\`\`\`tsx
-${args.previousCode}
-\`\`\`
-`
-        : "";
-    const siblingPart = args.siblingPages?.length
-        ? `Other pages in this project (use these names for nav/footer links, href="#"): ${args.siblingPages.join(", ")}.`
-        : "";
-    return runParsed(`${refPart}
-${blockRefPart}
-
-Then generate a complete React component for the page "${args.pageName}" implementing this wireframe skeleton exactly (same structure and order of blocks):
-
-${JSON.stringify(args.layout, null, 2)}
-
-${previousPart}
-Every "intents" entry describes required behavior - implement it with React state/handlers (mock data is fine, no network calls).
-${args.designPrompt ? `Additional design direction: "${args.designPrompt}"` : ""}
-${siblingPart}
-
-Requirements:
-- Single self-contained .tsx file, default-exporting the page component.
-- Import only from "react". Style with Tailwind CSS utility classes (Tailwind is available globally).
-- Put data-dreative-id="<block id>" on the top-level element rendered for each block from the skeleton.
-- Realistic placeholder copy, no lorem ipsum. For images use https://picsum.photos placeholders or CSS.
-
-Respond with ONLY the .tsx source in a single \`\`\`tsx code fence. No prose.`, extractCode, { allowRead: !!args.refImagePath || !!args.blockRefs?.length, progress });
-}
-export async function editDesignedElement(args) {
-    args.progress?.("Editing element...");
-    const refPart = args.refImagePath
-        ? `First, use the Read tool to view the style reference image at: ${args.refImagePath}\nMatch its visual style when applying the change.\n\n`
-        : "";
-    return runParsed(`${refPart}Here is a React+Tailwind page component:
-
-\`\`\`tsx
-${args.code}
-\`\`\`
-
-Modify ONLY the element (and its contents) marked data-dreative-id="${args.elementId}" according to this instruction: "${args.instruction}". Keep everything else byte-identical where possible, keep all data-dreative-id attributes.
-
-Respond with ONLY the full updated .tsx source in a single \`\`\`tsx code fence. No prose.`, extractCode, { allowRead: !!args.refImagePath, progress: args.progress });
-}