What problem does it solve?
When a page, canvas scene, shader, scroll effect, or hover interaction turns out well, the knowledge of why it works stays trapped in one project's code. This Skill turns that working code into a reusable, versioned skill by isolating the single mechanism that makes the effect work, separating it from project-specific staging, and packaging it with a demo that proves both the mechanism and the visual fidelity.
Core Features & Use Cases
- Mechanism isolation: Sorts source code into mechanism, staging, and incidental piles, keeping only the mechanism in the skill body while preserving approved reference staging in the demo.
- Quality contract enforcement: Requires failure-anchored rules, real numeric constants instead of adjectives, symptom-first gotchas, stack disclosure (runtime, renderer, technique libraries), and declared boundaries against neighboring skills.
- Browser verification workflow: Mandates driving the demo at 1440x900 and 390x844, testing reduced-motion, keyboard focus, multi-state traversal, and a clean console before claiming the technique works.
- Use Case: After shipping a WebGL night-harbour page with a volumetric lighthouse beam, use this Skill to extract the ray-marched fog density technique into a standalone
volumetric-beam-sweep skill with a self-contained demo, leaving the client brand, licensed fonts, and page layout behind.
Quick Start
Use the web-technique-to-skill skill to extract the mechanism behind this working effect and package it as a reusable skill with a verified demo.
