workflowstacks
ai-agent

Playroom

Design with JSX, powered by your own component library.
4,584 stars188 forksTypeScriptUpdated 8/14/2026100% free · open source
What it does

Playroom allows you to design and test UI components using JSX, leveraging your own custom component library for a seamless design-to-code workflow.

When to use it
  • •When you need to rapidly prototype and test UI components in isolation
  • •When your design team wants to work closely with your development team using a shared component library
  • •When you want to validate your component library's consistency and usability across different design scenarios
Ready-to-paste prompt
npx playroom@latest --example my-component.tsx --port 3000
Heads up: Ensure you have the latest version of Node.js (14 or higher) installed on your system, as Playroom relies on modern JavaScript features
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/playroom && curl -fsSL https://workflowstacks.com/api/skills/playroom/claude-skill -o ~/.claude/skills/playroom/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Playroom works
Codeflow
Free to inspect

Playroom is a medium TypeScript project (~10k lines across 154 code files, plus 14 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit a month ago, MIT license, has a test suite.

Size
Medium codebase
~10k lines · 154 code files · ~1 h to skim
Setup
One-command install
Installs like a normal app. Reading the code is optional.
Runs on
Node.js
No API keys detected
TypeScript 94%JavaScript 5%HTML 1%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    bin/cli.cjs
    Where the program starts running
  3. 3
    package.json
    Dependencies and the commands it exposes
  4. 4
    src/entries/index.tsx
    Inside src/ — the main logic begins here
What's in each folder
src/Core code — the actual logic118 files
lib/Core code — the actual logic13 files
bin/Command-line entry points1 files
cypress/Folder38 files
scripts/Helper scripts1 files
utils/Helper scripts1 files
.changeset/Tool / agent settings9 files
.github/CI / automation (GitHub Actions)4 files
READMEHas testsDocumentedCI checksMIT licenseUpdated this month
Quick Actions
Details
Creator
seek-oss
Language
TypeScript
Category
ai-agent
Published
10/29/2018

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.

Related skills

More ai-agent tools founders pair with this one.

ai-agent★ 276,806
Track GitHub Stars with 996.ICU
Get a popular GitHub star counter for your startup, ideal.
ai-agent★ 264,191
Superpowers
An agentic skills framework & software development methodology that works.
ai-agent★ 244,424
Linux: Open Source Kernel
Get the Linux kernel source tree for custom development, ideal for startup founders in need of a flexible OS foundation
ai-agent★ 210,750
Vue
This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
ai-agent★ 204,069
Improve Code with andrej-karpathy-skills
Get better code behavior with andrej-karpathy-skills, 165k+ GitHub stars, for founders using LLMs.
ai-agent★ 197,010
FreeDomain: Free Website Domain
Get a free domain with FreeDomain.