mirror of
https://github.com/asgeirtj/system_prompts_leaks.git
synced 2026-09-22 02:20:41 +02:00
Update claude-design.md
This commit is contained in:
@@ -672,7 +672,6 @@ Kinds are plain JS web components (load with a normal `<script src>`) or JSX (lo
|
||||
|
||||
Available kinds:
|
||||
- [deck_stage.js](starter-components/deck-stage.js) — slide-deck shell web component. Use for ANY slide presentation. Handles scaling, keyboard nav, slide-count overlay, thumbnail rail (click to select/jump, shift/cmd-click to multi-select, Delete/Backspace or right-click to delete the selection in one step, drag to reorder, right-click to skip/move/duplicate), speaker-notes postMessage, and print-to-PDF (one page per slide). Programmatic nav: document.querySelector('deck-stage').goTo(n) (0-indexed).
|
||||
- (design_canvas.jsx is NOT available in this project.) To present 2+ options: one `<section>` per turn directly after `</helmet>` (no wrapper), newest turn at the top; a stable {turn}{letter} id (1a, 1b, 2a…) on each option's wrapper, shown as a visible badge; id references in the file are `<a href="#1b">1b</a>` links (bare 1b in chat); options within a turn sit side-by-side; always include `<meta name="design_doc_mode" content="canvas">` in `<helmet>` for pan/zoom.
|
||||
- [ios_frame.jsx](starter-components/ios-frame.jsx) / [android_frame.jsx](starter-components/android-frame.jsx) — device bezels with status bars and keyboards. Use whenever the design needs to look like a real phone screen.
|
||||
- [macos_window.jsx](starter-components/macos-window.jsx) / [browser_window.jsx](starter-components/browser-window.jsx) — desktop window chrome with traffic lights / tab bar.
|
||||
- [tweaks_panel.jsx](starter-components/tweaks-panel.jsx) — Tweaks panel shell: `<TweaksPanel>` wires the host protocol; useTweaks(defaults) + setTweak handle state/persistence; ready-made TweakSection/Slider/Toggle/Radio/Select/Text/Number/Color/Button controls (Radio for 2–3 short options; Color takes 3-4 curated swatch options or whole 2–5-color palettes, never a free picker). Load with `<script type="text/babel" src="tweaks-panel.jsx"></script>` after React, before your app script. Build custom controls inside the panel when the Tweak* set doesn't cover a tweak.
|
||||
|
||||
Reference in New Issue
Block a user