smithery.ai

quest-keeper-frontend

Frontend development skill for Quest Keeper AI Tauri application.

First seen Mar 25, 2026

Installation

$ npx skills add https://smithery.ai

Summary

  • Frontend development skill for Quest Keeper AI Tauri application.
  • Use when working on React components, Zustand stores, Three.js battlemaps, TailwindCSS styling, or Tauri shell integration.
  • Triggers on mentions of frontend, React, Zustand, Three.js, battlemap, UI, viewport, or Tauri.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,617 B
  • docs SUMMARY.md 313 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

Quest Keeper Frontend Development

Location

C:\Users\mnehm\Desktop\Quest Keeper AI attempt 2

Tech Stack

  • Framework: Tauri 2.x (Rust shell + WebView)
  • UI: React 19 + TypeScript + Vite
  • State: Zustand stores
  • 3D: Three.js via @react-three/fiber
  • Styling: TailwindCSS (terminal/CRT aesthetic)

Directory Structure

src/
├── components/
│   ├── viewport/     # BattlemapCanvas, CharacterSheet, WorldMap
│   ├── adventure/    # Main layout (AdventureView.tsx)
│   ├── terminal/     # Chat interface
│   └── sidebar/      # Navigation
├── stores/           # Zustand state management
├── services/         # MCP client, LLM providers
├── hooks/            # Custom React hooks
└── utils/            # Helpers

Key Commands

npm run tauri dev     # Development with hot reload
npm run build         # Production build

MCP Response Parsing

import { parseMcpResponse } from '@/utils/mcpUtils';
const result = await mcpClient.callTool('get_character', { id });
const character = parseMcpResponse<Character>(result, null);

Terminal/CRT Aesthetic

Key classes: terminal-green, terminal-dim, terminal-dark, crt-glow, font-mono