wormclaude 1.0.74 → 1.0.76

package/skills/pdf/scripts/fill_fillable_fields.py

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,77 @@
+---
+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

@@ -0,0 +1,158 @@
+# 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

@@ -0,0 +1,73 @@
+# 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

@@ -0,0 +1,67 @@
+# 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

@@ -0,0 +1,67 @@
+# 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)