wormclaude 1.0.119 → 1.0.121

package/skills/pdf/scripts/fill_fillable_fields.py

@@ -1,98 +0,0 @@
-import json
-import sys
-
-from pypdf import PdfReader, PdfWriter
-
-from extract_form_field_info import get_field_info
-
-
-
-
-def fill_pdf_fields(input_pdf_path: str, fields_json_path: str, output_pdf_path: str):
-    with open(fields_json_path) as f:
-        fields = json.load(f)
-    fields_by_page = {}
-    for field in fields:
-        if "value" in field:
-            field_id = field["field_id"]
-            page = field["page"]
-            if page not in fields_by_page:
-                fields_by_page[page] = {}
-            fields_by_page[page][field_id] = field["value"]
-    
-    reader = PdfReader(input_pdf_path)
-
-    has_error = False
-    field_info = get_field_info(reader)
-    fields_by_ids = {f["field_id"]: f for f in field_info}
-    for field in fields:
-        existing_field = fields_by_ids.get(field["field_id"])
-        if not existing_field:
-            has_error = True
-            print(f"ERROR: `{field['field_id']}` is not a valid field ID")
-        elif field["page"] != existing_field["page"]:
-            has_error = True
-            print(f"ERROR: Incorrect page number for `{field['field_id']}` (got {field['page']}, expected {existing_field['page']})")
-        else:
-            if "value" in field:
-                err = validation_error_for_field_value(existing_field, field["value"])
-                if err:
-                    print(err)
-                    has_error = True
-    if has_error:
-        sys.exit(1)
-
-    writer = PdfWriter(clone_from=reader)
-    for page, field_values in fields_by_page.items():
-        writer.update_page_form_field_values(writer.pages[page - 1], field_values, auto_regenerate=False)
-
-    writer.set_need_appearances_writer(True)
-    
-    with open(output_pdf_path, "wb") as f:
-        writer.write(f)
-
-
-def validation_error_for_field_value(field_info, field_value):
-    field_type = field_info["type"]
-    field_id = field_info["field_id"]
-    if field_type == "checkbox":
-        checked_val = field_info["checked_value"]
-        unchecked_val = field_info["unchecked_value"]
-        if field_value != checked_val and field_value != unchecked_val:
-            return f'ERROR: Invalid value "{field_value}" for checkbox field "{field_id}". The checked value is "{checked_val}" and the unchecked value is "{unchecked_val}"'
-    elif field_type == "radio_group":
-        option_values = [opt["value"] for opt in field_info["radio_options"]]
-        if field_value not in option_values:
-            return f'ERROR: Invalid value "{field_value}" for radio group field "{field_id}". Valid values are: {option_values}' 
-    elif field_type == "choice":
-        choice_values = [opt["value"] for opt in field_info["choice_options"]]
-        if field_value not in choice_values:
-            return f'ERROR: Invalid value "{field_value}" for choice field "{field_id}". Valid values are: {choice_values}'
-    return None
-
-
-def monkeypatch_pydpf_method():
-    from pypdf.generic import DictionaryObject
-    from pypdf.constants import FieldDictionaryAttributes
-
-    original_get_inherited = DictionaryObject.get_inherited
-
-    def patched_get_inherited(self, key: str, default = None):
-        result = original_get_inherited(self, key, default)
-        if key == FieldDictionaryAttributes.Opt:
-            if isinstance(result, list) and all(isinstance(v, list) and len(v) == 2 for v in result):
-                result = [r[0] for r in result]
-        return result
-
-    DictionaryObject.get_inherited = patched_get_inherited
-
-
-if __name__ == "__main__":
-    if len(sys.argv) != 4:
-        print("Usage: fill_fillable_fields.py [input pdf] [field_values.json] [output pdf]")
-        sys.exit(1)
-    monkeypatch_pydpf_method()
-    input_pdf = sys.argv[1]
-    fields_json = sys.argv[2]
-    output_pdf = sys.argv[3]
-    fill_pdf_fields(input_pdf, fields_json, output_pdf)

package/skills/pdf/scripts/fill_pdf_form_with_annotations.py

