| name | frontend-development |
| description | Build or change the Express/Mustache/Webpack frontend in web/ with page scripts, DOM components, helpers, and API-backed frontend models. |
Frontend Development
Use this skill for changes under web/.
Structure
web/app.js: Express server, template routes, static assets, render middleware.web/middleware/render.js: async template rendering, optional server-to-browser runtime values through template-vars, and view-template caching.web/src/js/*.js: page entry files that orchestrate the page.web/src/js/components/: the only browser classes that query, render, or mutate DOM.web/src/js/model/: the only browser classes that call API endpoints.web/src/js/helpers/: Api, Request, TemplateVar, LocalData, and frontend-only support utilities.web/src/css/tokens.css: shared color, spacing, radius, and font tokens.web/src/css/base.css: shared font imports, reset rules, and global element styles.
Rules
- Treat pages as server-rendered first and browser-enhanced second.
- Page entry files wire components, models, and helpers together; they should not become API clients or DOM component libraries.
- Reuse
Form, Input, Select, and Toast for form state, validation, autosave, and notifications before adding one-off DOM logic.
- Never store application data in DOM
data-* attributes. Data attributes are for framework selectors (data-role, data-position) and DOM behavior hooks only. Domain data (IDs, values, error messages, grouping keys, state enums) belongs in dedicated JavaScript structures.
- When a component needs to associate data with DOM elements for later lookup, use a
WeakMap keyed by the element or an index-based lookup map rather than dataset or getAttribute('data-*').
- Keep timeout handling, content-type parsing, and API error mapping inside
Request/Api.
- Use
TemplateVar for server-provided runtime config when the render middleware instance sends vars to the browser.
- Use frontend models for API calls.
- Keep Webpack entries aligned with page entry files.
- Load fonts through CSS
@import in web/src/css/base.css and keep page CSS files slim composition layers.
Validation
Run the web build after JS/CSS changes and use Playwright or manual browser checks for interaction-heavy changes.
