skills.rest
werlang
werlangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-frontend

Build and review the Academic Events Express SSR frontend with bundled vanilla JavaScript UI modules.

Updated Feb 25, 2026
Search Tags:#code review#frontend#webpack#express#ssr#mustache#vanilla javascript
One-click install
npx skills add https://github.com/werlang/event-hub --skill web-frontend-werlang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend
Source: https://github.com/werlang/event-hub/tree/main/.agents/skills/web-frontend
Command: npx skills add https://github.com/werlang/event-hub --skill web-frontend-werlang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Maintaining the Academic Events web app requires coordinating Express SSR templates, webpack bundles, class-based UI components, and API envelope handling across four page entries, which is error-prone without a codified map of the architecture and its conventions. ## Core Features & Use Cases - Architecture Guidance: Documents the Express + Mustache SSR routes, webpack entries, client modules, and API integration precedence so changes land in the right files. - Implementation and Review Rules: Enforces DOM data hygiene, component consolidation, CSS split conventions, and Portuguese-facing text consistency when editing home, login, week, or dashboard pages. - Validation Workflow: Pairs Node test suites under web/tests with a browser smoke checklist so interaction changes are verified in a real browser, not just jsdom. - Use Case: When adding a new event filter to the home page, follow the documented steps to update the template, query-state helpers, and API support, then run npm test and verify the filter interaction in a browser session. ## Quick Start Ask the agent to add a category filter to the home page of the Academic Events web app and validate it with the existing test suite and a browser check.

Frequently Asked Questions about web-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new filter to the Academic Events home page?▼

Add the filter input in index.html, include the field in createHomeFilterParams and readHomeFiltersFromUrl, and confirm the API supports the filter. Then update the relevant web/tests coverage and verify the interaction in a browser.

How does the frontend resolve the API base URL?▼

The client resolves API_URL in three steps: the TemplateVar apiUrl value, then the meta tag named api-url, then a fallback to empty string for relative paths. Keep this precedence explicit when changing API integration behavior.

Can I store event IDs in DOM data attributes?▼

No. The skill forbids storing application data in data-* attributes, which are reserved for selectors and behavior hooks. Domain data must live in JavaScript objects, Maps, or class properties with lookup maps keyed by element ID.

What tests should I run after changing web frontend code?▼

Run the committed Node test suite under web/tests using npm test, and rebuild bundles with npm run build from web/package.json. For interaction changes, also open the affected page in a real browser and exercise the touched flow.

Is jsdom testing enough to validate UI changes?▼

No. The skill explicitly states jsdom or webpack success is not a substitute for a real browser pass. If a browser session is impossible, report that limitation explicitly rather than claiming equivalent validation.

Related Skills

Explore More Software Engineering Skills→
mattwoodcomattwoodco
3

docker

Set up a Docker Compose local development environment with multiple services.

Community
Advanced
GoBeromsuGoBeromsu

verification-validator

Validate code changes with pytest, webpack, or Playwright tests based on change type.

Community
Intermediate
Comfy-OrgComfy-Org
2.0k

red-green-fix

Fixes bugs as two commits so CI proves the regression test catches the bug.

Official
Intermediate
damntreckydamntrecky
1

webawesome

Provide over 50 accessible web components for React, Vue, Angular, and Svelte.

Community
Basic