@boopkit/cap-web 0.1.0

package/capability.json

@@ -0,0 +1,33 @@
+{
+  "name": "web",
+  "description": "Web UI with Handlebars + Tailwind",
+  "type": "application",
+  "package": "@boopkit/cap-web",
+  "dependencies": ["express-handlebars", "tailwindcss"],
+  "devDependencies": ["@tailwindcss/cli"],
+  "files": [
+    "views/",
+    "public/",
+    "styles/",
+    "src/controllers/pages.ts",
+    "src/routes/pages.ts",
+    "tailwind.config.ts",
+    "reference/web-ui.ref.md"
+  ],
+  "skills": ["design.web-ui-design.skill.md"],
+  "scripts": {
+    "tailwind:build": { "cmd": "npx @tailwindcss/cli -i styles/styles.css -o public/css/style.css --minify", "description": "Compile Tailwind CSS for production" },
+    "tailwind:watch": { "cmd": "npx @tailwindcss/cli -i styles/styles.css -o public/css/style.css --watch", "description": "Watch for changes and rebuild Tailwind CSS" }
+  },
+  "postInstall": {
+    "steps": ["Build CSS for the first time: npm run tailwind:build"]
+  },
+  "hooks": [
+    { "phase": "imports", "code": "import { configureViewEngine, configureStatic, requestLogger } from '@boopkit/cap-web';", "description": "view engine, static file serving, and request logging" },
+    { "phase": "imports", "code": "import pageRoutes from './routes/pages';", "description": "page route definitions" },
+    { "phase": "preRoutes", "order": 12, "code": "app.use(requestLogger());", "description": "log every request with method, URL, status, and timing" },
+    { "phase": "preRoutes", "order": 40, "code": "configureViewEngine(app);", "description": "configure Handlebars as view engine" },
+    { "phase": "preRoutes", "order": 45, "code": "configureStatic(app);", "description": "serve static content such as CSS" },
+    { "phase": "preRoutes", "order": 50, "code": "app.use(pageRoutes);", "description": "mount page routes" }
+  ]
+}

package/dist/helpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Common Handlebars helpers for use in templates.
+ */
+export declare const helpers: Record<string, (...args: any[]) => any>;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAmE3D,CAAC"}

