技能 combat-ui-pattern-a
⚔️
combat-ui-pattern-a
安全 ⚙️
外部命令🌐
網路存取📁
檔案系統存取
Implement split-panel combat UI
Game developers building combat interfaces need consistent, well-architected UI components. This skill provides complete implementation guidance including TypeScript interfaces, CSS Grid layouts, animation specifications, and responsive styling tokens for the Pattern A combat UI system.
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「combat-ui-pattern-a」。 Create ActionDock component for the combat UI
預期結果:
- CombatLayout.tsx grid container with PhaseHeader, ConfrontationZone, and ActionDock children
- ActionDock with QuickActionsSection (4-6 side/toggle skills) and MainActionsSection (2-4 main skills)
- Control buttons for Auto Combat and End Turn functionality
- Responsive layout: stacked on mobile, horizontal split on tablet and larger screens
- Skills filtered by actionType: SIDE, TOGGLE, MAIN, PASSIVE categories
正在使用「combat-ui-pattern-a」。 Show me the animation timing guidelines for combat effects
預期結果:
- Feedback animations: 150-300ms duration for user action responses
- Combat animations: 300-600ms duration for attack and damage visuals
- Transition animations: 200-400ms duration for state changes
- Critical hit effects: combine dramatic shake with scale animations
- Floating text animations: 60% travel distance over 400-600ms
安全審計
安全v5 • 1/16/2026
Pure documentation skill containing only TypeScript interface definitions, CSS/Tailwind styling tokens, animation specifications, and implementation workflows for UI component development. All 263 static findings are FALSE POSITIVES caused by pattern-matching markdown code blocks and Tailwind color class names without contextual understanding.
6
已掃描檔案
2,629
分析行數
3
發現項
5
審計總數
風險因素
⚙️ 外部命令 (212)
references/animations.md:18-71 references/animations.md:71-75 references/animations.md:75-105 references/animations.md:105-109 references/animations.md:109-153 references/animations.md:153-157 references/animations.md:157-208 references/animations.md:208-212 references/animations.md:212-248 references/animations.md:248-252 references/animations.md:252-284 references/animations.md:284-292 references/animations.md:292-347 references/animations.md:347-355 references/animations.md:355-369 references/animations.md:369-371 references/animations.md:371-382 references/animations.md:382-403 references/animations.md:403-417 references/animations.md:417-425 references/animations.md:425-445 references/animations.md:445-449 references/animations.md:449-485 references/animations.md:485-489 references/animations.md:489-512 references/animations.md:512-535 references/animations.md:535-541 references/animations.md:541-565 references/component-interfaces.md:5-19 references/component-interfaces.md:19-27 references/component-interfaces.md:27-32 references/component-interfaces.md:32-36 references/component-interfaces.md:36-42 references/component-interfaces.md:42-50 references/component-interfaces.md:50-74 references/component-interfaces.md:74-78 references/component-interfaces.md:78-103 references/component-interfaces.md:103-111 references/component-interfaces.md:111-128 references/component-interfaces.md:128-132 references/component-interfaces.md:132-141 references/component-interfaces.md:141-149 references/component-interfaces.md:149-168 references/component-interfaces.md:168-172 references/component-interfaces.md:172-183 references/component-interfaces.md:183-187 references/component-interfaces.md:187-200 references/component-interfaces.md:200-204 references/component-interfaces.md:204-250 references/component-interfaces.md:250-258 references/component-interfaces.md:258-271 references/component-interfaces.md:271-275 references/component-interfaces.md:275-289 references/component-interfaces.md:289-297 references/component-interfaces.md:297-323 references/component-interfaces.md:323-327 references/component-interfaces.md:327-333 references/component-interfaces.md:333-337 references/component-interfaces.md:337-364 references/component-interfaces.md:364-372 references/component-interfaces.md:372-390 references/component-interfaces.md:390-394 references/component-interfaces.md:394-410 references/component-interfaces.md:410-418 references/component-interfaces.md:418-441 references/component-interfaces.md:441-445 references/component-interfaces.md:445-461 references/component-interfaces.md:461-465 references/component-interfaces.md:465-501 references/component-interfaces.md:501-509 references/component-interfaces.md:509-517 references/component-interfaces.md:517-523 references/component-interfaces.md:523-551 references/component-interfaces.md:551-557 references/component-interfaces.md:557-574 references/component-interfaces.md:574-580 references/component-interfaces.md:580-590 references/layout-specs.md:7-20 references/layout-specs.md:20-24 references/layout-specs.md:24-34 references/layout-specs.md:34-40 references/layout-specs.md:40-41 references/layout-specs.md:41-42 references/layout-specs.md:42-50 references/layout-specs.md:50-64 references/layout-specs.md:64-70 references/layout-specs.md:70-71 references/layout-specs.md:71-72 references/layout-specs.md:72-76 references/layout-specs.md:76-83 references/layout-specs.md:83-91 references/layout-specs.md:91-111 references/layout-specs.md:111-115 references/layout-specs.md:115-122 references/layout-specs.md:122-126 references/layout-specs.md:126-133 references/layout-specs.md:133-137 references/layout-specs.md:137-147 references/layout-specs.md:147-155 references/layout-specs.md:155-187 references/layout-specs.md:187-191 references/layout-specs.md:191-201 references/layout-specs.md:201-205 references/layout-specs.md:205-214 references/layout-specs.md:214-222 references/layout-specs.md:222-249 references/layout-specs.md:249-257 references/layout-specs.md:257-294 references/layout-specs.md:294-304 references/layout-specs.md:304-305 references/layout-specs.md:305-306 references/layout-specs.md:306-307 references/layout-specs.md:307-308 references/layout-specs.md:308-312 references/layout-specs.md:312-324 references/layout-specs.md:324-340 references/layout-specs.md:340-350 references/layout-specs.md:350-356 references/layout-specs.md:356-372 references/layout-specs.md:372-378 references/layout-specs.md:378-394 references/styling-tokens.md:7-34 references/styling-tokens.md:34-38 references/styling-tokens.md:38-97 references/styling-tokens.md:97-101 references/styling-tokens.md:101-146 references/styling-tokens.md:146-150 references/styling-tokens.md:150-179 references/styling-tokens.md:179-183 references/styling-tokens.md:183-201 references/styling-tokens.md:201-209 references/styling-tokens.md:209-215 references/styling-tokens.md:215-219 references/styling-tokens.md:219-230 references/styling-tokens.md:230-234 references/styling-tokens.md:234-242 references/styling-tokens.md:242-246 references/styling-tokens.md:246-266 references/styling-tokens.md:266-274 references/styling-tokens.md:274-290 references/styling-tokens.md:290-294 references/styling-tokens.md:294-303 references/styling-tokens.md:303-307 references/styling-tokens.md:307-313 references/styling-tokens.md:313-321 references/styling-tokens.md:321-331 references/styling-tokens.md:331-335 references/styling-tokens.md:335-341 references/styling-tokens.md:341-345 references/styling-tokens.md:345-364 references/styling-tokens.md:364-372 references/styling-tokens.md:372-375 references/styling-tokens.md:381-384 references/styling-tokens.md:388-391 references/styling-tokens.md:395-398 references/styling-tokens.md:403-405 references/styling-tokens.md:405-409 references/styling-tokens.md:409-412 references/styling-tokens.md:420-423 references/styling-tokens.md:433-436 references/styling-tokens.md:444-446 references/styling-tokens.md:446-450 references/styling-tokens.md:450-453 references/styling-tokens.md:461-464 references/styling-tokens.md:472-475 references/styling-tokens.md:482-485 references/styling-tokens.md:489-491 references/styling-tokens.md:491-495 references/styling-tokens.md:495-498 references/styling-tokens.md:506-509 references/styling-tokens.md:513-516 references/styling-tokens.md:520-523 references/styling-tokens.md:527-530 references/styling-tokens.md:535-537 references/styling-tokens.md:537-545 references/styling-tokens.md:545-555 references/styling-tokens.md:555-559 references/styling-tokens.md:559-565 references/styling-tokens.md:565-569 references/styling-tokens.md:569-577 references/styling-tokens.md:577-581 references/styling-tokens.md:581-588 references/styling-tokens.md:588-594 references/styling-tokens.md:594-607 SKILL.md:12-23 SKILL.md:23-27 SKILL.md:27-61 SKILL.md:61-65 SKILL.md:65-76 SKILL.md:76-106 SKILL.md:106-126 SKILL.md:126-132 SKILL.md:132-133 SKILL.md:133-141 SKILL.md:141-147 SKILL.md:147-151 SKILL.md:151-161 SKILL.md:161-167 SKILL.md:167-177 SKILL.md:177-181 SKILL.md:181-196 SKILL.md:196-201 SKILL.md:201-206 SKILL.md:206-207 SKILL.md:207-208 SKILL.md:208-211 SKILL.md:211-243 SKILL.md:243-244 SKILL.md:244-245 SKILL.md:245-246 SKILL.md:246-247 SKILL.md:247-248
🌐 網路存取 (1)
📁 檔案系統存取 (1)
審計者: claude 查看審計歷史 →
品質評分
45
架構
100
可維護性
87
內容
21
社群
100
安全
91
規範符合性
你能建構什麼
Build combat interface
Create horizontal split-panel combat UI with player and enemy panels for confrontation gameplay
Design action dock
Implement skill bar with quick actions (SIDE/TOGGLE) and main action cards (MAIN) following design system
Add combat animations
Add floating text, screen shake, and character attack animations with timing guidelines
試試這些提示
Create CombatLayout
Create CombatLayout component for Pattern A split-panel combat UI following the CSS Grid structure in layout-specs.md
Build CharacterPanel
Implement CharacterPanel component with player and enemy variants using the interfaces from component-interfaces.md
Add animations
Add floating text and screen shake animations following the keyframe definitions in animations.md
Style with tokens
Apply styling tokens from styling-tokens.md to create consistent color palette and spacing for combat components
最佳實務
- Use TypeScript interfaces from component-interfaces.md for type safety across all components
- Apply styling tokens consistently from styling-tokens.md to maintain design system cohesion
- Implement responsive breakpoints with mobile-first approach (stacked layout below 768px)
- Follow the four-phase migration strategy: Layout Foundation, Component Extraction, Visual Polish, Cleanup
避免
- Hardcoding colors instead of using defined styling tokens from the design system
- Ignoring the mobile fallback layout (stacked) for tablet and larger split-panel designs
- Skipping animation timing guidelines (150ms micro-interactions, 400ms attack animations)
- Not following the component hierarchy from CombatLayout down to individual action cards
常見問題
What React version is required?
React 18+ with TypeScript support. Component patterns use React.FC type conventions.
What screen sizes are supported?
Mobile under 640px (stacked) to desktop 1280px+ (full split). Breakpoints at 640px, 768px, 1024px, and 1280px.
Can this work with other UI frameworks?
Styling tokens use Tailwind CSS conventions. Component patterns are React-specific but CSS Grid concepts are adaptable.
Is any data stored or transmitted?
No data storage or network transmission. Pure guidance skill providing documentation and code examples for user implementation.
How do I integrate with existing code?
Reference existing components at src/components/PlayerHUD.tsx and src/scenes/Combat.tsx for props mapping and state connections.
How is Pattern A different from other layouts?
Pattern A implements horizontal split-panel layout for player vs enemy confrontation. It replaces vertical theater mode with side-by-side panels and action dock.