Skip to content
cccskills
FreePublished on GitHub

testing-web-gallery

How to run and test the docs/index.html AGSL shader web gallery locally (static server, WebGL2-capable Chrome flags, CDP verification hooks).

The English summary is being prepared. Showing the original description.

dantech0xff/dreams
See how to install

Files included (1)

  • SKILL.md3.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Testing the Dreams web gallery (docs/index.html)

The gallery at docs/index.html is a fully static page — the lesson catalog (with transpiled GLSL) is inlined in <script id="data">, so the only server requirement is serving docs/ so gallery/<id>.png thumbnails resolve:

cd <repo>/docs && python3 -m http.server 8471   # http://localhost:8471/

WebGL2 in the on-screen browser

Chrome for Testing on this box (managed instance, CDP on port from --remote-debugging-port, profile ~/.browser_data_dir) launches without --enable-unsafe-swiftshader. On Chrome 137+ software WebGL is blocked without it, so the gallery shows the yellow "browser has no WebGL2" banner and falls back to static thumbnails — easy to mistake for working live renders since thumbnails come from the same shaders. Verify the banner is actually hidden before trusting canvas screenshots.

Fix: relaunch the same chrome binary with its existing flags plus --enable-unsafe-swiftshader (capture them from /proc/<pid>/cmdline and keep --remote-debugging-port + --user-data-dir unchanged). Verify with document.createElement('canvas').getContext('webgl2') over CDP — must be truthy and #nowebgl must be display:none.

Objective verification hooks (all exposed on window)

  • __dreams.DATA — catalog; __dreams.openLesson(id) — opens the lesson modal.
  • __dreams.player.state — { touch: {x,y,t} | null, values: {uniform: number}, ripples: Float32Array(64), paused }. After clicking #mCanvas, state.touch should be non-null for hasTouch lessons; CUSTOM showcases set touch AND ripple slots.
  • #mErr displays shader compile errors — check it's display:none after open.
  • Canvas pixels: #mCanvas has preserveDrawingBuffer:true, so drawImage it onto a 2d canvas and getImageData for luminance stats; or toDataURL('image/png') for artifacts.
  • Deep links: #<lesson-id> works on fresh load AND via hashchange (no reload needed).

Playwright is at tools/shader-catalog/node_modules — connect to the visible browser with chromium.connectOverCDP('http://localhost:<port>') so page.mouse/page.evaluate drive the same browser being recorded. Home/End keys set range sliders to min/max; Esc closes the modal; Left/Right arrows switch lessons.

Gotchas

  • Card thumbnails are loading="lazy" — naturalWidth==0 until scrolled into view; scroll or scrollIntoView() before flagging broken images.
  • fractals-05-burning-ship has NO time uniform (static — changes only via sliders), and its Zoom slider centers on a set-interior point: zoom ≳10 renders a fully black frame by construction.
  • interactive-05-lens-flare Intensity=0 → fully black (intensity is a direct multiplier). Slider-extreme checks should allow for legitimately dark outputs.
  • RENDER_EFFECT lessons (postfx-*) paint a sampleCard texture — the preview should show a UI card, not a blank field.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

kta-code-review

Free

Senior Kotlin specialist code review — framework-agnostic. Use whenever the user asks to review, audit, critique, or get feedback on Kotlin code, a file, a class, a function, a module, a diff, a branch, a commit, or a pull request. Judges Kotlin language idioms, logic correctness, architecture and layering, concurrency (coroutines, Flow, structured concurrency, cancellation, race conditions), null safety, exception safety, testability, performance, and security. Detects force-unwraps, unchecked casts, GlobalScope, leaked mutability, broken structured concurrency, hidden side effects, weak abstractions, untestable seams, allocation hot spots, weak crypto, input-validation gaps, and PII logging. Outputs prioritized findings with file:line anchors and minimal-diff fixes. No assumptions about DI framework, UI framework, or build system.

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

kta-compose-design-tokens

Free

Create Kotlin Compose design tokens from one of three supported sources — Google Stitch (MCP), Figma (MCP or JSON), or Claude Design (kta-design-spec output, Claude HTML/markdown artifacts). Three-layer architecture (Primitive/Semantic/Component) with code generation. Use when user asks to "generate design tokens", "create theme from Figma/Stitch/Claude design", "build Compose tokens from design spec", or "convert design source to tokens". Refuses any other input source and asks user for correct seed data.

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

kta-compose-design-tokens

Free

Create Kotlin Compose design tokens from one of three supported sources — Google Stitch (MCP), Figma (MCP or JSON), or Codex Design (kta-design-spec output, Codex HTML/markdown artifacts). Three-layer architecture (Primitive/Semantic/Component) with code generation. Use when user asks to "generate design tokens", "create theme from Figma/Stitch/Codex design", "build Compose tokens from design spec", or "convert design source to tokens". Refuses any other input source and asks user for correct seed data.

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

kta-compose-optimizer

Free

Optimize a single Jetpack Compose @Composable function. Use when the user wants to improve, polish, animate, or refactor ONE Composable — keywords like "optimize this composable", "make this smoother", "add animation to this", "split this composable", "fix recomposition", "this composable is laggy", "polish this UI", or when user pastes/points to a single @Composable function. Analyzes the target for recomposition issues, missing animations, size/concern splits, and stability problems, then iterates with the user via AskUserQuestion to pick which optimizations to apply, then delegates implementation to the kta-compose-developer agent and summarizes changes. Input MUST be exactly one Composable (file path + function name, or function name alone).

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

kta-design-spec

Free

Per-screen design spec generator for AI design tools (Stitch / Figma AI / Claude artifacts). Consumes per-feature PRDs from kta-prd-pipeline. Emits tool-agnostic markdown specs. Triggers — design spec, AI design prompt, screen mockup brief, Figma AI input, Stitch prompt, design system tokens, post-PRD design phase, generate design specs, design brief, mockup spec. DOES NOT generate Compose code, Kotlin code, or @Preview stubs.

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

kta-design-spec

Free

Per-screen design spec generator for AI design tools (Stitch / Figma AI / Codex artifacts). Consumes per-feature PRDs from kta-prd-pipeline. Emits tool-agnostic markdown specs. Triggers — design spec, AI design prompt, screen mockup brief, Figma AI input, Stitch prompt, design system tokens, post-PRD design phase, generate design specs, design brief, mockup spec. DOES NOT generate Compose code, Kotlin code, or @Preview stubs.

The English summary is being prepared. Showing the original description.

dantech0xff/dreams6Updated Sep 21, 2026

See all skills by dantech0xff

Report a problem with this skill