Agent skills for web designers and 3D builders using Claude Code, Codex and other AI coding agents.
Browse every skill with its live demo at loouis.github.io/skills.
The section and page-transition skills rebuild effects from Louis's motion labs, with the original engine, a working demo and parity checks. Vector masking skills package geometry and masking methods with original studies. The 3D skills package material and lighting workflows, tested helpers and original Blender-rendered studies.
Start with the section edges:
- Gooey section: Goo The default feel. The boundary between two sections acts like a liquid surface pulled by scroll speed.
- Gooey section: Taffy Stretches while you scroll, then drops, overshoots and wobbles once when you let go.
- Gooey section: Wave A broad, flowing crest with a soft shoulder. The calm one.
Browse the live site, all demos and their prompts, or the screenshot gallery.
For logos and illustrations, explore Masking, starting with Vector Masking: whole vector pieces, accurate silhouettes, clean joins and controlled gaps.
For page transitions, Page Transitions has six hand-drawn GSAP transitions that swell to cover a route change and reveal the next page, such as Wide Tide.
For motion, Logo Mask Motion animates a line-drawn logo piece by piece and lands on the exact artwork, and Motion Director Film makes finished product films and showreels in code with Remotion or GSAP.
For rendering, explore 3D, starting with Blender polished chrome: mirror-polished metals, reflection control and preservation checks.
For interiors, Coastal Interior Render builds photoreal Blender kitchens and living rooms in natural daylight, with annotated realism reviews.
For Blender water and fluid effects, Blender Screen Water packages a clear FLIP sheet, clustered bubbles, dark reflections and partial-loop playback, with portable job preparation and an original material study.
For clear studio water, Water Optics · Clear Studio includes droplet, air-cavity and folded-surface benches, curved product contact, small local ripples, reflected-lettering diagnosis and scored reference review.
For suspended product splashes, Water · Product Splash covers folded sheets, torn rims, droplets, reflection control and a workflow for adding tested lessons as the work develops.
For sunlit pools, Water Pool · Sunlight puts caustics (the net of sunlight) on the pool floor and underwater sun rays through the water, both read from one light map so every ray stands on a bright patch of floor.
Each skill is a plain folder: a SKILL.md playbook plus the files it needs.
- Claude Code: run
python3 install.pyto link every skill into~/.claude/skills/. Ask in your own words ("add the taffy goo between these sections") or call a skill directly with/gooey-section-taffy. - Codex: copy a skill folder into your Codex skills directory.
agents/openai.yamlgives Codex its display name, short description and default prompt. Invoke it with$gooey-section-taffy. - Cursor and other agents: point the agent at the skill's
SKILL.mdand let it follow the steps and linked references.
A feel lives in tuned numbers. A skill carries the original code as an asset, so the agent copies it instead of approximating it.
Each visual skill has a standalone demo/index.html, a rendered preview.jpg and the prompt that recreates it.
Skills built from a lab are checked frame by frame against that lab before they are published.
skills/
ui/
README.md
sections/ # gooey section edges
page-transitions/ # hand-drawn GSAP page transitions
masking/ # vector masking
motion/
README.md
logo/ # logo mask motion
film/ # short films made in code
3d/
README.md
fluids/ # Blender water: screen water, clear studio, splash, pool sunlight
interiors/ # coastal interior render
materials/ # polished chrome
scripts/ # landing pages, previews, gallery, validation
install.py # link skills into Claude CodeFolder contract:
skills/<group>/<category>/<skill-name>/
SKILL.md # required: frontmatter (name, description) + workflow
README.md # generated landing page: search title, preview, tags (edit scripts/skill-pages.json)
REFERENCES.md # optional: links only
agents/openai.yaml # interface metadata: display name, short description, default prompt
assets/
AEFB
# optional: code and files the skill hands to the agent
references/ # optional: longer docs the skill points to
scripts/ # optional: helper scripts
demo/ # optional: visual proof
index.html # standalone HTML, CSS and JavaScript
PROMPT.md # minimal, recreation and remix prompts
preview.jpg # 1280 x 720 browser renderConventions:
SKILL.mdis what the agent loads and follows. Keep it under about 500 lines and procedural: steps, defaults, guardrails.- The
descriptionsays what the skill does and when to use it. That is what an agent reads to decide. REFERENCES.mdis links only.- Each skill folder has a generated
README.md, the page GitHub shows when you open the folder. Its title and tags come fromscripts/skill-pages.json; runnode scripts/build-gallery.cjsafter changing a skill. - Skill names are unique across categories, because Claude Code installs them side by side.
This snapshot contains 24 skills across 8 categories. find skills -name SKILL.md | sort is the source of truth.
blender-screen-water- Clear FLIP water sheets, clustered bubbles and loopswater-optics-clear-studio- Clear water, curved contact and controlled reflectionswater-pool-sunlight- Floor sunlight and sun rays for pool water, from one light mapwater-product-splash- Folded water sheets, torn rims and product splashes
coastal-interior-render- Warm coastal interiors with rigorous realism review
blender-polished-chrome- Mirror-polished metal materials and studio reflections
motion-director-film- Direct, animate, score and QA a finished short film in code
logo-mask-motion- Move the pieces of a line-drawn mark with masks and land on the artwork
vector-masking- Accurate vector masks, clean joins and controlled gaps
gsap-transition-diagonal-tide- Diagonal Tide draw, swell and reveal transitiongsap-transition-double-swell- Double Swell draw, swell and reveal transitiongsap-transition-figure-eight- Figure Eight draw, swell and reveal transitiongsap-transition-signature-loop- Signature Loop draw, swell and reveal transitiongsap-transition-suite- Suite draw, swell and reveal transitiongsap-transition-wide-tide- Wide Tide draw, swell and reveal transition
gooey-section-drift- Crest that surfs sideways as you scrollgooey-section-elastic- Springy edge that overshoots and twangs backgooey-section-goo- Tight sticky bulge with sinking flanksgooey-section-honey- Heavy blob: slow rise, very slow droopgooey-section-peel- Fast drain from full stretch, slow peeling tailgooey-section-slosh- Liquid lean: rises one side, dips the othergooey-section-taffy- Stretches on scroll, snaps back with one wobblegooey-section-twin- Main bulge plus a smaller blob beside itgooey-section-wave- Broad flowing crest pulled by scroll speed
git clone https://github.com/loouis/skills.git
cd skills
python3 install.pyThis links every skill into ~/.claude/skills/. Because they are links, git pull updates them in place. Rerun install.py after adding a skill; it only replaces links that are broken or already point into this repo.
To install a single skill instead:
ln -s "$PWD/skills/ui/sections/gooey-section-taffy" ~/.claude/skills/- Pick a group and category under
skills/, such asskills/ui/sections/, or create one with aREADME.md(copyskills/ui/sections/README.md). - Create
skills/<group>/<category>/<skill-name>/SKILL.md, then addagents/openai.yamland, if it has sources,REFERENCES.md. - For a visual skill, add
demo/index.htmlanddemo/PROMPT.md, then render the preview:A demo can definenode scripts/build-previews.cjs <skill-name>
window.__demoPose()to set up the frame worth capturing. - Refresh the lists and check the contract:
node scripts/build-gallery.cjs node scripts/validate-skills.cjs
- Commit: small commits, one skill each,
Add <skill-name> skillorUpdate <skill-name> skill. Runpython3 install.pyonly when local Claude Code installation is wanted; publishing does not require it.
MIT. Use, adapt and ship these skills in your own work; keep the copyright notice. See LICENSE.