更新

2026-07-28 09:50:12 +08:00
parent 45b3bc0852
commit 0ff8943ee2
453 changed files with 79730 additions and 0 deletions
@@ -0,0 +1,8 @@
+{
+  "name": "playground",
+  "description": "Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button",
+  "author": {
+    "name": "Anthropic",
+    "email": "support@anthropic.com"
+  }
+}
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
@@ -0,0 +1,28 @@
+# Playground Plugin
+
+Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt.
+
+## What is a Playground?
+
+A playground is a self-contained HTML file with:
+- Interactive controls on one side
+- A live preview on the other
+- A prompt output at the bottom with a copy button
+
+The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
+
+## When to Use
+
+Use this plugin when the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
+
+## Templates
+
+The skill includes templates for common playground types:
+- **design-playground** — Visual design decisions (components, layouts, spacing, color, typography)
+- **data-explorer** — Data and query building (SQL, APIs, pipelines, regex)
+- **concept-map** — Learning and exploration (concept maps, knowledge gaps, scope mapping)
+- **document-critique** — Document review (suggestions with approve/reject/comment workflow)
+
+## Installation
+
+Add this plugin to your Claude Code configuration to enable the playground skill.
@@ -0,0 +1,76 @@
+---
+name: playground
+description: Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.
+---
+
+# Playground Builder
+
+A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.
+
+## When to use this skill
+
+When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.
+
+## How to use this skill
+
+1. **Identify the playground type** from the user's request
+2. **Load the matching template** from `templates/`:
+   - `templates/design-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)
+   - `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)
+   - `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)
+   - `templates/document-critique.md` — Document review (suggestions with approve/reject/comment workflow)
+   - `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)
+   - `templates/code-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)
+3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
+4. **Open in browser.** After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.
+
+## Core requirements (every playground)
+
+- **Single HTML file.** Inline all CSS and JS. No external dependencies.
+- **Live preview.** Updates instantly on every control change. No "Apply" button.
+- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
+- **Copy button.** Clipboard copy with brief "Copied!" feedback.
+- **Sensible defaults + presets.** Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
+- **Dark theme.** System font for UI, monospace for code/values. Minimal chrome.
+
+## State management pattern
+
+Keep a single state object. Every control writes to it, every render reads from it.
+
+```javascript
+const state = { /* all configurable values */ };
+
+function updateAll() {
+  renderPreview(); // update the visual
+  updatePrompt();  // rebuild the prompt text
+}
+// Every control calls updateAll() on change
+```
+
+## Prompt output pattern
+
+```javascript
+function updatePrompt() {
+  const parts = [];
+
+  // Only mention non-default values
+  if (state.borderRadius !== DEFAULTS.borderRadius) {
+    parts.push(`border-radius of ${state.borderRadius}px`);
+  }
+
+  // Use qualitative language alongside numbers
+  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
+  else if (state.shadowBlur > 0) parts.push('a subtle shadow');
+
+  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
+}
+```
+
+## Common mistakes to avoid
+
+- Prompt output is just a value dump → write it as a natural instruction
+- Too many controls at once → group by concern, hide advanced in a collapsible section
+- Preview doesn't update instantly → every control change must trigger immediate re-render
+- No defaults or presets → starts empty or broken on load
+- External dependencies → if CDN is down, playground is dead
+- Prompt lacks context → include enough that it's actionable without the playground
@@ -0,0 +1,158 @@
+# Code Map Template
+
+Use this template when the playground is about visualizing codebase architecture: component relationships, data flow, layer diagrams, system architecture with interactive commenting for feedback.
+
+## Layout
+
+```
+-------------------+----------------------------------+
+|                   |                                  |
+|  Controls:        |  SVG Canvas                      |
+|  • View presets   |  (nodes + connections)           |
+|  • Layer toggles  |  with zoom controls              |
+|  • Connection     |                                  |
+|    type filters   |  Legend (bottom-left)            |
+|                   |                                  |
+|  Comments (n):    +----------------------------------+
+|  • List of user   |  Prompt output                   |
+|    comments with  |  [ Copy Prompt ]                 |
+|    delete buttons |                                  |
+-------------------+----------------------------------+
+```
+
+Code map playgrounds use an SVG canvas for the architecture diagram. Users click components to add comments, which become part of the generated prompt. Layer and connection filters let users focus on specific parts of the system.
+
+## Control types for code maps
+
+| Decision | Control | Example |
+|---|---|---|
+| System view | Preset buttons | Full System, Chat Flow, Data Flow, Agent System |
+| Visible layers | Checkboxes | Client, Server, SDK, Data, External |
+| Connection types | Checkboxes with color indicators | Data Flow (blue), Tool Calls (green), Events (red) |
+| Component feedback | Click-to-comment modal | Opens modal with textarea for feedback |
+| Zoom level | +/−/reset buttons | Scale SVG for detail |
+
+## Canvas rendering
+
+Use an `<svg>` element with dynamically generated nodes and paths. Key patterns:
+
+- **Nodes:** Rounded rectangles with title and subtitle (file path)
+- **Connections:** Curved paths (bezier) with arrow markers, styled by type
+- **Layer organization:** Group nodes by Y-position bands (e.g., y: 30-80 = Client, y: 130-180 = Server)
+- **Click-to-comment:** Click node → open modal → save comment → node gets visual indicator
+- **Filtering:** Toggle visibility of nodes by layer, connections by type
+
+```javascript
+const nodes = [
+  { id: 'api-client', label: 'API Client', subtitle: 'src/api/client.ts',
+    x: 100, y: 50, w: 140, h: 45, layer: 'client', color: '#dbeafe' },
+  // ...
+];
+
+const connections = [
+  { from: 'api-client', to: 'server', type: 'data-flow', label: 'HTTP' },
+  { from: 'server', to: 'db', type: 'data-flow' },
+  // ...
+];
+
+function renderDiagram() {
+  const visibleNodes = nodes.filter(n => state.layers[n.layer]);
+  // Draw connections first (under nodes), then nodes
+  connections.forEach(c => drawConnection(c));
+  visibleNodes.forEach(n => drawNode(n));
+}
+```
+
+## Connection types and styling
+
+Define 3-5 connection types with distinct visual styles:
+
+| Type | Color | Style | Use for |
+|---|---|---|---|
+| `data-flow` | Blue (#3b82f6) | Solid line | Request/response, data passing |
+| `tool-call` | Green (#10b981) | Dashed (6,3) | Function calls, API invocations |
+| `event` | Red (#ef4444) | Short dash (4,4) | Async events, pub/sub |
+| `skill-invoke` | Orange (#f97316) | Long dash (8,4) | Plugin/skill activation |
+| `dependency` | Gray (#6b7280) | Dotted | Import/require relationships |
+
+Use SVG markers for arrowheads:
+
+```html
+<marker id="arrowhead-blue" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+  <polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/>
+</marker>
+```
+
+## Comment system
+
+The key differentiator for code maps is click-to-comment functionality:
+
+1. **Click node** → Open modal with component name, file path, textarea
+2. **Save comment** → Add to comments list, mark node with visual indicator (colored border)
+3. **View comments** → Sidebar list with component name, comment preview, delete button
+4. **Delete comment** → Remove from list, update node visual, regenerate prompt
+
+Comments should include the component context:
+
+```javascript
+state.comments.push({
+  id: Date.now(),
+  target: node.id,
+  targetLabel: node.label,
+  targetFile: node.subtitle,
+  text: userInput
+});
+```
+
+## Prompt output for code maps
+
+The prompt combines system context with user comments:
+
+```
+This is the [PROJECT NAME] architecture, focusing on the [visible layers].
+
+Feedback on specific components:
+
+**API Client** (src/api/client.ts):
+I want to add retry logic with exponential backoff here.
+
+**Database Manager** (src/db/manager.ts):
+Can we add connection pooling? Current implementation creates new connections per request.
+
+**Auth Middleware** (src/middleware/auth.ts):
+This should validate JWT tokens and extract user context.
+```
+
+Only include comments the user added. Mention which layers are visible if not showing the full system.
+
+## Pre-populating with real data
+
+For a specific codebase, pre-populate with:
+
+- **Nodes:** 15-25 key components with real file paths
+- **Connections:** 20-40 relationships based on actual imports/calls
+- **Layers:** Logical groupings (UI, API, Business Logic, Data, External)
+- **Presets:** "Full System", "Frontend Only", "Backend Only", "Data Flow"
+
+Organize nodes in horizontal bands by layer, with consistent spacing.
+
+## Layer color palette (light theme)
+
+| Layer | Node fill | Description |
+|---|---|---|
+| Client/UI | #dbeafe (blue-100) | React components, hooks, pages |
+| Server/API | #fef3c7 (amber-100) | Express routes, middleware, handlers |
+| SDK/Core | #f3e8ff (purple-100) | Core libraries, SDK wrappers |
+| Agent/Logic | #dcfce7 (green-100) | Business logic, agents, processors |
+| Data | #fce7f3 (pink-100) | Database, cache, storage |
+| External | #fbcfe8 (pink-200) | Third-party services, APIs |
+
+## Example topics
+
+- Codebase architecture explorer (modules, imports, data flow)
+- Microservices map (services, queues, databases, API gateways)
+- React component tree (components, hooks, context, state)
+- API architecture (routes, middleware, controllers, models)
+- Agent system (prompts, tools, skills, subagents)
+- Data pipeline (sources, transforms, sinks, scheduling)
+- Plugin/extension architecture (core, plugins, hooks, events)
@@ -0,0 +1,73 @@
+# Concept Map Template
+
+Use this template when the playground is about learning, exploration, or mapping relationships: concept maps, knowledge gap identification, scope mapping, task decomposition with dependencies.
+
+## Layout
+
+```
+--------------------------------------+
+|  Canvas (draggable nodes, edges)     |
+|  with tooltip on hover               |
+-------------------------+------------+
+|                         |            |
+|  Sidebar:               | Prompt     |
+|  • Knowledge levels     | output     |
+|  • Connection types     |            |
+|  • Node list            | [Copy]     |
+|  • Actions              |            |
+-------------------------+------------+
+```
+
+Canvas-based playgrounds differ from the two-panel split. The interactive visual IS the control — users drag nodes and draw connections rather than adjusting sliders. The sidebar supplements with toggles and list controls.
+
+## Control types for concept maps
+
+| Decision | Control | Example |
+|---|---|---|
+| Knowledge level per node | Click-to-cycle button in sidebar list | Know → Fuzzy → Unknown |
+| Connection type | Selector before drawing | calls, depends on, contains, reads from |
+| Node arrangement | Drag on canvas | spatial layout reflects mental model |
+| Which nodes to include | Toggle or checkbox per node | hide/show concepts |
+| Actions | Buttons | Auto-layout (force-directed), clear edges, reset |
+
+## Canvas rendering
+
+Use a `<canvas>` element with manual draw calls. Key patterns:
+
+- **Hit testing:** Check mouse position against node bounding circles on mousedown/mousemove
+- **Drag:** On mousedown on a node, track offset and update position on mousemove
+- **Edge drawing:** Click node A, then click node B. Draw arrow between them with the selected relationship type
+- **Tooltips:** On hover, position a div absolutely over the canvas with description text
+- **Force-directed auto-layout:** Simple spring simulation — repulsion between all pairs, attraction along edges, iterate 100-200 times with damping
+
+```javascript
+function draw() {
+  ctx.clearRect(0, 0, W, H);
+  edges.forEach(e => drawEdge(e));  // edges first, under nodes
+  nodes.forEach(n => drawNode(n));  // nodes on top
+}
+```
+
+## Prompt output for concept maps
+
+The prompt should be a targeted learning request shaped by the user's knowledge markings:
+
+> "I'm learning [CODEBASE/DOMAIN]. I already understand: [know nodes]. I'm fuzzy on: [fuzzy nodes]. I have no idea about: [unknown nodes]. Here are the relationships I want to understand: [edge list in natural language]. Please explain the fuzzy and unknown concepts, focusing on these relationships. Build on what I already know. Use concrete code references."
+
+Only include edges the user drew. Only mention concepts they marked as fuzzy or unknown in the explanation request.
+
+## Pre-populating with real data
+
+For codebases or domains, pre-populate with:
+- **Nodes:** 15-20 key concepts with real file paths and short descriptions
+- **Edges:** 20-30 pre-drawn relationships based on actual architecture
+- **Knowledge:** Default all to "Fuzzy" so the user adjusts from there
+- **Presets:** "Zoom out" (hide internal nodes, show only top-level), "Focus on [layer]" (highlight nodes in one area)
+
+## Example topics
+
+- Codebase architecture map (modules, data flow, state management)
+- Framework learning (how React hooks connect, Next.js data fetching layers)
+- System design (services, databases, queues, caches and how they relate)
+- Task decomposition (goals → sub-tasks with dependency arrows, knowledge tags)
+- API surface map (endpoints grouped by resource, shared middleware, auth layers)
@@ -0,0 +1,67 @@
+# Data Explorer Template
+
+Use this template when the playground is about data queries, APIs, pipelines, or structured configuration: SQL builders, API designers, regex builders, pipeline visuals, cron schedules.
+
+## Layout
+
+```
+-------------------+----------------------+
+|                   |                      |
+|  Controls         |  Formatted output    |
+|  grouped by:      |  (syntax-highlighted |
+|  • Source/tables  |   code, or a         |
+|  • Columns/fields |   visual diagram)    |
+|  • Filters        |                      |
+|  • Grouping       |                      |
+|  • Ordering       |                      |
+|  • Limits         |                      |
+|                   +----------------------+
+|                   |  Prompt output       |
+|                   |  [ Copy Prompt ]     |
+-------------------+----------------------+
+```
+
+## Control types by decision
+
+| Decision | Control | Example |
+|---|---|---|
+| Select from available items | Clickable cards/chips | table names, columns, HTTP methods |
+| Add filter/condition rows | Add button → row of dropdowns + input | WHERE column op value |
+| Join type or aggregation | Dropdown per row | INNER/LEFT/RIGHT, COUNT/SUM/AVG |
+| Limit/offset | Slider | result count 1–500 |
+| Ordering | Dropdown + ASC/DESC toggle | order by column |
+| On/off features | Toggle | show descriptions, include header |
+
+## Preview rendering
+
+Render syntax-highlighted output using `<span>` tags with color classes:
+
+```javascript
+function renderPreview() {
+  const el = document.getElementById('preview');
+  // Color-code by token type
+  el.innerHTML = sql
+    .replace(/\b(SELECT|FROM|WHERE|JOIN|ON|GROUP BY|ORDER BY|LIMIT)\b/g, '<span class="kw">$1</span>')
+    .replace(/\b(users|orders|products)\b/g, '<span class="tbl">$1</span>')
+    .replace(/'[^']*'/g, '<span class="str">$&</span>');
+}
+```
+
+For pipeline-style playgrounds, render a horizontal or vertical flow diagram using positioned divs with arrow connectors.
+
+## Prompt output for data
+
+Frame it as a specification of what to build, not the raw query itself:
+
+> "Write a SQL query that joins orders to users on user_id, filters for orders after 2024-01-01 with total > $50, groups by user, and returns the top 10 users by order count."
+
+Include the schema context (table names, column types) so the prompt is self-contained.
+
+## Example topics
+
+- SQL query builder (tables, joins, filters, group by, order by, limit)
+- API endpoint designer (routes, methods, request/response field builder)
+- Data transformation pipeline (source → filter → map → aggregate → output)
+- Regex builder (sample strings, match groups, live highlight)
+- Cron schedule builder (visual timeline, interval, day toggles)
+- GraphQL query builder (type selection, field picker, nested resolvers)
@@ -0,0 +1,67 @@
+# Design Playground Template
+
+Use this template when the playground is about visual design decisions: components, layouts, spacing, color, typography, animation, responsive behavior.
+
+## Layout
+
+```
+-------------------+----------------------+
+|                   |                      |
+|  Controls         |  Live component/     |
+|  grouped by:      |  layout preview      |
+|  • Spacing        |  (renders in a       |
+|  • Color          |   mock page or       |
+|  • Typography     |   isolated card)     |
+|  • Shadow/Border  |                      |
+|  • Interaction    |                      |
+|                   +----------------------+
+|                   |  Prompt output       |
+|                   |  [ Copy Prompt ]     |
+-------------------+----------------------+
+```
+
+## Control types by decision
+
+| Decision | Control | Example |
+|---|---|---|
+| Sizes, spacing, radius | Slider | border-radius 0–24px |
+| On/off features | Toggle | show border, hover effect |
+| Choosing from a set | Dropdown | font-family, easing curve |
+| Colors | Hue + saturation + lightness sliders | shadow color, accent |
+| Layout structure | Clickable cards | sidebar-left / top-nav / no-nav |
+| Responsive behavior | Viewport-width slider | watch grid reflow at breakpoints |
+
+## Preview rendering
+
+Apply state values directly to a preview element's inline styles:
+
+```javascript
+function renderPreview() {
+  const el = document.getElementById('preview');
+  el.style.borderRadius = state.radius + 'px';
+  el.style.padding = state.padding + 'px';
+  el.style.boxShadow = state.shadow
+    ? `0 ${state.shadowY}px ${state.shadowBlur}px rgba(0,0,0,${state.shadowOpacity})`
+    : 'none';
+}
+```
+
+Show the preview on both light and dark backgrounds if relevant. Include a context toggle.
+
+## Prompt output for design
+
+Frame it as a direction to a developer, not a spec sheet:
+
+> "Update the card to feel soft and elevated: 12px border-radius, 24px horizontal padding, a medium box-shadow (0 4px 12px rgba(0,0,0,0.1)). On hover, lift it with translateY(-1px) and deepen the shadow slightly."
+
+If the user is working in Tailwind, suggest Tailwind classes. If raw CSS, use CSS properties.
+
+## Example topics
+
+- Button style explorer (radius, padding, weight, hover/active states)
+- Card component (shadow depth, radius, content layout, image)
+- Layout builder (sidebar width, content max-width, header height, grid)
+- Typography scale (base size, ratio, line heights across h1-body-caption)
+- Color palette generator (primary hue, derive secondary/accent/surface)
+- Dashboard density (airy → compact slider that scales everything proportionally)
+- Modal/dialog (width, overlay opacity, entry animation, corner radius)
@@ -0,0 +1,179 @@
+# Diff Review Template
+
+Use this template when the playground is about reviewing code diffs: git commits, pull requests, code changes with interactive line-by-line commenting for feedback.
+
+## Layout
+
+```
+-------------------+----------------------------------+
+|                   |                                  |
+|  Commit Header:   |  Diff Content                    |
+|  • Hash           |  (files with hunks)              |
+|  • Message        |  with line numbers               |
+|  • Author/Date    |  and +/- indicators              |
+|                   |                                  |
+-------------------+----------------------------------+
+|  Prompt Output Panel (fixed bottom-right)            |
+|  [ Copy All ]                                        |
+|  Shows all comments formatted for prompt             |
+------------------------------------------------------+
+```
+
+Diff review playgrounds display git diffs with syntax highlighting. Users click lines to add comments, which become part of the generated prompt for code review feedback.
+
+## Control types for diff review
+
+| Feature | Control | Behavior |
+|---|---|---|
+| Line commenting | Click any diff line | Opens textarea below the line |
+| Comment indicator | Badge on commented lines | Shows which lines have feedback |
+| Save/Cancel | Buttons in comment box | Persist or discard comment |
+| Copy prompt | Button in prompt panel | Copies all comments to clipboard |
+
+## Diff rendering
+
+Parse diff data into structured format for rendering:
+
+```javascript
+const diffData = [
+  {
+    file: "path/to/file.py",
+    hunks: [
+      {
+        header: "@@ -41,13 +41,13 @@ function context",
+        lines: [
+          { type: "context", oldNum: 41, newNum: 41, content: "unchanged line" },
+          { type: "deletion", oldNum: 42, newNum: null, content: "removed line" },
+          { type: "addition", oldNum: null, newNum: 42, content: "added line" },
+        ]
+      }
+    ]
+  }
+];
+```
+
+## Line type styling
+
+| Type | Background | Text Color | Prefix |
+|---|---|---|---|
+| `context` | transparent | default | ` ` (space) |
+| `addition` | green tint (#dafbe1 light / rgba(46,160,67,0.15) dark) | green (#1a7f37 light / #7ee787 dark) | `+` |
+| `deletion` | red tint (#ffebe9 light / rgba(248,81,73,0.15) dark) | red (#cf222e light / #f85149 dark) | `-` |
+| `hunk-header` | blue tint (#ddf4ff light) | blue (#0969da light) | `@@` |
+
+## Comment system
+
+Each diff line gets a unique identifier for comment tracking:
+
+```javascript
+const comments = {}; // { lineId: commentText }
+
+function selectLine(lineId, lineEl) {
+  // Deselect previous
+  document.querySelectorAll('.diff-line.selected').forEach(el =>
+    el.classList.remove('selected'));
+  document.querySelectorAll('.comment-box.active').forEach(el =>
+    el.classList.remove('active'));
+
+  // Select new
+  lineEl.classList.add('selected');
+  document.getElementById(`comment-box-${lineId}`).classList.add('active');
+}
+
+function saveComment(lineId) {
+  const textarea = document.getElementById(`textarea-${lineId}`);
+  const comment = textarea.value.trim();
+
+  if (comment) {
+    comments[lineId] = comment;
+  } else {
+    delete comments[lineId];
+  }
+
+  renderDiff(); // Re-render to show comment indicator
+  updatePromptOutput();
+}
+```
+
+## Prompt output format
+
+Generate a structured code review format:
+
+```javascript
+function updatePromptOutput() {
+  const commentKeys = Object.keys(comments);
+
+  if (commentKeys.length === 0) {
+    promptContent.innerHTML = '<span class="no-comments">Click on any line to add a comment...</span>';
+    return;
+  }
+
+  let output = 'Code Review Comments:\n\n';
+
+  commentKeys.forEach(lineId => {
+    const lineEl = document.querySelector(`[data-line-id="${lineId}"]`);
+    const file = lineEl.dataset.file;
+    const lineNum = lineEl.dataset.lineNum;
+    const content = lineEl.dataset.content;
+
+    output += `📍 ${file}:${lineNum}\n`;
+    output += `   Code: ${content.trim()}\n`;
+    output += `   Comment: ${comments[lineId]}\n\n`;
+  });
+
+  promptContent.textContent = output;
+}
+```
+
+## Data attributes for line elements
+
+Store metadata on each line element for prompt generation:
+
+```html
+<div class="diff-line addition"
+     data-line-id="0-1-5"
+     data-file="src/utils/handler.py"
+     data-line-num="45"
+     data-content="subagent_id = tracker.register()">
+```
+
+## Pre-populating with real data
+
+To create a diff viewer for a specific commit:
+
+1. Run `git show <commit> --format="%H%n%s%n%an%n%ad" -p`
+2. Parse the output into the `diffData` structure
+3. Include commit metadata in the header section
+
+## Theme support
+
+Support both light and dark modes:
+
+```css
+/* Light mode */
+body { background: #f6f8fa; color: #1f2328; }
+.file-card { background: #ffffff; border: 1px solid #d0d7de; }
+.diff-line.addition { background: #dafbe1; }
+.diff-line.deletion { background: #ffebe9; }
+
+/* Dark mode */
+body { background: #0d1117; color: #c9d1d9; }
+.file-card { background: #161b22; border: 1px solid #30363d; }
+.diff-line.addition { background: rgba(46, 160, 67, 0.15); }
+.diff-line.deletion { background: rgba(248, 81, 73, 0.15); }
+```
+
+## Interactive features
+
+- **Hover hint:** Show "Click to comment" tooltip on line hover
+- **Comment indicator:** Badge (💬) on lines with saved comments
+- **Toast notification:** "Copied to clipboard!" feedback on copy
+- **Edit existing:** Allow editing previously saved comments
+
+## Example topics
+
+- Git commit review (single commit diff with line comments)
+- Pull request review (multiple commits, file-level and line-level comments)
+- Code diff comparison (before/after refactoring)
+- Merge conflict resolution (showing both versions with annotations)
+- Code audit (security review with findings per line)
@@ -0,0 +1,171 @@
+# Document Critique Template
+
+Use this template when the playground helps review and critique documents: SKILL.md files, READMEs, specs, proposals, or any text that needs structured feedback with approve/reject/comment workflow.
+
+## Layout
+
+```
+---------------------------+--------------------+
+|                           |                    |
+|  Document content         |  Suggestions panel |
+|  with line numbers        |  (filterable list) |
+|  and suggestion           |  • Approve         |
+|  highlighting             |  • Reject          |
+|                           |  • Comment         |
+|                           |                    |
+---------------------------+--------------------+
+|  Prompt output (approved + commented items)    |
+|  [ Copy Prompt ]                               |
+------------------------------------------------+
+```
+
+## Key components
+
+### Document panel (left)
+- Display full document with line numbers
+- Highlight lines with suggestions using a colored left border
+- Color-code by status: pending (amber), approved (green), rejected (red with opacity)
+- Click a suggestion card to scroll to the relevant line
+
+### Suggestions panel (right)
+- Filter tabs: All / Pending / Approved / Rejected
+- Stats in header showing counts for each status
+- Each suggestion card shows:
+  - Line reference (e.g., "Line 3" or "Lines 17-24")
+  - The suggestion text
+  - Action buttons: Approve / Reject / Comment (or Reset if already decided)
+  - Optional textarea for user comments
+
+### Prompt output (bottom)
+- Generates a prompt only from approved suggestions and user comments
+- Groups by: Approved Improvements, Additional Feedback, Rejected (for context)
+- Copy button with "Copied!" feedback
+
+## State structure
+
+```javascript
+const suggestions = [
+  {
+    id: 1,
+    lineRef: "Line 3",
+    targetText: "description: Creates interactive...",
+    suggestion: "The description is too long. Consider shortening.",
+    category: "clarity",  // clarity, completeness, performance, accessibility, ux
+    status: "pending",    // pending, approved, rejected
+    userComment: ""
+  },
+  // ... more suggestions
+];
+
+let state = {
+  suggestions: [...],
+  activeFilter: "all",
+  activeSuggestionId: null
+};
+```
+
+## Suggestion matching to lines
+
+Match suggestions to document lines by parsing the lineRef:
+
+```javascript
+const suggestion = state.suggestions.find(s => {
+  const match = s.lineRef.match(/Line[s]?\s*(\d+)/);
+  if (match) {
+    const targetLine = parseInt(match[1]);
+    return Math.abs(targetLine - lineNum) <= 2; // fuzzy match nearby lines
+  }
+  return false;
+});
+```
+
+## Document rendering
+
+Handle markdown-style formatting inline:
+
+```javascript
+// Skip ``` lines, wrap content in code-block-wrapper
+if (line.startsWith('```')) {
+  inCodeBlock = !inCodeBlock;
+  // Open or close wrapper div
+}
+
+// Headers
+if (line.startsWith('# ')) renderedLine = `<h1>...</h1>`;
+if (line.startsWith('## ')) renderedLine = `<h2>...</h2>`;
+
+// Inline formatting (outside code blocks)
+renderedLine = renderedLine.replace(/`([^`]+)`/g, '<code>$1</code>');
+renderedLine = renderedLine.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+```
+
+## Prompt output generation
+
+Only include actionable items:
+
+```javascript
+function updatePrompt() {
+  const approved = state.suggestions.filter(s => s.status === 'approved');
+  const withComments = state.suggestions.filter(s => s.userComment?.trim());
+
+  if (approved.length === 0 && withComments.length === 0) {
+    // Show placeholder
+    return;
+  }
+
+  let prompt = 'Please update [DOCUMENT] with the following changes:\n\n';
+
+  if (approved.length > 0) {
+    prompt += '## Approved Improvements\n\n';
+    for (const s of approved) {
+      prompt += `**${s.lineRef}:** ${s.suggestion}`;
+      if (s.userComment?.trim()) {
+        prompt += `\n  → User note: ${s.userComment.trim()}`;
+      }
+      prompt += '\n\n';
+    }
+  }
+
+  // Additional feedback from non-approved items with comments
+  // Rejected items listed for context only
+}
+```
+
+## Styling highlights
+
+```css
+.doc-line.has-suggestion {
+  border-left: 3px solid #bf8700;  /* amber for pending */
+  background: rgba(191, 135, 0, 0.08);
+}
+
+.doc-line.approved {
+  border-left-color: #1a7f37;  /* green */
+  background: rgba(26, 127, 55, 0.08);
+}
+
+.doc-line.rejected {
+  border-left-color: #cf222e;  /* red */
+  background: rgba(207, 34, 46, 0.08);
+  opacity: 0.6;
+}
+```
+
+## Pre-populating suggestions
+
+When building a critique playground for a specific document:
+
+1. Read the document content
+2. Analyze and generate suggestions with:
+   - Specific line references
+   - Clear, actionable suggestion text
+   - Category tags (clarity, completeness, performance, accessibility, ux)
+3. Embed both the document content and suggestions array in the HTML
+
+## Example use cases
+
+- SKILL.md review (skill definition quality, completeness, clarity)
+- README critique (documentation quality, missing sections, unclear explanations)
+- Spec review (requirements clarity, missing edge cases, ambiguity)
+- Proposal feedback (structure, argumentation, missing context)
+- Code comment review (docstring quality, inline comment usefulness)