Menu
Build or change the Express/Mustache/Webpack frontend in web/ with page scripts, DOM components, helpers, and API-backed frontend models.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Build or change API behavior in api/ using Express routers, middleware, CustomError, model instances, and camelCase JSON responses.
Review backend and frontend template code for real defects, boundary violations, security gaps, and missing tests. Auto-invoke for code reviews or bug investigations. Triggers: "bug review", "review code", "find bugs", "security audit", "check defects".
Implement OOP API entities in api/model/ using the shared Model base class and relation helper.
Maintain the api/helpers/postgres.js SQL boundary, CRUD helper surface, and safe filter conventions.
Update project-local agent guidance when architecture, workflows, commands, or conventions change. Auto-invoke when user or agent output indicates a reusable workflow or durable rule. Triggers: "update docs", "update skill", "create new skill", "update agent instructions", "document recurring pattern", "capture reusable workflow".
Add accurate JSDoc and focused comments when changing template code. Auto-invoke during code writing or refactoring. Triggers: "document code", "jsdoc", "code comments", "add comments", "explain logic".
| 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. |
Use this skill for changes under web/.
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.Form, Input, Select, and Toast for form state, validation, autosave, and notifications before adding one-off DOM logic.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.WeakMap keyed by the element or an index-based lookup map rather than dataset or getAttribute('data-*').Request/Api.TemplateVar for server-provided runtime config when the render middleware instance sends vars to the browser.@import in web/src/css/base.css and keep page CSS files slim composition layers.Run the web build after JS/CSS changes and use Playwright or manual browser checks for interaction-heavy changes.