package/dist/helpers.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.helpers = void 0;
+const handlebars_1 = __importDefault(require("handlebars"));
+const marked_1 = require("marked");
+/**
+ * Common Handlebars helpers for use in templates.
+ */
+exports.helpers = {
+    /** Equality check: {{#if (eq a b)}} */
+    eq: (a, b) => a === b,
+    /** JSON stringify: {{json obj}} */
+    json: (value) => JSON.stringify(value, null, 2),
+    /** Truncate string: {{truncate text 100}} */
+    truncate: (str, len) => {
+        if (typeof str !== 'string')
+            return '';
+        if (str.length <= len)
+            return str;
+        return str.slice(0, len) + '…';
+    },
+    /** Uppercase: {{upper text}} */
+    upper: (str) => (typeof str === 'string' ? str.toUpperCase() : ''),
+    /** Lowercase: {{lower text}} */
+    lower: (str) => (typeof str === 'string' ? str.toLowerCase() : ''),
+    /** Format as currency: {{fmt_dollars 1234}} → "$1,234", {{fmt_dollars 12345 sigfigs=4}} → "$12,350" */
+    fmt_dollars: (value, options) => {
+        if (value == null)
+            return '-';
+        const opts = {
+            style: 'currency',
+            currency: 'USD',
+        };
+        const sigfigs = options?.hash?.sigfigs;
+        if (sigfigs != null) {
+            opts.maximumSignificantDigits = Number(sigfigs);
+        }
+        else {
+            opts.maximumFractionDigits = 0;
+        }
+        return value.toLocaleString('en-US', opts);
+    },
+    /** Format as percentage: {{fmt_percent 45}} → "45%" */
+    fmt_percent: (value) => {
+        if (value == null)
+            return 'n/a';
+        const ratio = value / 100;
+        let digits = 2;
+        if (ratio === 0)
+            digits = 0;
+        if (Math.abs(ratio) >= 0.01)
+            digits = 1;
+        if (Math.abs(ratio) >= 0.1)
+            digits = 0;
+        return ratio.toLocaleString('en-US', {
+            style: 'percent',
+            minimumFractionDigits: digits,
+        });
+    },
+    /** Format a date: {{fmt_date createdAt}} → "March 28, 2026" */
+    fmt_date: (date) => {
+        if (!date)
+            return '';
+        if (typeof date === 'string')
+            date = new Date(date);
+        return date.toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    },
+    /** Render markdown to HTML: {{markdown text}} or {{#markdown}}...{{/markdown}} */
+    markdown: function (options) {
+        if (!options)
+            return '';
+        const content = options.fn ? options.fn(this) : options;
+        return new handlebars_1.default.SafeString(marked_1.marked.parse(content || ''));
+    },
+};
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { configureViewEngine } from './view-engine';
+export type { ViewEngineOptions } from './view-engine';
+export { configureStatic } from './static';
+export type { StaticOptions } from './static';
+export { requestLogger } from './request-logger';
+export { helpers } from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.helpers = exports.requestLogger = exports.configureStatic = exports.configureViewEngine = void 0;
+var view_engine_1 = require("./view-engine");
+Object.defineProperty(exports, "configureViewEngine", { enumerable: true, get: function () { return view_engine_1.configureViewEngine; } });
+var static_1 = require("./static");
+Object.defineProperty(exports, "configureStatic", { enumerable: true, get: function () { return static_1.configureStatic; } });
+var request_logger_1 = require("./request-logger");
+Object.defineProperty(exports, "requestLogger", { enumerable: true, get: function () { return request_logger_1.requestLogger; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "helpers", { enumerable: true, get: function () { return helpers_1.helpers; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,6CAAoD;AAA3C,kHAAA,mBAAmB,OAAA;AAE5B,mCAA2C;AAAlC,yGAAA,eAAe,OAAA;AAExB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/dist/request-logger.d.ts

@@ -0,0 +1,8 @@
+import type { Request, Response, NextFunction } from 'express';
+/**
+ * Lightweight request logger middleware.
+ * Logs method, URL, status code, and response time to stdout.
+ * Mount early (after requestId if present) so it captures all requests.
+ */
+export declare function requestLogger(): (req: Request, res: Response, next: NextFunction) => void;
+//# sourceMappingURL=request-logger.d.ts.map

package/dist/request-logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-logger.d.ts","sourceRoot":"","sources":["../src/request-logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/D;;;;GAIG;AACH,wBAAgB,aAAa,KACnB,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,KAAG,IAAI,CAa/D"}

package/dist/request-logger.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestLogger = requestLogger;
+/**
+ * Lightweight request logger middleware.
+ * Logs method, URL, status code, and response time to stdout.
+ * Mount early (after requestId if present) so it captures all requests.
+ */
+function requestLogger() {
+    return (req, res, next) => {
+        const start = Date.now();
+        const id = req.id || '-';
+        res.on('finish', () => {
+            const ms = Date.now() - start;
+            const status = res.statusCode;
+            const level = status >= 500 ? 'error' : status >= 400 ? 'warn' : 'info';
+            console.log(`${new Date().toISOString()} ${level} [http] ${req.method} ${req.originalUrl} ${status} ${ms}ms req=${id}`);
+        });
+        next();
+    };
+}
+//# sourceMappingURL=request-logger.js.map

package/dist/request-logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-logger.js","sourceRoot":"","sources":["../src/request-logger.ts"],"names":[],"mappings":";;AAOA,sCAcC;AAnBD;;;;GAIG;AACH,SAAgB,aAAa;IAC3B,OAAO,CAAC,GAAY,EAAE,GAAa,EAAE,IAAkB,EAAQ,EAAE;QAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,MAAM,EAAE,GAAI,GAAW,CAAC,EAAE,IAAI,GAAG,CAAC;QAElC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;YACpB,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;YAC9B,MAAM,MAAM,GAAG,GAAG,CAAC,UAAU,CAAC;YAC9B,MAAM,KAAK,GAAG,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YACxE,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,WAAW,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,WAAW,IAAI,MAAM,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;QAC1H,CAAC,CAAC,CAAC;QAEH,IAAI,EAAE,CAAC;IACT,CAAC,CAAC;AACJ,CAAC"}

package/dist/static.d.ts

@@ -0,0 +1,12 @@
+import type { Express } from 'express';
+export interface StaticOptions {
+    /** Absolute path to the static assets directory. Defaults to `<cwd>/public`. */
+    dir?: string;
+    /** Cache-Control max-age value. Defaults to `'1d'` in production, `0` in development. */
+    maxAge?: string | number;
+}
+/**
+ * Serve static assets with configurable cache headers.
+ */
+export declare function configureStatic(app: Express, options?: StaticOptions): void;
+//# sourceMappingURL=static.d.ts.map

package/dist/static.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../src/static.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,GAAE,aAAkB,GAAG,IAAI,CAO/E"}

package/dist/static.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureStatic = configureStatic;
+const path_1 = __importDefault(require("path"));
+const express_1 = __importDefault(require("express"));
+/**
+ * Serve static assets with configurable cache headers.
+ */
+function configureStatic(app, options = {}) {
+    const { dir = path_1.default.join(process.cwd(), 'public'), maxAge = process.env.NODE_ENV === 'production' ? '1d' : 0, } = options;
+    app.use(express_1.default.static(dir, { maxAge }));
+}
+//# sourceMappingURL=static.js.map

package/dist/static.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.js","sourceRoot":"","sources":["../src/static.ts"],"names":[],"mappings":";;;;;AAcA,0CAOC;AArBD,gDAAwB;AACxB,sDAA8B;AAU9B;;GAEG;AACH,SAAgB,eAAe,CAAC,GAAY,EAAE,UAAyB,EAAE;IACvE,MAAM,EACJ,GAAG,GAAG,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,QAAQ,CAAC,EACxC,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAC1D,GAAG,OAAO,CAAC;IAEZ,GAAG,CAAC,GAAG,CAAC,iBAAO,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAC3C,CAAC"}

package/dist/view-engine.d.ts

@@ -0,0 +1,18 @@
+import type { Express } from 'express';
+export interface ViewEngineOptions {
+    /** Absolute path to the views directory. Defaults to `<cwd>/views`. */
+    viewsDir?: string;
+    /** Absolute path to the layouts directory. Defaults to `<cwd>/views/layouts`. */
+    layoutsDir?: string;
+    /** Name of the default layout file (without extension). Defaults to `'main'`. */
+    defaultLayout?: string;
+}
+/**
+ * Configure Handlebars as the view engine for an Express app.
+ * Sets up layouts, partials directory, and common helpers.
+ *
+ * Includes ~130 standard helpers from `handlebars-helpers` (comparison, logical,
+ * string, math, array, etc.) plus custom formatting helpers.
+ */
+export declare function configureViewEngine(app: Express, options?: ViewEngineOptions): void;
+//# sourceMappingURL=view-engine.d.ts.map

package/dist/view-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-engine.d.ts","sourceRoot":"","sources":["../src/view-engine.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAOvC,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,GAAE,iBAAsB,GAAG,IAAI,CAkBvF"}

package/dist/view-engine.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureViewEngine = configureViewEngine;
+const path_1 = __importDefault(require("path"));
+const handlebars_1 = __importDefault(require("handlebars"));
+const express_handlebars_1 = require("express-handlebars");
+const handlebars_helpers_1 = __importDefault(require("handlebars-helpers"));
+const helpers_1 = require("./helpers");
+// Register all standard helpers (comparison, logical, string, math, array, etc.)
+(0, handlebars_helpers_1.default)({ handlebars: handlebars_1.default });
+/**
+ * Configure Handlebars as the view engine for an Express app.
+ * Sets up layouts, partials directory, and common helpers.
+ *
+ * Includes ~130 standard helpers from `handlebars-helpers` (comparison, logical,
+ * string, math, array, etc.) plus custom formatting helpers.
+ */
+function configureViewEngine(app, options = {}) {
+    const { viewsDir = path_1.default.join(process.cwd(), 'views'), layoutsDir = path_1.default.join(process.cwd(), 'views', 'layouts'), defaultLayout = 'main', } = options;
+    app.engine('hbs', (0, express_handlebars_1.engine)({
+        extname: '.hbs',
+        helpers: helpers_1.helpers,
+        layoutsDir,
+        defaultLayout,
+    }));
+    app.set('view engine', 'hbs');
+    app.set('views', viewsDir);
+}
+//# sourceMappingURL=view-engine.js.map

package/dist/view-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-engine.js","sourceRoot":"","sources":["../src/view-engine.ts"],"names":[],"mappings":";;;;;AA0BA,kDAkBC;AA5CD,gDAAwB;AACxB,4DAAoC;AACpC,2DAA4C;AAE5C,4EAAmD;AACnD,uCAAoC;AAEpC,iFAAiF;AACjF,IAAA,4BAAiB,EAAC,EAAE,UAAU,EAAE,oBAAU,EAAE,CAAC,CAAC;AAW9C;;;;;;GAMG;AACH,SAAgB,mBAAmB,CAAC,GAAY,EAAE,UAA6B,EAAE;IAC/E,MAAM,EACJ,QAAQ,GAAG,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,OAAO,CAAC,EAC5C,UAAU,GAAG,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,EACzD,aAAa,GAAG,MAAM,GACvB,GAAG,OAAO,CAAC;IAEZ,GAAG,CAAC,MAAM,CACR,KAAK,EACL,IAAA,2BAAM,EAAC;QACL,OAAO,EAAE,MAAM;QACf,OAAO,EAAP,iBAAO;QACP,UAAU;QACV,aAAa;KACd,CAAC,CACH,CAAC;IACF,GAAG,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAC9B,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@boopkit/cap-web",
+  "version": "0.1.0",
+  "description": "Express view engine configuration, Handlebars helpers, and static asset middleware",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "scaffold/",
+    "skills/",
+    "capability.json"
+  ],
+  "boopkit": {
+    "capability": true,
+    "scaffoldDir": "scaffold",
+    "skillsDir": "skills",
+    "manifest": "capability.json"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "handlebars-helpers": "^0.10.0",
+    "marked": "^15.0.0"
+  },
+  "peerDependencies": {
+    "express": ">=4.0.0",
+    "express-handlebars": ">=7.0.0",
+    "handlebars": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "express-handlebars": "^8.0.1",
+    "handlebars": "^4.7.8",
+    "typescript": "^5.9.3"
+  },
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scaffold/public/css/.gitkeep

@@ -0,0 +1 @@
+

package/scaffold/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <circle cx="16" cy="16" r="14" fill="#6C5CE7"/>
+  <circle cx="11" cy="13" r="2.5" fill="#FFF"/>
+  <circle cx="21" cy="13" r="2.5" fill="#FFF"/>
+  <path d="M10 20q6 5 12 0" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round"/>
+</svg>

package/scaffold/reference/web-ui.ref.md

@@ -0,0 +1,116 @@
+# Web UI Infrastructure
+
+How this project renders pages: Handlebars templates, Tailwind CSS, static assets, and the request pipeline.
+
+**Related skills**: [design.web-ui-design.skill.md](../skills/design.web-ui-design.skill.md)
+
+---
+
+## Request Pipeline
+
+Web requests flow through middleware configured at preRoutes phase:
+
+| Order | Middleware | Purpose |
+|-------|-----------|---------|
+| 12 | `requestLogger()` | Log method, URL, status, and response time |
+| 40 | `configureViewEngine(app)` | Register Handlebars as view engine |
+| 45 | `configureStatic(app)` | Serve `public/` with cache headers |
+| 50 | `app.use(pageRoutes)` | Mount page routes |
+
+---
+
+## View Engine
+
+Handlebars via `express-handlebars`. Templates in `views/`, layouts in `views/layouts/`.
+
+**Default layout**: `views/layouts/main.hbs` — provides DOCTYPE, meta tags, CSS link, and `{{{body}}}` placeholder.
+
+**Rendering**: Controllers call `res.render('viewName', data)`. The view name maps to `views/<viewName>.hbs`.
+
+### Helpers
+
+~130 helpers registered from `handlebars-helpers` (comparison, string, math, array). Custom helpers from `@boopkit/cap-web`:
+
+| Helper | Purpose |
+|--------|---------|
+| `json` | JSON stringify with formatting |
+| `truncate` | Truncate string with ellipsis |
+| `fmt_dollars` | Currency formatting |
+| `fmt_percent` | Percentage formatting |
+| `fmt_date` | Human-readable date (e.g., "March 28, 2026") |
+| `markdown` | Render markdown to HTML |
+
+---
+
+## Tailwind CSS
+
+**Input**: `styles/styles.css` — imports Tailwind, theme tokens, and base styles from `@boopkit/cap-web`.
+
+**Output**: `public/css/style.css` — compiled CSS served as a static asset.
+
+**Build**:
+```bash
+npm run tailwind:build   # Production (minified)
+npm run tailwind:watch   # Development (watch mode)
+```
+
+**Config**: `tailwind.config.ts` scans `views/**/*.hbs`, `styles/**/*.css`, and `node_modules/@boopkit/*/styles/**/*.css`.
+
+### CSS approach
+
+Use semantic class names in templates, define them in `styles/styles.css` with `@apply` for Tailwind utilities. Avoid inline Tailwind classes in templates except for one-off spacing.
+
+---
+
+## Static Assets
+
+`public/` is served via Express static middleware. Cache defaults:
+- Production: 24-hour `Cache-Control`
+- Development: no cache
+
+---
+
+## Page Pattern
+
+Controllers are thin dispatch — parse request, call service (if needed), render view:
+
+```typescript
+export function home(_req: Request, res: Response): void {
+  res.render('home');
+}
+```
+
+Routes use Express Router:
+
+```typescript
+const router = Router();
+router.get('/', pagesController.home);
+router.get('/about', pagesController.about);
+export default router;
+```
+
+---
+
+## Package Exports
+
+`@boopkit/cap-web` exports:
+
+| Export | Purpose |
+|--------|---------|
+| `configureViewEngine(app, opts?)` | Register Handlebars with helpers |
+| `configureStatic(app, opts?)` | Mount static file serving |
+| `requestLogger()` | Request logging middleware |
+
+---
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `views/layouts/main.hbs` | Default page layout |
+| `views/*.hbs` | Page templates |
+| `styles/styles.css` | CSS entry point (Tailwind + theme) |
+| `public/` | Static assets (compiled CSS, images) |
+| `tailwind.config.ts` | Tailwind content paths and theme |
+| `src/routes/pages.ts` | Page route definitions |
+| `src/controllers/pages.ts` | Page controller dispatch |

package/scaffold/src/controllers/pages.ts

@@ -0,0 +1,17 @@
+import type { Request, Response } from 'express';
+
+/**
+ * @boopkit/cap-web example — Replace with your own page controllers.
+ * Controllers are thin dispatch: parse input, call a service, render a view.
+ * See design.controllers.skill.md for core principles.
+ *
+ * When the `services` capability is installed, import services:
+ *   import services from '@services';
+ */
+export function home(_req: Request, res: Response): void {
+  res.render('home');
+}
+
+export function about(_req: Request, res: Response): void {
+  res.render('about');
+}

package/scaffold/src/routes/pages.ts

@@ -0,0 +1,10 @@
+import { Router } from 'express';
+import * as pages from '../controllers/pages';
+
+const router = Router();
+
+/** @boopkit/cap-web example — replace with your own page routes */
+router.get('/', pages.home);
+router.get('/about', pages.about);
+
+export default router;

package/scaffold/styles/styles.css

@@ -0,0 +1,6 @@
+/* @boopkit/cap-web template — Add project overrides below the imports. */
+@import "tailwindcss";
+@import "@boopkit/cap-web/styles/theme.css";
+@import "@boopkit/cap-web/styles/base.css";
+
+/* Project overrides — later rules win via cascade */

package/scaffold/tailwind.config.ts

@@ -0,0 +1,10 @@
+/** @boopkit/cap-web template — Customize Tailwind settings for your project. */
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: [
+    './views/**/*.{hbs,handlebars}',
+    './styles/**/*.css',
+    './node_modules/@boopkit/*/styles/**/*.css',
+  ],
+} satisfies Config;

package/scaffold/views/404.hbs

@@ -0,0 +1,8 @@
+{{!-- @boopkit/cap-web — 404 page. Customize to match your app's design. --}}
+<main class="welcome-page">
+  <h1 class="page-title">404</h1>
+  <p class="page-subtitle">There&apos;s nothing at <code>{{path}}</code></p>
+  <nav class="welcome-actions">
+    <a href="/" class="btn-primary">Go home</a>
+  </nav>
+</main>

package/scaffold/views/about.hbs

@@ -0,0 +1,8 @@
+{{!-- @boopkit/cap-web — About page. Customize to describe your project. --}}
+<main class="welcome-page">
+  <h1 class="page-title">{{projectName}}</h1>
+  <p class="page-subtitle">Scaffolded with boop.</p>
+  <nav class="welcome-actions">
+    <a href="/" class="btn-secondary">Home</a>
+  </nav>
+</main>

package/scaffold/views/home.hbs

@@ -0,0 +1,9 @@
+{{!-- @boopkit/cap-web example — Replace with your own page content. --}}
+<main class="welcome-page">
+  <h1 class="page-title">{{projectName}}</h1>
+  <p class="page-subtitle"><strong>boop</strong>! and it&apos;s done. Your app <strong>{{projectName}}</strong> is running.</p>
+  <nav class="welcome-actions">
+    <a href="https://github.com/your-org/boop" class="btn-primary">boop docs</a>
+    <a href="/about" class="btn-secondary">about {{projectName}}</a>
+  </nav>
+</main>

package/scaffold/views/layouts/main.hbs

@@ -0,0 +1,15 @@
+{{!-- @boopkit/cap-web template — Customize this layout for your app. --}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{projectName}}</title>
+  <meta name="description" content="{{#if meta_description}}{{meta_description}}{{else}}Built with boopkit{{/if}}">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="app-shell">
+  {{{body}}}
+</body>
+</html>

package/skills/design.web-ui-design.skill.md

@@ -0,0 +1,189 @@
+# Web UI Design Principles
+This skill guides the design and implementation of user interfaces following our established patterns and philosophy.
+
+For controller design (the code that handles requests and renders views), apply the core principles in `design.controllers.skill.md` from the `services` capability: thin dispatch, no business logic in controllers, services handle the work. This skill adds web-specific guidance on top: view rendering, template structure, CSS patterns.
+
+## Core Philosophy
+When building UI components, align with the **Spartan Code Philosophy** (see [development.skill.md](development.skill.md)):
+- Only introduce markup, styles, or components required for current functionality
+- Avoid building UI elements in anticipation of future needs
+- Resist adding extra styling, animations, or features beyond what's requested
+- If additional UI enhancements seem beneficial, discuss with the team first
+
+## Semantic CSS Approach
+We use **semantic CSS classes** that describe the purpose of elements rather than their appearance:
+
+**Good (semantic):**
+```html
+<h1 class="page-title">Dashboard</h1>
+<p class="page-subtitle">Welcome back</p>
+<button class="btn-primary">Save Changes</button>
+<div class="policy-item">...</div>
+```
+
+**Avoid (presentational):**
+```html
+<h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
+<p class="text-sm text-gray-600 mt-2">Welcome back</p>
+<button class="bg-blue-500 text-white px-4 py-2 rounded">Save Changes</button>
+```
+
+### Implementation
+- Define semantic class names in `styles.css` using nested structure
+- Apply Tailwind utility classes with `@apply` directive inside semantic classes
+- Use semantic classes in HTML/Handlebars templates
+- Group related styles together with CSS nesting
+
+**Example:**
+```css
+.settings-page {
+    @apply px-6 py-4;
+
+    .settings-block {
+        @apply mb-8 bg-white border border-gray-200 rounded-lg p-6;
+    }
+
+    .block-heading {
+        @apply text-lg font-semibold text-gray-900 mb-4;
+    }
+}
+```
+
+## Modular Templates and Partials
+Structure templates for reusability while maintaining simplicity:
+
+### When to Create Partials
+Create reusable partials for:
+- Repeated UI patterns used across multiple pages (e.g., navigation bars, footers)
+- Complex components that would clutter the main template
+- Self-contained blocks with clear boundaries and purpose
+
+### When NOT to Create Partials
+Avoid creating partials for:
+- One-off page-specific content
+- Simple markup that's only used once
+- Breaking down templates just for the sake of breaking them down
+
+### The Simplicity Rule
+> **Two simple things are better than one complex thing**
+
+When considering whether to reuse existing components:
+- **DO reuse** components that are designed for reuse and fit your needs naturally
+- **DON'T force-fit** a complex reusable component when simple custom markup would be clearer
+- **DON'T make** components overly configurable to handle every edge case
+- **DO create** a second simpler component if the existing one requires too many parameters or conditions
+
+### Handlebars Helpers
+`@boopkit/cap-web` includes the [`handlebars-helpers`](https://github.com/helpers/handlebars-helpers) library (~130 helpers) plus custom formatting helpers.
+
+**Standard helpers (from handlebars-helpers) — most useful:**
+- Comparison: `gt`, `lt`, `gte`, `lte`, `eq`, `is`, `not`, `compare`
+- Logical: `and`, `or`, `not`
+- String: `capitalize`, `trim`, `replace`, `startsWith`, `contains`
+- Array: `first`, `last`, `sort`, `forEach`, `join`
+- Math: `add`, `subtract`, `multiply`, `divide`, `ceil`, `floor`, `round`
+
+**Custom helpers (from @boopkit/cap-web):**
+- `fmt_dollars` — format number as currency: `{{fmt_dollars 1234}}` → `$1,234` (optional `sigfigs` for data viz: `{{fmt_dollars 12345 sigfigs=4}}` → `$12,350`)
+- `fmt_percent` — format as percentage: `{{fmt_percent 45}}` → `45%`
+- `fmt_date` — human-readable date: `{{fmt_date createdAt}}` → `March 28, 2026`
+- `markdown` — render markdown to HTML: `{{markdown text}}` or `{{#markdown}}...{{/markdown}}`
+- `json` — JSON stringify: `{{json obj}}`
+- `truncate` — truncate string: `{{truncate text 100}}`
+- `upper` / `lower` — case conversion
+- `eq` — strict equality check (also available from handlebars-helpers)
+
+Keep template logic minimal—complex logic belongs in the controller/service layer.
+
+## UI Structure Patterns
+
+### Page Structure
+Follow consistent page patterns:
+```html
+<div class="[page-type]-page">
+  <div class="page-header mb-6">
+    <h1 class="page-title">Page Title</h1>
+    <p class="page-subtitle">Brief description of the page</p>
+  </div>
+
+  <section class="[content-section-class]">
+    <!-- Page content -->
+  </section>
+</div>
+```
+
+### Form Structure
+Use consistent form patterns:
+```html
+<form method="POST" action="/path" class="form">
+  <div class="form-group horizontal">
+    <label for="field-id" class="form-label">Field Name</label>
+    <input id="field-id" name="fieldName" type="text" class="form-input">
+  </div>
+  
+  <div class="form-actions">
+    <button type="submit" class="btn-primary">Save</button>
+    <button type="button" class="btn-cancel">Cancel</button>
+  </div>
+</form>
+```
+
+### Component Structure
+Group related elements with semantic containers:
+```html
+<div class="policy-list">
+  <div class="policy-item">
+    <div class="policy-header">
+      <h2 class="policy-name">Policy Name</h2>
+      <!-- controls -->
+    </div>
+    <p class="policy-description">Description text</p>
+  </div>
+</div>
+```
+
+## Best Practices
+
+### Naming Conventions
+- Use lowercase with hyphens: `page-title`, `btn-primary`, `policy-item`
+- Be descriptive of purpose, not appearance: `block-heading` not `large-bold-text`
+- Group related classes with common prefixes: `policy-item`, `policy-header`, `policy-name`
+
+### CSS Organization
+- Group page-specific styles under page class selector
+- Use nesting to show hierarchy and relationships
+- Add comments to mark major sections: `/** === Settings Page === **/`
+- Keep specificity low—avoid deep nesting unless necessary
+
+### Reuse Strategy
+1. **First**, check if an existing semantic class fits your needs
+2. **If close**, use the existing class—don't create near-duplicates
+3. **If not quite right**, evaluate:
+   - Is it worth making the existing class more flexible?
+   - Or is a new simple class clearer?
+4. **Remember**: Two simple classes are better than one complex parameterized system
+
+## Anti-Patterns to Avoid
+- ❌ Using Tailwind utility classes directly in templates (except for one-off spacing tweaks)
+- ❌ Creating overly abstract/configurable components for simple use cases
+- ❌ Deep partial nesting that makes template flow hard to follow
+- ❌ Adding UI elements or styles "just in case" they're needed later
+- ❌ Creating partials for markup that only appears once
+- ❌ Duplicating semantic classes with slightly different names
+
+## "Paper-Style" Reports (Analytics & Insights)
+When designing report/analytics UIs, prefer a **paper-like** presentation:
+- Keep it Edward Tufte-inspired: clean, dense, information-rich
+- Use clear headings and subheadings to organize content
+- Present data in a logical flow, minimizing distractions
+- Start with a brief narrative intro (what this section means / how to use it)
+- Use light structure (lists and subtle indentation); avoid heavy tables and gridlines
+- Keep spacing tight and consistent; avoid boxed sub-sections unless necessary
+- Prefer aligned numbers/labels over icons/emoji for density and scanability
+
+---
+
+See also:
+- [development.skill.md](development.skill.md) for Spartan Code Philosophy
+- [../reference/web-development.ref.md](../reference/web-development.ref.md) for current implementation examples
+- [../reference/boop-guide.ref.md](../reference/boop-guide.ref.md) for CSS extension model (`@theme` tokens, package styles, cascade overrides)