game-ui-components

Name: game-ui-components
Availability: InStock
Author: endlessblink

Create Vue 3 game UI components with token-driven styling from design tokens.

Updated Nov 29, 2025

Search Tags:#gamification #vue3 #design-tokens #ui-patterns #game-ui #hud

Ready to run

npx skills add https://github.com/endlessblink/flow-state --skill game-ui-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: game-ui-components
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/game-ui-components
Command: npx skills add https://github.com/endlessblink/flow-state --skill game-ui-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers need a cohesive, token-driven library of game UI components to speed up building game HUDs.

Core Features & Use Cases

Ready-to-use HP bars, XP bars, radar charts, level badges, streak counters, and mission cards for game interfaces.
Design-token driven styling that enforces a consistent neon aesthetic across all components.
Easy integration into Vue 3 apps for FlowState's Cyberflow RPG across multiple views and modes.

Quick Start

Import and use the components from this library in your Vue 3 app to start building a game HUD.

Frequently Asked Questions about game-ui-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a gamified Vue 3 HUD with HP and XP bars?▼

Yes, you can use these game UI components with your existing Vue 3 application by importing the ready-to-use primitives. They enforce design-token conformity from a specific CSS file to maintain a consistent neon aesthetic across all views.

Can I use these game UI components with an existing Vue 3 application?▼

Yes, you can use these game UI components with an existing Vue 3 application by importing the Vue 3 primitives. They enforce design-token conformity from a specific CSS file to maintain a consistent neon aesthetic across all views.

What is the best way to maintain a consistent neon aesthetic across game UI components?▼

You can build various gamified HUD elements including radar charts, level badges, streak counters, and mission cards. These components are designed to work across multiple views and modes in your game interface.

Do I need a specific CSS file to apply design tokens for game UI components?▼

Yes, applying design tokens requires the src/assets/design-tokens.css file. The components are built to enforce conformity with this file, ensuring token-driven styling and accessible markup across your game interfaces.

Does this Skill provide ready-to-use mission cards and radar charts for game interfaces?▼

Yes, this Skill provides ready-to-use mission cards and radar charts for game interfaces. It supplies a full collection of Vue 3 primitives like streak counters and level badges to speed up building cohesive game HUDs.