How does it use real project data?

The skill integrates with Kuroryuu's repository intelligence tools to pull live route data, symbol maps, and configuration files directly into the generated playground.

What kind of templates are available?

It includes specialized templates for architecture exploration, theme tuning, agent team planning, and hook building.

How does the prompt output pattern work?

The playground tracks changes to a state object and generates natural language instructions that you can copy back to Claude to apply your configuration changes to the project.

Do I need external dependencies to run the generated playgrounds?

No, the playgrounds are generated as standalone HTML files with inline CSS and JavaScript, allowing them to run locally in any browser without external assets.

What is the Kuroryuu Playground skill?

It is an extension for Claude Code that builds interactive, data-driven HTML interfaces to help developers manage and configure the Kuroryuu AI agent platform.

Kuroryuu Playground Builder

Name: Kuroryuu Playground Builder
Author: ahostbr

byahostbr

•

Design Tools

Builds interactive HTML playgrounds pre-populated with live Kuroryuu project data for architecture exploration, theme tuning, and agent configuration.

The Kuroryuu Playground skill enables developers to visualize and manipulate the Kuroryuu AI agent orchestration platform through dynamic, browser-based environments. By extracting real-time repository intelligence like routes and symbol maps, it generates custom tools for exploring complex architectures, designing agent teams, and refining UI themes. It serves as a bridge between static code and interactive configuration, allowing for rapid prototyping of hooks and CSS variables within a functional preview interface that generates actionable prompts for Claude.

Key Features

01Generates interactive HTML/JS playgrounds with live project architecture data

029 GitHub stars

03Provides a theme tuning interface for real-time CSS variable adjustment

04Automates the design of agent team configurations and Claude Code hooks

05Includes a built-in state management pattern and prompt generation for seamless project updates

06Supports architecture exploration with visibility into 25+ routers and 170+ components

Use Cases

01Visualizing and navigating complex Kuroryuu codebase layers and component relationships

02Prototyping and testing agent team hierarchies and interaction flows

03Customizing and previewing theme styling for the Kuroryuu desktop application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ahostbr/kuroryuu-public kuroryuu-playground

For use in Claude.ai and ChatGPT

Download Skill