How to use the Web Technique to Skill agent skill

What the skill makes the agent do

The skill starts from working code rather than from a written description. The agent is asked to find the one mechanism that makes the effect work, which is the single thing that, if removed, stops the effect from working. Everything else, such as palette, copy, imagery and page layout, is treated as staging and kept in the demo rather than in the reusable rule set.

The output is a skill plus a demo page. The demo is named after the concrete technique, states the runtime and renderer it uses, and is checked in a browser before it is described as working. The skill also carries real constants, such as ranges, timings and budgets, and records the expensive pitfalls that are hard to rediscover by reading code.

Install the skill (ZIP or Claude apps)

Download the ZIP for web-technique-to-skill from the page. Then choose one of two routes.

For Claude Code, unzip the file into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it limited to one project.

In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal use across projects: ~/.claude/skills/
• Single project only: .claude/skills/ inside that project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need to type a special command. Describe what you want in plain language that mentions the working effect and the goal of reusing it. The demo prompt in the package uses the form Use $web-technique-to-skill to extract the mechanism behind this effect and package it as a reusable skill with a demo.

Good triggers name a finished piece of work, for example a page, canvas scene, shader, scroll effect, layout system or hover interaction that turned out well and should live outside one project.

• Use the web technique to skill to extract the mechanism behind this hover effect and package it as a skill.
• Turn this canvas beam animation into a reusable skill with a demo page.
• Package the scroll-scrubbed reveal from this file as a web-design skill.

Check what the skill needs and what it runs

The listing states that the skill requires nothing beyond the agent itself. It does not run scripts and does not use the network. Its files are agents/openai.yaml, demo/expected-output.md, demo/index.html, demo/input.md, demo/PROMPT.md and SKILL.md.

Because it runs no scripts and makes no network calls, the main safety concern is what the agent writes into your project. Review the generated skill and demo before you commit them, and open the demo page in a browser yourself to confirm the effect behaves as described.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Examples of good and bad inputs

A good input is a single effect with a clear visual result, such as a rotating light beam through fog, a noise band at a shoreline, or a card whose lift and shadow move on different curves. The skill separates the mechanism from the look, so the same rule can survive a change of subject, palette or layout.

A poor input is an article or a prompt pack that describes behaviour without working code. The skill's own guidance is to use the article-prompts-to-skills skill for that case. Also avoid it for one-off visuals you will never reuse, since the process adds significant overhead.

• Good: a working canvas or WebGL effect you want to reuse across projects
• Good: a hover interaction whose timing matters and has been tuned
• Poor: an article or prompt pack, use article-prompts-to-skills instead
• Poor: a quick one-off visual with no need for reuse

Tips for better results

Give the agent the source file and say which behaviour you consider the effect. If you can name what breaks when the effect is removed, say so; that becomes the mechanism sentence the skill is built around.

Ask for concrete numbers. The skill is built to record ranges, timings and budgets instead of adjectives, so point the agent at the values you tuned.

Expect one mechanism per skill. If a page holds several good ideas, package them separately so each stays specific.

• Name the failure the effect prevents.
• Provide the tuned constants you actually used.
• Keep one mechanism per skill and check the demo in a browser.