技能 combat-ui-pattern-a

📦

combat-ui-pattern-a

Name: combat-ui-pattern-a
Author: CesarAugustusGroB

內容修訂 r1 安全 ⚙️ 外部命令

建置分割面板戰鬥 UI

戰鬥畫面很難清楚分割成玩家、敵人與動作區域。此技能為 Claude、Codex 和 Claude Code 提供可重複使用的 React 實作指南。

支援: Claude Codex Code(CC)

📊 76 尚可

Maintain this Skill? Claim it 📊 76 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "combat-ui-pattern-a" from https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a.md and its manifest at https://skillstore.io/api/skills/cesaraugustusgrob-combat-ui-pattern-a/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/cesaraugustusgrob-combat-ui-pattern-a.md 已簽名 manifest GET /api/skills/cesaraugustusgrob-combat-ui-pattern-a/manifest 已簽名 lockfile GET /api/skills/cesaraugustusgrob-combat-ui-pattern-a/lockfile

測試它

正在使用「combat-ui-pattern-a」。為戰鬥場景建置 Pattern A 版面配置基礎。

預期結果:

產生的 CombatLayout 規劃，包含三個區域、響應式行動裝置行為，以及標題、對峙區和動作停駐區的清楚掛載點。

正在使用「combat-ui-pattern-a」。為玩家與敵人資料建立可重複使用的角色面板。

預期結果:

支援鏡像對齊、身分顯示、資源條、狀態效果、sprite 呈現和浮動文字錨點的元件設計。

正在使用「combat-ui-pattern-a」。潤飾戰鬥回饋與動作控制。

預期結果:

快速動作、主要動作、VS 效果、畫面震動、浮動戰鬥文字和 reduced-motion 替代方案的 UI 實作大綱。

安全審計

安全

v8 • 2026/7/6 開啟版本化報告

All 67 static findings appear to be false positives caused by markdown code fences, TypeScript template literals, Tailwind grid examples, and fixed local scaffolding commands. I found no evidence of prompt injection, data exfiltration, destructive behavior, network access, credential access, or malicious command execution in the reviewed files.

已掃描檔案

2,425

分析行數

複核項目

已忽略的誤報

風險因素

⚙️ 外部命令 (47)

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/cesaraugustusgrob-combat-ui-pattern-a/security.svg)](https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cesaraugustusgrob-combat-ui-pattern-a/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/cesaraugustusgrob-combat-ui-pattern-a.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

CesarAugustusGroB. (2026). combat-ui-pattern-a security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a/audits/8

BibTeX 引用

@techreport{cesaraugustusgrob-cesaraugustusgrob-combat-ui-pattern-a-2026,
  author = {CesarAugustusGroB},
  title = {combat-ui-pattern-a security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a/audits/8},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "combat-ui-pattern-a security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "CesarAugustusGroB"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a/audits/8"
identifiers:
  - type: other
    value: "skillstore:cesaraugustusgrob-combat-ui-pattern-a:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

重構戰鬥畫面

將擁擠的垂直戰鬥場景轉換為分割式玩家對敵人版面配置，並使用可重複使用的 React 元件。

標準化遊戲 UI 元件

建立遵循同一戰鬥介面模式的共用面板、動作卡片、標題和分隔器。

原型製作戰術戰鬥流程

產生清晰的戰鬥版面配置，將階段狀態、角色狀態和可用動作分開。

試試這些提示

建立版面配置外殼

使用 combat-ui-pattern-a 只建置 CombatLayout 外殼。包含符合現有專案的響應式列、imports 和 props。

新增階段標題

使用 combat-ui-pattern-a 實作 PhaseHeader。顯示回合數、目前階段、各方動作次數和 approach modifiers。

抽取角色面板

使用 combat-ui-pattern-a 從現有玩家與敵人 UI 抽取 CharacterPanel。保留生命值、chakra、buffs、身分識別和對齊方式。

完成戰鬥介面

使用 combat-ui-pattern-a 將 Combat.tsx 遷移至 Pattern A。實作版面配置、面板、動作停駐區、VS 分隔器、動畫和 reduced-motion 支援。

最佳實務

在抽取較小元件之前，先從 CombatLayout 開始。
保持 props 與現有遊戲狀態型別一致。
在遷移期間測試響應式行為和 reduced-motion 支援。

避免

重構戰鬥介面時，不要重寫遊戲邏輯。
不要在可重複使用的元件內硬編碼玩家或敵人數值。
在新的戰鬥版面配置完成驗證之前，不要移除舊的戰鬥版面配置。

常見問題

這個技能會建置什麼？

它會引導建立適用於 SHINOBI WAY 的分割面板 React 戰鬥 UI。

它假設使用哪些框架？

它假設目標專案使用 React、TypeScript 和 Tailwind CSS。

它可以一次產生所有元件嗎？

可以，但工作流程建議先從版面配置外殼開始，再抽取元件。

它包含動畫指引嗎？

可以。它涵蓋 keyframes、畫面震動、浮動文字、時間控制、hooks 和 reduced-motion 處理。

它僅限於 SHINOBI WAY 嗎？

參考內容是 SHINOBI WAY 專用，但此模式可以調整用於其他戰鬥遊戲。

它包含安全敏感行為嗎？

未發現網路存取、secret handling、破壞性指令或 prompt injection 的跡象。

開發者詳細資訊

作者

CesarAugustusGroB

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/CesarAugustusGroB/SHINOBI-WAY-the-inifinite-tower/tree/main/.claude/skills/combat-ui-pattern-a

引用

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

維護新鮮度

2026/7/22

使用量

8 次下載 · 450 次瀏覽

檔案結構

📁 references/

📄 animations.md

📄 component-interfaces.md

📄 layout-specs.md

📄 styling-tokens.md

使用 starknet.js 建置 Starknet 應用程式

由 internet-court

Starknet 整合需要精確處理提供者、帳戶、交易與費用。此技能為 Claude、Codex 與 Claude Code 提供實用的 starknet.js v9 模式。

程式開發查看

combat-ui-pattern-a

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

重構戰鬥畫面

標準化遊戲 UI 元件

原型製作戰術戰鬥流程

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

CesarAugustusGroB 的更多技能

frontend-design

jutsu-creator

skill-creator

art-style-creator

nano-banana-builder

exploration-creator

相關技能

react-dev

senior-frontend

react-nextjs-development

playwright-testing

nestjs-code-audit

starknet-js