One component. Three identities. Same skill.
design-dna reads a screenshot, a URL or a brand kit into tokens (color, type, radius), a style (the qualitative feel) and effects. Pick a register: the card below morphs, and the JSON that drives it rewrites itself beside it.
Clinical work, minus the second shift.
A patient journey, an op note, a deck: one evening each, then never again by hand.
The skill ships with this site's own extraction, example-techysurgeon-design-dna.json, so you can see a finished DNA before you run it on your own brand.
Timing is the difference between animated and alive.
motion-design supplies the timing and easing tables; GSAP executes them. Replay the lanes to feel four easings over the same distance, then scroll the pinned scene: one timeline, scrubbed by your scroll, assembling a composition in order.
Assemble on scroll.
The same card, before and after the cast.
genjutsu-cast scans a UI for the tells of generic AI output, then directs motion with intent: one hero moment, physics that respond to the pointer, type that arrives in order. Hover both cards. Press both buttons.
Transform your practice
Gradient text, a uniform scale on hover, a bouncing button, a drop shadow from nowhere. Nothing is wrong, and nothing is chosen.
Keep the evenings.
Ink on cream, a specular pass that reads as light, letters that arrive in reading order, and a button that leans toward your hand before you reach it.
A pinned horizontal chapter, telling you how to install.
immersive-scrollytelling writes the prompt package for pages like this one: pinned chapters, a rail that moves with the scroll, line icons that draw themselves in as each panel arrives. The story on the rail is the one you need next.
Buy the batch, download ten files.
Checkout opens your shelf at once. Each skill is one .skill file, a zip of plain Markdown. Your purchase is tied to your email, so you can re-download the latest versions on any device.
techysurgeon.com/skills → Buy → DownloadUpload it in Claude.
Settings → Capabilities → Skills → Upload a skill. Pick the file. The skill is live in every new conversation, on web and desktop.
claude.ai · Settings → Capabilities → SkillsOr drop it into Cowork, or hand it to a chat.
Claude Cowork reads a .skill dropped into its skills folder. In any Claude chat, attach the file and say “create this skill”. ChatGPT: unzip it and add the Markdown to a Project as knowledge.
Cowork folder · “create this skill” · ChatGPT ProjectAsk for the page you want.
“Cast genjutsu on my landing page.” “Build a pinned scroll scene for these three stats with GSAP.” “Extract the design DNA from this screenshot and apply it.” The skill carries the method; you carry the taste.
The prompts are inside each SKILL.mdLight through water, in forty lines of GLSL.
threejs-shaders covers ShaderMaterial, uniforms and the GLSL that makes a surface feel physical. This caustic field runs on a single quad; the pointer bends it. The full fragment shader is on the right, ready to paste.