Instruction file imported from thanapat2402/bill-splitter (.github/instructions/frontend.instructions.md). Copyright stays with the author.

Frontend File Instructions

Name: frontend
Author: thanapat2402

Keep the app plain HTML, CSS, and browser JavaScript. Do not introduce frameworks, bundlers, or package-managed frontend dependencies unless the user explicitly asks.
Preserve Thai-first labels, alerts, and confirmation copy unless the task is specifically about wording.
Keep logic in the owning controller: composition in ../../AGENTS.md, browser orchestration in ../../script.js, pure calculations in ../../trip-logic.js, rendering in ../../trip-ui.js, form drafting in ../../expense-form.js, committed mutations in ../../trip-actions.js, shell behavior in ../../app-shell.js, and sharing/sync in ../../share-flow.js.
Prefer cached DOM references and central event binding over scattered queries or listeners.
Route committed-state refreshes through updateUI(). When editing sub-expense drafts, prefer updateExpenseTotal() for local draft recalculation.
If you add or rename a top-level script or asset referenced by ../../index.html, update ../workflows/deploy-pages.yml in the same change.
Validate edited UI flows on the local static page first, then use ../skills/frontend-static/SKILL.md or ../skills/deploy-check/SKILL.md when deploy behavior is involved.

{ "ocm": "1", "id": "thanapat2402-bill-splitter-frontend-instructions", "kind": "skill", "name": "frontend", "description": "Use when editing the static browser app. Preserves Thai-first copy, controller ownership, direct-DOM patterns, and GitHub Pages deploy constraints for top-level assets.", "publisher": "thanapat2402", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-instructions" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Use when editing the static browser app. Preserves Thai-first copy, controller ownership, direct-DOM patterns, and GitHub Pages deploy constraints for top-level assets." ], "primary": false, "metadata": { "source": { "provider": "github-instructions", "repository": "https://github.com/thanapat2402/bill-splitter", "path": ".github/instructions/frontend.instructions.md", "ref": "2fe9d09e3144968ee88023ebcc8d5aa64f1a45c2", "url": "https://github.com/thanapat2402/bill-splitter/blob/2fe9d09e3144968ee88023ebcc8d5aa64f1a45c2/.github/instructions/frontend.instructions.md", "key": "thanapat2402/bill-splitter/.github/instructions/frontend.instructions.md" }, "applies_to": "index.html,style.css,script.js,trip-logic.js,trip-ui.js,expense-form.js,trip-actions.js,app-shell.js,share-flow.js" }, "instructions": "# Frontend File Instructions\n\n- Keep the app plain HTML, CSS, and browser JavaScript. Do not introduce frameworks, bundlers, or package-managed frontend dependencies unless the user explicitly asks.\n- Preserve Thai-first labels, alerts, and confirmation copy unless the task is specifically about wording.\n- Keep logic in the owning controller: composition in [../../AGENTS.md](../../AGENTS.md), browser orchestration in [../../script.js](../../script.js), pure calculations in [../../trip-logic.js](../../trip-logic.js), rendering in [../../trip-ui.js](../../trip-ui.js), form drafting in [../../exp", "cost": { "context_tokens": 378 } }

frontend

About

Frontend File Instructions

Use it

Manifest

Reviews