Repository Guidelines
Project Structure & Module Organization
- Root static site with no build step:
index.html — main page (Simplified Chinese content, zh-CN).styles.css — global styles, responsive rules, animations.script.js — vanilla JS for DOM interactions (class cards, smooth scroll, relationship rendering).
- Keep new assets in
assets/ (create if needed). Avoid restructuring or renaming existing classes/IDs.
Build, Test, and Development Commands
- Serve locally (no dependencies):
python3 -m http.server 8000 → open http://localhost:8000.
- Optional: use any static server; no bundlers required.
Coding Style & Naming Conventions
- Indentation: 2 spaces for HTML/CSS/JS. UTF‑8 encoding.
- HTML: semantic sections; preserve
lang="zh-CN" and existing anchors.
- CSS: reuse existing class patterns (e.g.,
.class-card, .advantage-item); prefer classes over inline styles.
- JS: ES6+,
const/let, lowerCamelCase for functions; keep classData keys kebab-case where used.
- Filenames: lowercase with hyphens for new assets (
assets/class-icons/gryphon.png).
Testing Guidelines
- Manual checks in latest Chrome/Firefox/Safari and mobile viewport (≤ 375px):
- Nav links smooth-scroll correctly; cards hover/click update the relationship panel.
- No console errors; animations render smoothly; layout remains responsive.
- No test framework is configured; keep new logic small and easily reviewable.
Commit & Pull Request Guidelines
- Commits: imperative and scoped. Examples:
feat(ui): add damage chart hover effectfix(data): correct gryphon-knight counters
- PRs: clear description, before/after screenshots or GIFs for UI, linked issues, and manual test steps. See template below.
Pull Request Template
Title: <type(scope): short summary>
Summary
- What and why in 1–2 sentences.
Changes
- Key changes (bulleted).
Screenshots
- Before | After at 375px, 768px, 1440px.
Testing
- Steps to reproduce + expected results.
- Browsers/devices checked.
Checklist
- [ ] No console errors
- [ ] Anchors/selectors unchanged or updated in JS
- [ ] Responsive at mobile/tablet/desktop
Screenshot Guidelines
- Provide side‑by‑side before/after for visual changes at: 375×667, 768×1024, and ≥1440px widths.
- Include one interaction capture (hover/click on a
.class-card updating #relationshipDisplay).
- Crop to the changed area when possible; keep file sizes small (PNG/JPEG, ≤1 MB each).
Architecture Overview
- Data:
classData and relationshipData in script.js drive UI content and counters.
- DOM contracts (do not break IDs/classes without updating JS):
#classSelect, .class-card, #visualization, #relationshipDisplay.
- Interaction flow: card click → update select → render relationships → smooth scroll.
Security & Configuration Tips
- Do not embed secrets or API keys. Prefer local assets over external CDNs. Keep third‑party JS minimal and vetted.
Agent-Specific Instructions
- Do not introduce frameworks or build tooling without approval.
- Keep changes minimal, avoid breaking anchors/selectors used by
script.js.
- Maintain Chinese UI copy unless an issue requests localization changes.