Web Card Game
維護「阿軒卡牌對戰」時使用。這是一款原生 HTML/CSS/JS 網頁 TCG，包含對戰、卡包、收藏、牌組工作台、每日任務、收藏里程碑與週任務。
Install
npx skills add mars-tw/web-card-game-skill --skill web-card-gamegit clone --depth 1 https://github.com/mars-tw/web-card-game-skill.git /tmp/web-card-game-skill
mkdir -p ~/.claude/skills
cp -r /tmp/web-card-game-skill/. ~/.claude/skills/web-card-gamePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Web Card Game Skill
## 使用情境
在修改 `skill` repo 時，請把它視為一個無後端的卡牌遊戲套件，而不是單一對戰頁。卡牌資料、開包、牌組、任務與對戰都會互相讀寫 localStorage。
## 重要檔案
| 檔案 | 責任 |
|---|---|
| `templates/card-battle/cards.js` | 卡牌母表、稀有度權重、閃卡、關鍵字與抽卡 |
| `templates/card-battle/core.js` | 純規則與存檔遷移：對戰、任務、里程碑、週任務、牌組驗證 |
| `templates/card-battle/battle.js` | 對戰 UI、AI、卡牌詳情、每日任務 |
| `templates/card-pack/pack.js` | 開卡包、收藏、分解、牌組工作台、模板與週任務 |
| `references/data-model.md` | storage key、schema 與數值契約 |
## 現況契約
- `CARD_POOL` 目前 92 張；`cards.js` 是唯一卡牌事實來源。稀有度分布為普通 25、稀有 24、史詩 23、傳說 20。
- 五個陣營為白潮守軍、奧術結社、荒野獸群、凜冬暗影與潮間中立。
- 稀有度權重為 common 62、rare 26、epic 10、legendary 2；閃卡機率 8%。
- 卡包每包 5 張，首包免費，之後 100 金幣；稀有以上 20 包保底，角色傳說另有 35 包保底。
- R60–R61「對座六影」包含六張具名角色傳說；角色子池偏向 28%，角色立繪在戰場、開包與收藏共用。
- `cardpack_collection_v2` 使用 `{ [cardId]: count, [cardId + "#foil"]: count }`。
- `card_deck_v1` 只保存 `{ version, cards: [id] }`；實際進對戰前會以收藏驗證。
- 牌組必須 20 張，同名最多 2 張，傳說最多 1 張。
- `card_quests_v1` 是每日任務，依 `YYYY-MM-DD` 從 8 個任務抽 3 個。
- `card_goals_v1` 是收藏目標，保存已領里程碑與每週任務；週種子格式為 `YYYY-Www`。
## 修改原則
- 新增卡牌時，同步補 `image` 或接受 emoji fallback，並確認 `keywords` / `trigger` / `effect` 能被 `core.js` 與 `battle.js` 解讀。
- 新增關鍵字時，需補 `KEYWORDS` 說明、對戰規則、卡牌詳情文案與測試。
- 新增任務或週任務時，需確保 `questEventMatches()` 有事件對應，且 battle/pack 會送出進度事件。
- 牌組工作台不可繞過 `Core.validateDeck()`；模板也必須產生合法 20 張牌組。
- 儲存格式變動時，要保留遷移與舊資料容錯。
## 驗證
```bash
npm test
npm run test:e2e
```
文件-only 修改通常只需 `npm test`；若改卡牌資料、任務事件、牌組驗證或 UI，需加跑 E2E。Details
- Skill name
web-card-game- Repository
- mars-tw/web-card-game-skill
- License
- MIT
- Repo updated
- 26 October 2026
FAQ
What does the Web Card Game skill do?
維護「阿軒卡牌對戰」時使用。這是一款原生 HTML/CSS/JS 網頁 TCG，包含對戰、卡包、收藏、牌組工作台、每日任務、收藏里程碑與週任務。
How do I install the Web Card Game skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add mars-tw/web-card-game-skill --skill web-card-game. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Web Card Game popular?
It lives in mars-tw/web-card-game-skill, which has 9 GitHub stars and 1 forks.
Related skills
App UI Slopless
10massipetro/app-ui-slopless
Visual design and UX for native app screens in SwiftUI (iOS and macOS), Jetpack Compose and Compose Multiplatform (KMP). Use whenever the user wants to design, build, restyle, redesign, theme or audit how an iOS, Android or Mac screen, window, flow, component or design system looks and feels — e.g. a screen that looks generic, boring, stock Material or "AI-made"; picking a type scale, colour palette or theme code; giving an app a style (warm premium, neo-brutalist, playful, editorial); or a UX critique of a mobile or Mac screen or screenshot (hierarchy, tap targets, thumb reach, sidebar and to
Wcag Accessibility
9mrKanoh/wcag-accessibility-audit-skill
WCAG 2.1/2.2 AA accessibility skill: audits, remediation, ARIA roles and patterns, keyboard navigation, focus management, screen reader behavior (NVDA, JAWS, VoiceOver, TalkBack), color contrast, accessible components (modals, menus, tabs, forms, tables, comboboxes), React, Vue, Angular, Svelte and Next.js, mobile a11y (React Native, SwiftUI, Compose), cognitive accessibility, legal compliance (ADA, EAA, Section 508, EN 301 549, VPAT/ACR) and CI testing (axe-core, pa11y, Playwright). Use when the user asks whether UI is accessible or passes WCAG, asks about ARIA, focus traps, live regions, ski
Justskill Design
10justskill-ai/justskill-design
Design and edit web pages as a validated HTML file with inline CSS, then fine-tune them on a local canvas. Use this skill whenever the user wants to design, mock up, wireframe, redesign or restyle a web page, app screen, or mobile screen — a landing page, dashboard, settings page, pricing page, empty state, onboarding flow, or any layout built from frames, text, images and icons — or wants to change the spacing, colour, typography or layout of an existing design, turn a design into deliverables, or bring in a `.pen` file. Also use it when the user asks for a visual editor for pages, a design f
Rsa Whiteboard Teacher
9tangyc828/RSA-Whiteboard-Animation
Generate RSA-style whiteboard animation storyboards with scene timing, image prompts, and narration scripts. Supports English and Chinese.
UX Audit
10paulunemoon/ux-audit-skill
Evidence-based UX audit of a product that already exists — marketing website, web app, mobile app, or desktop app. LOAD WHEN the request is to evaluate, review, critique, or diagnose an existing interface: "audit the UX of this app", "review this flow", "review this screen", "what's wrong with this onboarding", "why do users drop off here", "audit our current workflow", "is this accessible", "critique this product", "heuristic review", "a11y audit" — and the same intents in French ("audite l'UX", "revois ce parcours / cet écran", "qu'est-ce qui cloche dans cet onboarding", "pourquoi les utilis
Pair Design
9mary13/pair-design-agent-skill
Use this skill for collaborative UX/UI design work — designing user flows, creating wireframes or prototypes, working through interaction design problems, or making structured design decisions where iteration and rationale matter. Triggers include: 'design a flow', 'create a wireframe', 'let's pair design', 'I need to design X', 'walk me through designing Y', requests for prototype screens, mentions of UX/UI methodology, interaction design, information architecture, or service design. The skill enforces a disciplined one-artifact-at-a-time methodology with clear human-AI roles (Synth/Gen) and
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.