@@ -1,107 +0,0 @@
-import json
-import sys
-
-from pypdf import PdfReader, PdfWriter
-from pypdf.annotations import FreeText
-
-
-
-
-def transform_from_image_coords(bbox, image_width, image_height, pdf_width, pdf_height):
-    x_scale = pdf_width / image_width
-    y_scale = pdf_height / image_height
-
-    left = bbox[0] * x_scale
-    right = bbox[2] * x_scale
-
-    top = pdf_height - (bbox[1] * y_scale)
-    bottom = pdf_height - (bbox[3] * y_scale)
-
-    return left, bottom, right, top
-
-
-def transform_from_pdf_coords(bbox, pdf_height):
-    left = bbox[0]
-    right = bbox[2]
-
-    pypdf_top = pdf_height - bbox[1]      
-    pypdf_bottom = pdf_height - bbox[3]   
-
-    return left, pypdf_bottom, right, pypdf_top
-
-
-def fill_pdf_form(input_pdf_path, fields_json_path, output_pdf_path):
-    
-    with open(fields_json_path, "r") as f:
-        fields_data = json.load(f)
-    
-    reader = PdfReader(input_pdf_path)
-    writer = PdfWriter()
-    
-    writer.append(reader)
-    
-    pdf_dimensions = {}
-    for i, page in enumerate(reader.pages):
-        mediabox = page.mediabox
-        pdf_dimensions[i + 1] = [mediabox.width, mediabox.height]
-    
-    annotations = []
-    for field in fields_data["form_fields"]:
-        page_num = field["page_number"]
-
-        page_info = next(p for p in fields_data["pages"] if p["page_number"] == page_num)
-        pdf_width, pdf_height = pdf_dimensions[page_num]
-
-        if "pdf_width" in page_info:
-            transformed_entry_box = transform_from_pdf_coords(
-                field["entry_bounding_box"],
-                float(pdf_height)
-            )
-        else:
-            image_width = page_info["image_width"]
-            image_height = page_info["image_height"]
-            transformed_entry_box = transform_from_image_coords(
-                field["entry_bounding_box"],
-                image_width, image_height,
-                float(pdf_width), float(pdf_height)
-            )
-        
-        if "entry_text" not in field or "text" not in field["entry_text"]:
-            continue
-        entry_text = field["entry_text"]
-        text = entry_text["text"]
-        if not text:
-            continue
-        
-        font_name = entry_text.get("font", "Arial")
-        font_size = str(entry_text.get("font_size", 14)) + "pt"
-        font_color = entry_text.get("font_color", "000000")
-
-        annotation = FreeText(
-            text=text,
-            rect=transformed_entry_box,
-            font=font_name,
-            font_size=font_size,
-            font_color=font_color,
-            border_color=None,
-            background_color=None,
-        )
-        annotations.append(annotation)
-        writer.add_annotation(page_number=page_num - 1, annotation=annotation)
-        
-    with open(output_pdf_path, "wb") as output:
-        writer.write(output)
-    
-    print(f"Successfully filled PDF form and saved to {output_pdf_path}")
-    print(f"Added {len(annotations)} text annotations")
-
-
-if __name__ == "__main__":
-    if len(sys.argv) != 4:
-        print("Usage: fill_pdf_form_with_annotations.py [input pdf] [fields.json] [output pdf]")
-        sys.exit(1)
-    input_pdf = sys.argv[1]
-    fields_json = sys.argv[2]
-    output_pdf = sys.argv[3]
-    
-    fill_pdf_form(input_pdf, fields_json, output_pdf)

package/skills/playground/SKILL.md

@@ -1,77 +0,0 @@
----
-name: playground
-description: Builds interactive HTML playgrounds — standalone single-file explorers where users tune something visually with controls, watch a live preview, and copy out a prompt. Reach for it when someone wants a playground, explorer, or interactive tool around a topic.
-license: WormClaude
----
-
-# Playground Builder
-
-A playground packs everything into one HTML file: interactive controls down one side, a live preview on the other, and a prompt readout at the bottom with a copy button. Users tweak the controls, explore visually, then paste the generated prompt back into WormClaude.
-
-## When to use this skill
-
-Pick this skill whenever someone wants an interactive playground, explorer, or visual tool for a topic — most useful when the option space is broad, visual, or structural and awkward to capture in plain prose.
-
-## 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. When the topic doesn't map neatly onto a template, grab the nearest match and adjust it.
-4. **Open in browser.** Once the HTML file is written, run `open <filename>.html` so it launches in the user's default browser.
-
-## Core requirements (every playground)
-
-- **Single HTML file.** Embed all CSS and JS inline. Zero external dependencies.
-- **Live preview.** Refreshes the moment any control changes — never gate it behind an "Apply" button.
-- **Prompt output.** Phrased as natural language rather than a dump of raw values. Surfaces only the choices that differ from defaults, carries enough context to act on without the playground in front of you, and refreshes live.
-- **Copy button.** One-click clipboard copy with a quick "Copied!" confirmation.
-- **Sensible defaults + presets.** Presentable the instant it loads. Ship 3-5 named presets that snap every control into a coherent combination.
-- **Dark theme.** System font for the interface, monospace for code and values. Keep the chrome sparse.
-
-## State management pattern
-
-Hold everything in one state object. Each control writes into it; each render reads back out of 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 reads like a value dump → rephrase it as a plain-English instruction
-- Too many controls crammed together → cluster them by concern and tuck advanced ones into a collapsible section
-- Preview lags behind the controls → wire every change to fire an instant re-render
-- Missing defaults or presets → the page opens empty or broken
-- Leaning on external dependencies → one CDN outage and the playground stops working
-- Prompt with no context → include enough that it stands on its own away from the playground

package/skills/playground/templates/code-map.md

