ship-create 1.4.0 → 1.6.0

package/templates/.windsurfrules

@@ -51,11 +51,13 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, run the "Theme & First Screen" step before polishing or shipping.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Theme:** Invoke the `ui-ux-pro-max` skill. Using the business context from `docs/PROJECT.md`, derive 2-3 theme candidates (HSL color tokens + font pairing). Present them, let the user pick one, apply it to `app/globals.css` and `app/layout.tsx`. See `.claude/skills/ship-method/theme-guide.md` for a fallback business-type → palette reference.
-   - **Home:** Read `docs/HUMAN_FLOW.md`, determine the real entry point for this business, and replace the starter kit's generic `app/page.tsx` with it.
-   - Never pick a theme silently. Never require brand assets the user didn't provide.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
+   - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session
 

package/templates/AGENTS.md

@@ -51,11 +51,13 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, run the "Theme & First Screen" step before polishing or shipping.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Theme:** Invoke the `ui-ux-pro-max` skill. Using the business context from `docs/PROJECT.md`, derive 2-3 theme candidates (HSL color tokens + font pairing). Present them, let the user pick one, apply it to `app/globals.css` and `app/layout.tsx`. See `.claude/skills/ship-method/theme-guide.md` for a fallback business-type → palette reference.
-   - **Home:** Read `docs/HUMAN_FLOW.md`, determine the real entry point for this business, and replace the starter kit's generic `app/page.tsx` with it.
-   - Never pick a theme silently. Never require brand assets the user didn't provide.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
+   - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session
 

package/templates/CLAUDE.md

@@ -51,11 +51,13 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, run the "Theme & First Screen" step before polishing or shipping.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Theme:** Invoke the `ui-ux-pro-max` skill. Using the business context from `docs/PROJECT.md`, derive 2-3 theme candidates (HSL color tokens + font pairing). Present them, let the user pick one, apply it to `app/globals.css` and `app/layout.tsx`. See `.claude/skills/ship-method/theme-guide.md` for a fallback business-type → palette reference.
-   - **Home:** Read `docs/HUMAN_FLOW.md`, determine the real entry point for this business, and replace the starter kit's generic `app/page.tsx` with it.
-   - Never pick a theme silently. Never require brand assets the user didn't provide.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
+   - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session
 

package/templates/docs/DESIGN_SPEC.md

@@ -0,0 +1,50 @@
+# Design Spec
+
+> Screen-by-screen design decisions. Auto-populated by the `uiux-frontend` skill during `/build`. Each section is filled when that screen is built — do not write speculative specs for unbuilt screens.
+
+---
+
+## Global decisions
+
+| Decision | Value |
+|----------|-------|
+| Site type | `[FILL: Landing page / Member system]` |
+| Language | `[FILL: Thai / English]` |
+| Font | `[FILL]` |
+| Color palette | `[FILL: shadcn palette name]` |
+| UI trend | `[FILL]` |
+| Trend source | `[FILL: URL or publication that confirmed this trend is current]` |
+
+---
+
+## Screen specs
+
+Each screen gets one entry. Format:
+
+```
+### [Screen name] — [route e.g. /dashboard]
+Status: [planned / in-progress / done]
+Layout: [pattern used]
+Trend application: [how the trend is expressed here]
+Key components: [shadcn components used]
+States: [loading ✓/✗ | empty ✓/✗ | error ✓/✗ | success ✓/✗]
+Revenue link: [how this screen connects to money]
+Notes: [any deviations from the design system, or decisions to revisit]
+```
+
+---
+
+<!-- SCREENS BELOW — filled by uiux-frontend skill during /build -->
+
+### Home / Entry screen — /
+Status: planned
+Layout:
+Trend application:
+Key components:
+States: loading ✗ | empty ✗ | error ✗ | success ✗
+Revenue link:
+Notes:
+
+---
+
+<!-- Add a new entry below for each screen as it gets built -->

package/templates/docs/DESIGN_SYSTEM.md

