Chuck Playground Builder

Chuck Playground Builder

Chuck is a Claude Code plugin that injects the right rules and decisions into context automatically. This skill creates two HTML playgrounds for visual setup and decision logging.

When to use this skill

• User wants to set up Chuck for a new project visually
• User wants to configure their manifest.json without hand-editing JSON
• User wants to log a Decision Ledger entry through a form
• User asks for a "Chuck setup wizard" or "Chuck decision logger"

Playgrounds

1. Chuck Setup Wizard

Build using templates/setup-wizard.md.

Controls:

• Stack checkboxes: React, TypeScript, React Native, Expo, Supabase, Git, Node.js, Python, Vue, Next.js, Claude API, Testing
• Token budget slider: 500–4000 (default 2000)
• Devmode toggle (default off)
• GLOBAL rules textarea

Preview: live syntax-highlighted manifest.json. Output: complete manifest.json — paste into .chuck/manifest.json.

2. Chuck Decision Logger

Build using templates/decision-logger.md.

Controls:

• Decision text, rejected alternatives (tag chips), reason, constraints (tag chips), tags (tag chips), project name

Preview: live decision JSON + formatted injection one-liner. Output: pre-filled chuck decide command.

Core requirements

• Single HTML file. Inline all CSS and JS. No external dependencies.
• Live preview — updates instantly on every control change.
• Copy button with "Copied!" feedback.
• Dark theme: background #080810, accent #7C3AED.
• After writing the HTML file, run open <filename>.html to launch in browser.