| name | frontend-development |
| description | Build or change the lean Express/Mustache/Webpack portfolio in web/, including the static build path, page script, and checked-in public assets. |
Frontend Development
Use this skill for changes under web/.
Structure
web/app.js: Express server, render middleware, route mount, and static assets.web/route/index.js: homepage route plus getIndexData() shared by SSR and static export.web/build.js: renders web/view/index.html into web/public/index.html for static deployment.web/view/index.html: source of truth for portfolio content and section structure.web/src/js/index.js: page enhancement only, currently navigation highlighting and viewport reveals.web/src/css/index.css: stylesheet entrypoint.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.web/src/css/portifolio.css: current portfolio page layout and component-like sections.web/public/: checked-in build output used by the Worker/static deploy path.
Rules
- Treat pages as server-rendered first and browser-enhanced second.
- Keep portfolio content in the Mustache view unless it becomes genuinely dynamic.
- Keep
getIndexData() aligned with both web/app.js runtime rendering and web/build.js static rendering.
- Do not add API clients, frontend models, form helpers, auth flows, or database assumptions unless the site grows into a dynamic app.
- Keep page entry JS small and behavior-oriented; avoid introducing a component framework for static content.
- Keep Webpack entries aligned with page entry files.
- Load fonts through CSS
@import in web/src/css/base.css.
- Rebuild after JS/CSS changes so
web/public/ stays current.
Validation
Run the web build after JS/CSS changes. npm test currently runs Node's native test runner without a checked-in browser suite, so use real browser checks for layout and interaction changes.
