メニュー
Build or change the Express/Mustache/Webpack frontend in web/ with page scripts, DOM components, helpers, and API-backed frontend models.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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.
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".