@@ -0,0 +1,145 @@
+# Design System
+
+> Auto-generated by `/build`. Update here when design decisions change — this is the source of truth for all visual decisions in this project.
+
+---
+
+## Stack
+
+| Layer | Choice |
+|-------|--------|
+| CSS framework | Tailwind CSS v4 |
+| Component library | shadcn/ui |
+| Font loading | `next/font/google` |
+
+---
+
+## Color Palette
+
+**Base theme:** `[FILL: zinc / slate / blue / green / orange / rose / violet]`
+
+All color tokens are from shadcn's CSS variable system. Do not hardcode hex or rgb values anywhere — use only these tokens:
+
+| Token | Usage |
+|-------|-------|
+| `bg-background` | Page background (always white in light mode) |
+| `text-foreground` | Primary text |
+| `text-muted-foreground` | Secondary text, captions, placeholders |
+| `bg-primary` | Primary action background |
+| `text-primary-foreground` | Text on primary background |
+| `bg-secondary` | Secondary/subtle backgrounds |
+| `border` | Dividers, card borders |
+| `bg-destructive` | Error states, delete actions |
+| `bg-accent` | Hover/active backgrounds |
+| `bg-card` | Card surfaces |
+| `bg-sidebar` | Sidebar background |
+
+**Dark mode:** not scoped for MVP — defer until user requests it.
+
+---
+
+## Typography
+
+**Language:** `[FILL: Thai / English]`
+
+**Font:** `[FILL: Prompt / IBM Plex Thai / Noto Sans Thai / Anuphan / Inter / Geist / Playfair Display + DM Sans]`
+
+**Font stack type:** `[FILL: Single-stack (Thai) / Sans-only (Modern) / Serif + Sans (Luxury)]`
+
+| Role | Tailwind classes | Notes |
+|------|-----------------|-------|
+| Display / Hero h1 | `[FILL]` | Used in hero sections only |
+| Page title h1 | `text-3xl font-bold` (Thai) / `text-3xl font-bold tracking-tight` (EN) | |
+| Section heading h2 | `text-xl font-semibold` | |
+| Card heading h3 | `text-base font-semibold` | |
+| Body | `text-base font-normal leading-relaxed` | Thai: `leading-loose` for denser text |
+| Caption / helper | `text-sm text-muted-foreground` | |
+| Label | `text-sm font-medium` | Form labels |
+| Button | `text-sm font-medium` | |
+
+---
+
+## Spacing Scale
+
+Using Tailwind's default spacing scale. These are the project's agreed units — don't introduce other values:
+
+| Use | Class | px |
+|-----|-------|----|
+| Page horizontal padding | `px-4 sm:px-6 lg:px-8` | 16 / 24 / 32 |
+| Section vertical gap | `space-y-8` / `gap-8` | 32 |
+| Card padding | `p-6` | 24 |
+| Form field gap | `space-y-4` | 16 |
+| Inline item gap | `gap-2` / `gap-3` | 8 / 12 |
+| Min touch target | `h-11` | 44 |
+
+---
+
+## Border Radius
+
+| Token | Class | Usage |
+|-------|-------|-------|
+| Default | `rounded-md` | Buttons, inputs, badges |
+| Card | `rounded-lg` | Cards, modals, sheets |
+| Full | `rounded-full` | Avatars, tags, pills |
+
+---
+
+## Shadow
+
+| Class | Usage |
+|-------|-------|
+| `shadow-sm` | Cards, inputs on focus |
+| `shadow-md` | Dropdowns, popovers |
+| `shadow-lg` | Modals, dialogs |
+| `shadow-none` | Flat/minimal screens |
+
+---
+
+## UI Trend
+
+**Selected trend:** `[FILL: trend name]`
+**Reason:** `[FILL: why this trend fits this product + audience]`
+
+**Trend implementation rules for this project:**
+`[FILL: specific Tailwind classes and patterns used to express the trend — filled by /build Step 4]`
+
+**Trend scope:** Applied to `[FILL: hero section / cards / overall layout / specific screens]`. Not applied to: forms, error states, data tables (keep those neutral for usability).
+
+---
+
+## Component Decisions
+
+| Need | Component | Notes |
+|------|-----------|-------|
+| Navigation | `[FILL]` | |
+| Data entry | `[FILL]` | |
+| Data display | `[FILL]` | |
+| Modals | `[FILL]` | |
+| Feedback | `[FILL]` | |
+| Global search | `[FILL: Command / none]` | |
+
+---
+
+## Icons
+
+Use `lucide-react` (already bundled with shadcn). Do not mix icon libraries.
+
+---
+
+## Animation
+
+Keep animations subtle and intentional:
+- Micro-interactions: `transition-all duration-150`
+- Modal/sheet open: shadcn built-in (Radix transitions)
+- Trend-specific animation: `[FILL: if any — e.g. spring scale for Squishy UI]`
+- Disable if `prefers-reduced-motion`: wrap custom animations in `@media (prefers-reduced-motion: no-preference)`
+
+---
+
+## Accessibility Baseline
+
+- Contrast: ≥ 4.5:1 for body text, ≥ 3:1 for large text/UI components
+- Focus ring: Tailwind `ring-2 ring-primary ring-offset-2` (shadcn default)
+- Every form input paired with `<Label htmlFor="...">`
+- Icon-only buttons: `aria-label` required
+- Color not used as the only differentiator (always pair color with shape/text)