Build Split-Panel Combat UI
Combat screens are hard to split into clear player, enemy, and action zones. This skill gives Claude, Codex, and Claude Code a reusable React implementation guide.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
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.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "combat-ui-pattern-a". Build the Pattern A layout foundation for the combat scene.
Expected outcome:
A generated CombatLayout plan with three regions, responsive mobile behavior, and clear mount points for header, confrontation zone, and action dock.
Using "combat-ui-pattern-a". Create reusable character panels for player and enemy data.
Expected outcome:
A component design that supports mirrored alignment, identity display, resource bars, status effects, sprite presentation, and floating text anchors.
Using "combat-ui-pattern-a". Polish combat feedback and action controls.
Expected outcome:
A UI implementation outline for quick actions, main actions, VS effects, screen shake, floating combat text, and reduced-motion alternatives.
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.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cesaraugustusgrob-combat-ui-pattern-a?utm_source=security_passport_badge)<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>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@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}
}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"
Turn a crowded vertical combat scene into a split player-versus-enemy layout with reusable React components.
Create shared panels, action cards, headers, and dividers that follow one combat interface pattern.
Generate a clear combat layout that separates phase status, character state, and available actions.
Use combat-ui-pattern-a to build only the CombatLayout shell. Include responsive rows, imports, and props that match the existing project.
Use combat-ui-pattern-a to implement PhaseHeader. Show turn number, current phase, side action count, and approach modifiers.
Use combat-ui-pattern-a to extract CharacterPanel from the existing player and enemy UI. Preserve health, chakra, buffs, identity, and alignment.
Use combat-ui-pattern-a to migrate Combat.tsx to Pattern A. Implement layout, panels, action dock, VS divider, animations, and reduced-motion support.
Author
CesarAugustusGroBLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Maintenance freshness
7/18/2026
Usage
7 downloads · 450 views
File structure
Build Distinctive Frontend Interfaces
Generic frontend output often looks repetitive and weakly branded. This skill guides Claude, Codex, and Claude Code toward polished, working interfaces with clear visual direction.
Create SHINOBI WAY Jutsu Skills
Designing balanced SHINOBI WAY combat skills requires matching many enums, costs, effects, and tier rules. This skill guides requirements gathering and produces TypeScript-ready jutsu definitions.
Create Effective AI Skills
Building reliable AI skills is hard when instructions, resources, and packaging rules are unclear. This skill gives a structured process for concise SKILL.md files, reusable resources, validation, and iteration.
Define Consistent Art Style Guides
Visual projects lose consistency when colors, shapes, lighting, and texture are undocumented. This skill turns art direction decisions into a structured style guide.
Build Gemini Image Apps
Image generation apps need correct model names, server-side API use, storage, and quota handling. This skill guides Claude, Codex, and Claude Code through production-ready Nano Banana app patterns.
Create Game Exploration Regions
Game teams need consistent exploration content that fits SHINOBI WAY rules. This skill guides region, location, room, intel mission, and path design for Claude, Codex, or Claude Code.
Build Type-Safe React Components
by softaworks
React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Build Modern React and Next.js Apps
by sickn33
React and Next.js projects often need consistent setup choices across routing, components, styling, data, forms, tests, and deployment. This skill gives Claude, Codex, and Claude Code a phase-based workflow for planning and building modern frontend applications.
Build Reliable Playwright Tests
by C0ntr0lledCha0s
Playwright test suites can become flaky, slow, and difficult to maintain. This skill provides practical patterns for locators, fixtures, page objects, debugging, mocking, and configuration.
Build Starknet Apps with starknet.js
by internet-court
Starknet integrations require precise provider, account, transaction, and fee handling across several APIs. This skill provides focused starknet.js v9.x patterns for reliable TypeScript applications.
Improve Vue 3 Code Quality
by vuejs-ai
Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.