diff --git a/packages/cli/templates/.agents/rules/workflow.md b/packages/cli/templates/.agents/rules/workflow.md index f510b1f8..28afb1f6 100644 --- a/packages/cli/templates/.agents/rules/workflow.md +++ b/packages/cli/templates/.agents/rules/workflow.md @@ -19,6 +19,12 @@ cover what you need, the full hosted docs are at **https://docs.webjs.com**. the example `User` model, the example users module, etc. with the app the user actually asked for. Do not ship "Hello from " as the deliverable. +- **Use a unique design (UI apps).** When the app has a UI, give it a design of + your own (palette, layout, typography, chrome) that fits what the user asked + for. Do NOT mimic the scaffold's example look (its warm colors, the 760px + reading column, the example header/nav). The `api` template has no UI, so this + does not apply there. Keep the design tokens and theme setup in + `app/layout.ts`, those are infrastructure, and restyle on top of them. - **Only three templates exist:** `webjs create ` (default full-stack), `--template api`, `--template saas`. The CLI rejects any other `--template` value. Pick: diff --git a/packages/cli/templates/.cursorrules b/packages/cli/templates/.cursorrules index 34d2f735..07c536b9 100644 --- a/packages/cli/templates/.cursorrules +++ b/packages/cli/templates/.cursorrules @@ -18,6 +18,13 @@ cover what you need, the full hosted docs are at **https://docs.webjs.com**. `app/page.ts`, the example `User` model, the example users module, etc. with the app the user actually asked for. Don't ship "Hello from " as the deliverable. +- **Use a unique design (UI apps).** When the app has a UI, give it a + design of your own (palette, layout, typography, chrome) that fits what + the user asked for. Do NOT mimic the scaffold's example look (its warm + colors, the 760px reading column, the example header/nav). The `api` + template has no UI, so this does not apply there. Keep the design tokens + and theme setup in `app/layout.ts`, those are infrastructure, and + restyle on top of them. - **Only three templates exist:** `webjs create ` (default full-stack), `--template api`, `--template saas`. The CLI rejects any other `--template` value. Pick: diff --git a/packages/cli/templates/.github/copilot-instructions.md b/packages/cli/templates/.github/copilot-instructions.md index c5b38fdf..2b4c1bf4 100644 --- a/packages/cli/templates/.github/copilot-instructions.md +++ b/packages/cli/templates/.github/copilot-instructions.md @@ -18,6 +18,13 @@ the full hosted docs are at **https://docs.webjs.com**. `app/page.ts`, the example `User` model, the example users module, etc. with the app the user actually asked for. Don't ship "Hello from " as the deliverable. +- **Use a unique design (UI apps).** When the app has a UI, give it a + design of your own (palette, layout, typography, chrome) that fits what + the user asked for. Do NOT mimic the scaffold's example look (its warm + colors, the 760px reading column, the example header/nav). The `api` + template has no UI, so this does not apply there. Keep the design tokens + and theme setup in `app/layout.ts`, those are infrastructure, and + restyle on top of them. - **Only three templates exist:** `webjs create ` (default full-stack), `--template api`, `--template saas`. The CLI rejects any other `--template` value. Pick: diff --git a/packages/cli/templates/AGENTS.md b/packages/cli/templates/AGENTS.md index 563aefaf..ea633b39 100644 --- a/packages/cli/templates/AGENTS.md +++ b/packages/cli/templates/AGENTS.md @@ -20,7 +20,13 @@ example `Home` nav, and pick a content-width container that fits. The default `
` is a reading column for prose and forms, so for a full-bleed app, dashboard, or board, widen the cap or remove it (keep the theme tokens). A wide layout left in the 760px -reading column overflows into a horizontal scrollbar. This is ENFORCED: +reading column overflows into a horizontal scrollbar. **Give the app a +unique design.** When it has a UI, choose its palette, layout, typography, +and chrome to fit what the user asked for, rather than mimicking the +scaffold's example look (the warm accent, the reading column, the serif +display, the example header/nav) or just recoloring the same layout. The +`api` template has no UI, so this does not apply there. The design tokens +and theme wiring are infrastructure to keep and restyle on top of. This is ENFORCED: the example `app/page.ts` and `app/layout.ts` carry a `webjs-scaffold-placeholder` marker comment, and `webjs check` fails while any marker remains, so this freshly scaffolded app fails the check diff --git a/packages/cli/templates/CONVENTIONS.md b/packages/cli/templates/CONVENTIONS.md index 956554cf..b8aea701 100644 --- a/packages/cli/templates/CONVENTIONS.md +++ b/packages/cli/templates/CONVENTIONS.md @@ -333,7 +333,15 @@ When the user asks the agent to build their actual app: dashboard, or board, or a wide layout overflows into an unnecessary horizontal scrollbar. Keep the design tokens and theme setup, those are infrastructure. -6. **Keep:** the Drizzle setup, the test config, the agent config files +6. **Use a unique design (UI apps).** Give the app a look of its own that + fits what the user asked for. Choose the palette, layout, typography, + spacing, and chrome deliberately. Do NOT mimic the scaffold's example + look (its warm accent, the 760px reading column, the serif display, the + example header/nav), and do not just recolor the same layout. The + `api` template has no UI, so this does not apply there. The design + tokens and theme wiring in `app/layout.ts` are infrastructure to keep + and restyle on top of, not the example look to preserve. +7. **Keep:** the Drizzle setup, the test config, the agent config files (`AGENTS.md`, `CONVENTIONS.md`, `CLAUDE.md`, `.cursorrules`, etc.), `db/connection.server.ts` + `db/columns.server.ts`, the directory conventions, the design tokens in `app/layout.ts`. These are the