winter-super-cli 2026.5.15

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/LICENSE

@@ -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.

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/README.md

@@ -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.

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/skills/playground/SKILL.md

@@ -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

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/skills/playground/templates/code-map.md

@@ -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)

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/skills/playground/templates/concept-map.md

@@ -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)

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/skills/playground/templates/data-explorer.md

@@ -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)

package/resources/local/claude/plugins/marketplaces/claude-plugins-official/plugins/playground/skills/playground/templates/design-playground.md

@@ -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)