feat(skills): brief-first picker, verbalized sampling, procedural backgrounds#791
Open
vanceingalls wants to merge 11 commits into
Open
feat(skills): brief-first picker, verbalized sampling, procedural backgrounds#791vanceingalls wants to merge 11 commits into
vanceingalls wants to merge 11 commits into
Conversation
…l backgrounds Brief step: 6 questions (audience, emotion, brand assets, light/dark, surface, key takeaway) asked one at a time, each answer informing the next. Skip what the prompt already answers. Verbalized sampling: generate 8-10 mood boards, label each as high/mid/low mode, keep 2+ rare boards. Different creative modes (formal, emotional, unconventional, speculative). Anti-mode-collapse check ensures no two boards share the same template. Unlikely-but-valid board generation. Design picker template: - 3x3 grid layout (9 boards) - 3-frame carousel per card (title, data, CTA scenes) - Procedural canvas backgrounds (particles, voronoi, perlin heatmap, ring-pulse, scanline, digits, sine-mesh, ripple, blobs) - Backgrounds as selectable option in Phase 2 - Sticky canvas in Phase 2 preview - No labels on Phase 1 cards — design speaks for itself - Density matches concept, not a 15-element checklist - Full implementation descriptions in design.md output Prompt expansion: verbalized sampling for choreography — 3 approaches per scene (content-first, emotion-first, unconventional), pick the best. Video composition: added proximity/grouping rule. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…rip homogeneity - Replace single vertical-column example with 3 structurally different examples (split horizontal, single dominant, equal grid) - Add structural diversity check: no two architectures share same wireframe - List 8 layout shapes to draw from (centered, split, bottom-anchored, grid, single-dominant, list, diagonal, timeline) - Strip "every token must be used" — tokens only where concept needs them - Canvas backgrounds now config-driven objects (type + params) instead of hardcoded string types — same primitives, contextual parameters - Added text renderer primitive for falling characters Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove hard element counts and "never/always/every" mandates that forced visual clutter and prevented minimal compositions: - video-composition.md: replace "8-10 elements per scene" with density-as- creative-choice; soften "fill the frame" to "use the frame"; replace "two focal points minimum" with focal hierarchy; allow solid backgrounds and deliberate stillness - house-style.md: remove "2-5 decoratives per scene" count and "1 decorative is under-dressed"; decoratives are a tool, not a requirement - prompt-expansion.md: remove "required 2-5 from house-style" and element padding; density matches the emotional beat Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ckgrounds - Picker outputs video-specific design.md lookbook: palette with accent discipline, typography table at video scale, surface & depth, motion personality with easing signature, transition mood, composition rules, pacing guidance (1 word/sec), do's and don'ts - Brief questions use lettered multiple choice (A, B, C, D) for faster interaction - Strip procedural canvas backgrounds and SVG illustrations from template (quality insufficient, will revisit with showcase rewrite) - Fix template syntax errors from background removal (trailing ||, dangling comma, orphaned bgDescs object) - design-picker.md describes new output format (director's lookbook) - Strip remaining prescriptive density from prompt-expansion and video-composition (motion, focal hierarchy, frame composition) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Phase 2 right panel is now a scrollable design system showcase: - Overview, Palette swatches, Typography specimens, Scene grid, Motion easing preview, Elevation cards, Radius chips - All sections themed via CSS custom properties from selected palette - Fix max-width: 100% clamping scene frames (was preventing scale) Architecture preview frames guidance: - Agents must follow video-composition.md, house-style.md, and motion-principles.md when generating preview frame HTML - 4 frames map to beat structure: hook, proof, action, close - Use real content from prompt, not placeholders - Frames are static but should look paused mid-animation - Strip old 15-element checklist and "every token must be used" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…rames - design-picker.md: tokens are mandatory in ALL preview frame HTML — never hardcode colors, fonts, spacing, or radii. The preview must update live when Phase 2 options change. - Explicit guidance to follow video-composition.md, house-style.md, and motion-principles.md when generating preview frames - Fix easing option not calling renderPreview() - Fix max-width:100% clamping scene frames in showcase Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restructure design-picker.md to force creative thinking BEFORE code: 1. "What is unique about THIS prompt?" — visual vocabulary, emotion as layout, surface context, anti-competition 2. Verbalized sampling with reasoning paths — from subject, emotion, audience, anti-pattern, unusual format 3. Rate concepts HIGH/MID/LOW, keep 3+ LOW boards 4. Anti-mode-collapse check 5. THEN generate data The creative process is now a HARD-GATE before the data format section. Previously agents skipped straight to architecture HTML and produced identical layouts across different projects. Also: mandatory token usage rule strengthened — never hardcode colors, fonts, spacing, or radii in preview frames. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… cards - Reorder showcase sections to match left panel: Overview → Composition → Palette → Typography → Corners → Depth → Motion - Motion dot animates with selected ease in BOTH directions (no snap-back), bigger dot (24px), taller track - Kill existing GSAP tweens before restarting on option change - Elevation shows shapes with selected shadow/radius (no labels) - Radius shows content cards ($1,299, 28°C, Oia) + buttons with selected radius applied — real content, not abstract chips - Fix easing onclick missing renderPreview() call Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…r, design.html output Design picker overhaul: - Three.js animated 3D gradient backgrounds (sphere/waterPlane/plane) with ShaderGradient-inspired presets (Halo, Mint, Cosmic, Nighty Night, Sunset, Cotton Candy, Glass, Blob) plus prompt-contextual custom shaders - Per-preset controls (speed, wave height, wobble, camera angle/tilt/zoom) - Custom ease bezier editor with multi-waypoint SVG path support (GSAP CustomEase) - design.html output replaces design.md — self-contained HTML with CSS variables, structured JSON spec, and working Three.js shader module script - Verbalized sampling with probability scoring for mood board generation - Strict data schemas for picker template (palette, type pair, architecture fields) - Bug fixes: checkReady semicolon, density section HTML, scaleScenes resize listener leak, WebGL context cleanup, _sgUpdateBg debounce Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
…plate literals Addresses CodeQL finding: incomplete string escaping when embedding fragment/vertex shader GLSL into design.html template literal output. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
miguel-heygen
approved these changes
May 14, 2026
…utput The exported design.html used performance.now() in a rAF loop, which is not seekable by the HyperFrames three adapter. Replace with the event-driven renderAt pattern that listens for hf-seek and reads window.__hfThreeTime for deterministic frame capture. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Overhaul of the design picker workflow — from brief intake through visual direction selection.
Brief step (SKILL.md)
Verbalized sampling (design-picker.md)
Picker template (design-picker.html)
Prompt expansion (prompt-expansion.md)
Video composition (video-composition.md)
Test plan
hyperframes init+ design picker flow🤖 Generated with Claude Code