Browse / Game Development / Quest Keeper Frontend

Quest Keeper Frontend

Streamlines the development of terminal-inspired React interfaces and 3D battlemaps for the Quest Keeper AI Tauri application.

The source repository doesn't declare a license. Check its terms before reusing the code.

Key features

  • Standardized Zustand store patterns for application state management
  • Integration patterns for Tauri 2.x shell and WebView communication
  • Efficient parsing of MCP (Model Context Protocol) tool responses into TypeScript interfaces
  • Implementation guidance for Three.js battlemaps using @react-three/fiber
  • Specialized TailwindCSS classes for terminal and CRT visual effects

Use cases

  • Styling application views with a consistent retro-terminal or CRT-glow aesthetic
  • Connecting React frontend components to backend services and MCP tools
  • Developing interactive 3D UI components like battlemaps and world maps

FAQ

Does it support 3D map implementation?

Yes, it provides implementation guidance for Three.js battlemaps using @react-three/fiber, ensuring that 3D viewports are integrated correctly with the application's overall state and layout.

How does this skill improve my development workflow?

It automates the boilerplate for complex tasks, such as parsing Model Context Protocol (MCP) tool responses into TypeScript interfaces and applying consistent terminal/CRT visual styles via TailwindCSS.

When should I use this Claude Code skill?

Use this skill whenever you are working on the frontend directory of Quest Keeper. It is specifically triggered by tasks involving UI development, viewport rendering, or connecting the WebView to the Tauri Rust core.

What does the Quest Keeper Frontend skill do?

This skill provides Claude with specialized knowledge to develop the Quest Keeper AI application. It includes patterns for React 19 components, Three.js battlemaps, Zustand state management, and Tauri 2.x shell integration.

What specific styling does this skill handle?

The skill is optimized for a 'terminal-inspired' aesthetic, offering specialized TailwindCSS classes for CRT glow effects, monospaced typography, and dim/green color schemes typical of retro interfaces.