@@ -1,158 +0,0 @@
-# Code Map Template
-
-Reach for this template when the playground is about visualizing codebase architecture: component relationships, data flow, layer diagrams, and 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 draw the architecture diagram on an SVG canvas. Users click a component to attach a comment, and those comments roll into the generated prompt. Layer and connection filters let them zero in 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
-
-Build on an `<svg>` element whose nodes and paths are generated on the fly. Key patterns:
-
-- **Nodes:** Rounded rectangles carrying a title and a subtitle (the file path)
-- **Connections:** Curved bezier paths with arrow markers, styled per type
-- **Layer organization:** Sort nodes into Y-position bands (for example y: 30-80 = Client, y: 130-180 = Server)
-- **Click-to-comment:** Click a node → open a modal → save the comment → the node picks up a visual indicator
-- **Filtering:** Toggle node visibility by layer and connection visibility 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
-
-Set up 3-5 connection types, each with its own visual style:
-
-| 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 |
-
-Lean on SVG markers for the 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
-
-What sets code maps apart is the click-to-comment flow:
-
-1. **Click node** → Open a modal showing the component name, file path, and a textarea
-2. **Save comment** → Push it onto the comments list and give the node a visual marker (colored border)
-3. **View comments** → A sidebar list with the component name, a comment preview, and a delete button
-4. **Delete comment** → Drop it from the list, reset the node's visual, and rebuild the prompt
-
-Each comment should carry the component context with it:
-
-```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 weaves the system context together with the user's 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.
-```
-
-Carry over only the comments the user actually wrote. If the full system isn't on screen, note which layers are currently visible.
-
-## Pre-populating with real data
-
-For a specific codebase, seed the map with:
-
-- **Nodes:** 15-25 key components, each with a real file path
-- **Connections:** 20-40 relationships drawn from the real imports and calls
-- **Layers:** Logical groupings (UI, API, Business Logic, Data, External)
-- **Presets:** "Full System", "Frontend Only", "Backend Only", "Data Flow"
-
-Arrange the nodes in horizontal bands by layer, keeping the spacing even.
-
-## 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/skills/playground/templates/concept-map.md

@@ -1,73 +0,0 @@
-# Concept Map Template
-
-Reach for this template when the playground is about learning, exploration, or charting relationships: concept maps, spotting knowledge gaps, scope mapping, and breaking tasks into dependency-linked pieces.
-
-## Layout
-
-```
-+--------------------------------------+
-|  Canvas (draggable nodes, edges)     |
-|  with tooltip on hover               |
-+-------------------------+------------+
-|                         |            |
-|  Sidebar:               | Prompt     |
-|  • Knowledge levels     | output     |
-|  • Connection types     |            |
-|  • Node list            | [Copy]     |
-|  • Actions              |            |
-+-------------------------+------------+
-```
-
-Canvas-based playgrounds break from the two-panel split. Here the interactive visual itself is the control — users drag nodes and sketch connections instead of nudging sliders. The sidebar rounds it out 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
-
-Drive a `<canvas>` element with hand-written draw calls. Key patterns:
-
-- **Hit testing:** Compare the mouse position against each node's bounding circle during mousedown and mousemove
-- **Drag:** When mousedown lands on a node, capture the offset and reposition the node as the mouse moves
-- **Edge drawing:** Click node A, then node B, and draw an arrow between them tagged with the chosen relationship type
-- **Tooltips:** On hover, float an absolutely-positioned div over the canvas carrying the description text
-- **Force-directed auto-layout:** A lightweight spring model — every pair repels, edges pull their endpoints together, run 100-200 damped iterations
-
-```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 read as a focused learning request, shaped by how the user tagged their own knowledge:
-
-> "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."
-
-Carry over only the edges the user actually drew, and in the explanation request name only the concepts they flagged as fuzzy or unknown.
-
-## Pre-populating with real data
-
-For codebases or domains, seed the canvas with:
-- **Nodes:** 15-20 key concepts, each with a real file path and a brief description
-- **Edges:** 20-30 relationships drawn ahead of time from the real architecture
-- **Knowledge:** Start everything at "Fuzzy" and let the user tune from there
-- **Presets:** "Zoom out" (collapse internal nodes, keep only top-level ones), "Focus on [layer]" (spotlight nodes in a single 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/skills/playground/templates/data-explorer.md

@@ -1,67 +0,0 @@
-# Data Explorer Template
-
-Reach for this template when the playground deals with data queries, APIs, pipelines, or structured configuration: SQL builders, API designers, regex builders, pipeline visuals, and 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
-
-Produce syntax-highlighted output by wrapping tokens in `<span>` tags carrying 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, lay out a horizontal or vertical flow diagram from absolutely-positioned divs joined by arrow connectors.
-
-## Prompt output for data
-
-Phrase it as a spec for what to build rather than 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."
-
-Bake in the schema context — table names and column types — so the prompt stands on its own.
-
-## 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/skills/playground/templates/design-playground.md

@@ -1,67 +0,0 @@
-# Design Playground Template
-
-Reach for this template whenever the playground centers on visual design choices: components, layouts, spacing, color, typography, animation, and 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
-
-Push the state values straight onto 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';
-}
-```
-
-Where it matters, render the preview against both light and dark backgrounds and offer a toggle to switch context.
-
-## Prompt output for design
-
-Write it like guidance handed to a developer, not a sheet of specs:
-
-> "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."
-
-When the user is on Tailwind, offer Tailwind classes; when they're on plain CSS, stick to 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)