The Techy Surgeon
Members · Build Notes

Tutorial · Agent Skills · 2026

The five repos that made that story look like that.

The free piece you just read was built with five open-source agent-skill repositories. This is the install guide and the operating manual: what each one does, what it stops your agent from doing, and a worked example you can run end to end in an afternoon.

Nothing here requires a build step. Every code block has a copy button. The demo in section 03 is live on this page.

00 Why this works at all

A skill is documentation delivered at the exact moment of generation.

That is the whole mechanism. A skill is not a library you import and it is not code that runs. It is a folder with a SKILL.md and some reference files, and the agent loads it into context when the task matches. The model already knows how to write CSS. What it does not know is which API changed last quarter, what your spacing ramp is, or that a card should enter in 240ms and leave in 170ms.

Model weights are frozen at training time. A skill folder is not. That gap is where most bad generated frontends come from: confident code written against an API that moved, or a layout invented fresh because nothing told the model what your design system already decided.

Five repos close five different versions of that gap. One holds your visual identity as data. Three hold current, audited API knowledge for three.js, GSAP, and motion timing. One holds a process with rules that refuse to be skipped.

01 Installation

This part is easy. Genuinely.

There is no package manager, no registry, no auth. You clone five public repos and copy folders into the directory your agent reads skills from. That is it. Pick either path below.

Path A — clone them yourself

Paste this into a terminal. It puts all five side by side in one folder so you can see what you are installing before you install it.

terminal · clone all five 
mkdir -p ~/agent-skills-src
cd ~/agent-skills-src

git clone https://github.com/zanwei/design-dna.git
git clone https://github.com/CloudAI-X/threejs-skills.git
git clone https://github.com/greensock/gsap-skills.git
git clone https://github.com/lottiefiles/motion-design-skill.git
git clone https://github.com/AThevon/genjutsu.git

# see what you actually got: every folder containing a SKILL.md is one skill
find . -name "SKILL.md" | sort

Path B — hand the whole job to your agent

Paste this prompt into Claude Code, Cursor, or whatever agent you use. It clones, finds your skills directory, installs with folder structure preserved, repairs broken relative paths, verifies, and then briefs you on what it installed.

prompt · install + verify + brief 
You are setting up five open-source agent-skill repositories for me. Do the whole job end to end, then report back. Ask me before you guess.

STEP 1 — CLONE
Create ~/agent-skills-src and clone these five repositories into it:
  https://github.com/zanwei/design-dna
  https://github.com/CloudAI-X/threejs-skills
  https://github.com/greensock/gsap-skills
  https://github.com/lottiefiles/motion-design-skill
  https://github.com/AThevon/genjutsu

STEP 2 — FIND MY SKILLS DIRECTORY
Work out where THIS agent loads skills from, and tell me the path before you copy anything.
  - Claude Code: ~/.claude/skills/ for personal skills, .claude/skills/ inside a project for project-scoped skills. Plugins live under .claude-plugin/.
  - Cursor or another agent: locate the equivalent skills or rules directory.
If more than one location is plausible, list them and ask me which one to use. Do not pick one silently.

STEP 3 — INSPECT BEFORE YOU INSTALL
For each repo, list every directory that contains a SKILL.md. That file is the skill; the directory is the unit of installation. Report the count per repo. Roughly what to expect:
  design-dna ......... 1 skill, plus a references/ folder
  threejs-skills ..... 10 skills, one per three.js subsystem
  gsap-skills ........ 8 skills, plus a .claude-plugin/ marketplace manifest
  motion-design-skill  1 skill, plus 16 reference files under director/, patterns/, reference/
  genjutsu ........... 1 plugin: 2 commands (/paint, /cast) plus internal _jutsu modules
If what you find differs from that, tell me rather than forcing it to match.

STEP 4 — INSTALL, PRESERVING STRUCTURE
Copy each skill as a FOLDER, never as a single flattened file. SKILL.md must keep its siblings.
Three of these carry reference material that SKILL.md points at with RELATIVE paths, and those paths break the moment the folder is flattened:
  - design-dna: references/ (schema.md, generation-guide.md)
  - motion-design-skill: director/, patterns/, reference/
  - genjutsu: its command files and internal _jutsu modules
After copying, grep every installed SKILL.md for relative links and confirm each target file actually exists at that path. If a link is broken, rewrite it to point at where the file really landed, and tell me every path you changed.
gsap-skills and genjutsu ship plugin manifests. If my agent supports plugins or a marketplace manifest, install them that way instead of hand-copying folders, and tell me which route you took for each.

STEP 5 — VERIFY
Reload or restart the agent's skill index if that is required. Then list every skill now installed, with its name and the one-line description from its SKILL.md front matter. Flag anything that failed to load.

STEP 6 — BRIEF ME
Give me a short table: skill name, what it does, when I should invoke it. Then, in three sentences, tell me the order to use them in when I am building a landing page from scratch.

Do not edit the contents of any SKILL.md except to repair a broken relative path. Do not summarize, rewrite, or "improve" the skills.
The one real gotcha

Three of these five are multi-file skills. design-dna carries a references/ folder, motion-design carries sixteen files across director/, patterns/ and reference/, and genjutsu carries its commands plus internal _jutsu modules. Their SKILL.md files point at those siblings with relative paths.

Install one of them as a single flat file and the SKILL.md still loads. It just references documents that are no longer there. You get a skill that appears installed, produces plausible output, and quietly lacks the lookup tables that were the reason to install it. Stage the reference folders alongside the SKILL.md, then rewrite any path that no longer resolves. Step 4 of the prompt above does this and reports what it changed.

02 The five

What each one does, and what it stops happening.

Read these as five different jobs, not five flavors of the same thing. One holds identity. Three hold current API and timing knowledge. One holds process.

design-dna
1 skill

github.com/zanwei/design-dna

What it does
Turns a visual identity into JSON across three dimensions, in three phases: show the schema, extract a profile from reference images or a URL, then generate new work from that profile.
  • design_system — the tokens: color, typography, spacing, shape, elevation, motion.
  • design_style — the qualitative layer: aesthetic, composition, interaction feel.
  • visual_effects — shaders, particles, scroll behavior, cursor.
A references/ folder holds the schema and the generation guide.
What it prevents
Your agent reinventing the palette on every request. Style stops living in the chat scrollback and starts living in a file you can read, diff, review, and hand to another person.
You'll notice it when…you ask for a second page and the type ramp, the radii, and the spacing scale match the first one without you restating a single value.
threejs-skills
10 skills

github.com/CloudAI-X/threejs-skills

What it does
Splits three.js into ten skills, one per subsystem: fundamentals, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. The whole set is audited against three.js r160 and later, so the agent pulls only one subsystem's worth of context instead of the entire library.
What it prevents
Stale constructor signatures and import paths that moved. three.js reorganizes; a model writing from memory will confidently reach for a constructor whose arguments changed or an addon that now lives somewhere else. Those failures are silent at write time and loud at run time.
You'll notice it when…the scene renders on the first run instead of throwing a constructor error you then spend twenty minutes bisecting against the changelog.
gsap-skills
8 skills

github.com/greensock/gsap-skills

What it does
Eight skills covering core, timeline, scrolltrigger, plugins, react, frameworks, utils, and performance. Published by GreenSock themselves, which is the important part: the vendor maintains them, so they move when GSAP moves. Also ships a .claude-plugin/ marketplace manifest, so on agents that support plugins you install the set rather than eight folders.
What it prevents
ScrollTrigger written from memory. That is where the wrong scrub semantics, pinning without accounting for pin spacing, missing cleanup in React, and tweens on layout-triggering properties all come from.
You'll notice it when…the scroll animation does not stutter on a trackpad, and the React component does not leave a live timeline behind on unmount.
motion-design
1 skill · 16 refs

github.com/lottiefiles/motion-design-skill

What it does
One skill plus sixteen reference files under director/, patterns/ and reference/. These are lookup tables, not adjectives:
  • Duration by element type: tooltip 80–120ms, card enter 200–350ms, dramatic reveal 600–1200ms.
  • Exit runs at 65–75% of the entrance duration.
  • Easing by direction: entrance ease-out, exit ease-in, loop sine.
  • MD3 curves, spring constants, stagger budgets, material-based easing, and four motion personalities.
What it prevents
Everything being 300ms ease. It also fixes the most common reason an interface feels sluggish, which is an exit that takes as long as its entrance.
You'll notice it when…you read the generated CSS and the durations differ per element, each with a reason you can trace back to a table.
genjutsu
plugin · 2 cmds

github.com/AThevon/genjutsu

What it does
A plugin with two commands. /paint runs the full pipeline: brainstorm, thesis, design system, implement, audit. /cast is the lighter path for motion and interaction work on something that already exists. Behind them sit sixteen internal _jutsu modules, including css-native, gsap, framer-motion, threejs-r3f, canvas-generative, motion-principles, mobile-principles, desktop-principles, design-audit, ui-ux-pro-max, compose-motion, compose-graphics, compose-multiplatform, swiftui-motion, and swiftui-graphics.
What it prevents
Generic AI slop, explicitly and by name. It ships iron rules and a red-flags table of forbidden thoughts: no rainbow gradients, no gratuitous glassmorphism, no "modern and sleek" standing in for a brief. Every token comes from the design system. Never skip the brainstorm. One question at a time. The audit is not optional.
You'll notice it when…the agent asks you one question and then waits, instead of shipping a hero with a purple gradient in it.

03 Worked example

A bright, minimal product page. Five skills, five jobs.

The rest of this page is dark. This section is not, on purpose. The skills carry no house style of their own, and the fastest way to prove that is to run them toward a register that is the opposite of this site's.

The brief: a single-product page for a cut-flower shop. Paper-white ground, one blush accent, a lot of empty space, and a bloom that opens rather than appears. Here is which skill does what.

1

Extract the identity before writing any markup

design-dna · phase 2

Give it three or four reference photographs, or a URL. It returns a profile across all three dimensions. Read the JSON before you build anything, because this is the moment to argue with it. Editing a token here is cheap; editing it after three pages are built is not.

bloom.dna.json · excerpt 
{
  "design_system": {
    "color": {
      "bg/base":       "#FFFDFA",
      "bg/wash":       "#F7F2EA",
      "ink/primary":   "#16261F",
      "ink/muted":     "#6B7F73",
      "accent/bloom":  "#EDA6B7",
      "accent/pollen": "#C98F2E"
    },
    "typography": {
      "display": { "family": "Cormorant Garamond", "weight": 300,
                   "tracking": "-0.01em", "leading": 0.92 },
      "ui":      { "family": "Space Grotesk", "weight": 500,
                   "tracking": "0.02em" },
      "scale":   [12, 14, 16, 20, 28, 44, 68]
    },
    "spacing":   { "unit": 4, "ramp": [4, 8, 12, 16, 24, 32, 48, 72] },
    "shape":     { "radius/sm": 2, "radius/md": 4, "radius/pill": 999 },
    "elevation": { "card": "0 18px 46px -28px rgba(22,38,31,0.35)" },
    "motion":    { "ease/entrance": "cubic-bezier(.22,1,.36,1)",
                   "ease/exit":     "cubic-bezier(.4,0,1,1)" }
  },
  "design_style": {
    "aesthetic":        "bright editorial botanical; paper ground, one blush accent, no second hue",
    "composition":      "asymmetric two-column, copy left, subject right, 40% of canvas left empty",
    "interaction_feel": "unhurried; things open rather than appear"
  },
  "visual_effects": {
    "scroll":    "single reveal at 20% viewport entry, no parallax",
    "particles": "none",
    "cursor":    "default"
  }
}

Note what the profile refuses. No second hue. No parallax. No particles. A profile that only says yes is not doing its job.

2

Gate the art direction before any code exists

genjutsu · /paint

Run /paint and hand it the profile. It will not start implementing. It brainstorms, then states a thesis, then derives the system, and only then writes code, and it audits at the end. The iron rules do the work here: every token has to come from the design system, and the audit is not optional.

agent · invoke /paint 
/paint

Single-product hero for a cut-flower shop. Product: one peony stem, $38, ships in a cooled sleeve, opens over four days.

Design system: use bloom.dna.json exactly as written. Every color, size, radius and easing value must resolve to a token in that file. If you need a value the file does not contain, stop and tell me which token is missing rather than inventing one.

Constraints: paper-white ground, one blush accent and no second hue, at least 40% of the canvas empty, mobile-first down to 375px, and no dependency heavier than the fonts.

Brainstorm first. Give me the thesis before you write markup.

The value is the refusal. A generic agent given this brief produces a gradient background, a glass card, and three feature pills nobody asked for. The red-flags table exists to make that path unavailable.

3

Decide whether the bloom needs real depth

threejs-skills · geometry, materials, lighting

Two ways to build the flower. The version embedded below is CSS and SVG only, so this page carries no dependency beyond the fonts. That is the right call for a hero that has to load fast on a phone.

If you want real depth, this is where the three.js skills earn their place. threejs-geometry for lathed petal surfaces, threejs-materials for the subsurface-ish translucency that makes a petal read as a petal instead of a pink shape, and threejs-lighting for a single warm key with soft ambient fill. Loading one subsystem skill at a time is the point: the agent gets current, specific API knowledge for the thing it is doing rather than a vague memory of the whole library.

Rule of thumb: if the 3D layer does not change what the user understands about the product, ship the CSS version.

4

Drive the reveal from scroll position

gsap-skills · scrolltrigger, performance

The demo below uses a nine-line IntersectionObserver, because one reveal at one threshold does not justify a dependency. The profile said so: single reveal at 20% viewport entry, no parallax.

Reach for ScrollTrigger the moment you need more than that. Scrubbing the bloom to scroll position, pinning the hero while the copy advances, or coordinating several timelines against one scroller are all cases where hand-rolled code starts accumulating edge cases and the skill starts paying for itself. gsap-performance is the one people skip and then regret, since it is what keeps the tween off layout-triggering properties.

5

Set the actual numbers

motion-design · duration + easing tables

Every timing value in the demo comes from a lookup, not from taste:

petal open · 900ms
Dramatic reveal band is 600–1200ms. This is the one thing on the page you are meant to watch, so it sits high in the band.
petal stagger · 45ms
Fourteen petals inside the stagger budget. Wider reads as a loading spinner; tighter and it stops reading as opening at all.
copy lines · 320ms
Card-enter band is 200–350ms. Text is support here, so it should be finished before the bloom is.
entrance easing
Entrance takes ease-out, so the motion decelerates into place. Exit would take ease-in at roughly 70% of the duration, which is 220ms here.
hover lift · 160ms
Direct-manipulation feedback stays short. Anything past ~200ms starts to feel like the button is thinking about it.
Live · scroll-triggered · 375px-safe

Series 01 · Slow Bloom

Peony
No. 4

One stem, cut at dawn, shipped in a cooled sleeve. It opens over four days on your counter.

$38 Add to cart

Fourteen petals plus a two-part core, opening on a 45ms stagger with an ease-out curve, wrapped in a nine-second sway. No library. Roughly 2KB of CSS. It respects prefers-reduced-motion by rendering the final state immediately.

bloom-hero.html · complete, standalone 
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Space+Grotesk:wght@400;500&display=swap">

<style>
:root{
  /* every value below resolves to a token in bloom.dna.json */
  --bg:#FFFDFA; --wash:#F7F2EA; --ink:#16261F; --muted:#6B7F73;
  --bloom:#EDA6B7; --pollen:#C98F2E;
  --ease-entrance:cubic-bezier(.22,1,.36,1);
  --d-line:320ms;    /* card-enter band: 200-350ms */
  --d-petal:900ms;   /* dramatic reveal band: 600-1200ms */
  --stagger:45ms;
}
*{box-sizing:border-box}
body{margin:0;background:var(--wash);color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif}

.bl-stage{max-width:920px;margin:48px auto;padding:0 20px}
.bloom{background:var(--bg);border:1px solid rgba(22,38,31,.08);border-radius:4px;
  box-shadow:0 18px 46px -28px rgba(22,38,31,.35);
  padding:44px 40px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:36px;align-items:center}

.bl-eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.bl-title{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(46px,9vw,68px);line-height:.92;letter-spacing:-.01em}
.bl-sub{margin:18px 0 0;max-width:34ch;font-size:15px;line-height:1.6;color:var(--muted)}
.bl-row{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bl-price{font-size:20px;font-weight:500}
.bl-cta{display:inline-block;padding:12px 26px;border-radius:999px;
  background:var(--ink);color:var(--bg);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.04em;
  transition:transform 160ms var(--ease-entrance),background 160ms linear}
.bl-cta:hover{transform:translateY(-2px);background:#24402F}
.bl-svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}

/* hidden until the stage enters the viewport */
.bl-petal{transform-box:view-box;transform-origin:150px 150px;opacity:0}
.bl-glow,.bl-rise{opacity:0}

.is-in .bl-petal{animation:bl-open var(--d-petal) var(--ease-entrance) both;
  animation-delay:calc(var(--i) * var(--stagger) + 120ms)}
.is-in .bl-glow{animation:bl-fade 1200ms ease-out 80ms both}
.is-in .bl-sway{transform-box:view-box;transform-origin:150px 150px;
  animation:bl-sway 9s ease-in-out 1.5s infinite alternate both}
.is-in .bl-rise{animation:bl-rise var(--d-line) var(--ease-entrance) both;
  animation-delay:calc(var(--i) * 60ms)}

@keyframes bl-open{
  from{transform:rotate(var(--a)) scale(.08);opacity:0}
  to  {transform:rotate(var(--a)) scale(1);opacity:1}}
@keyframes bl-sway{
  from{transform:rotate(-2.5deg)}
  to  {transform:rotate(2.5deg) translateY(-6px)}}
@keyframes bl-fade{to{opacity:1}}
@keyframes bl-rise{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}}

@media (max-width:720px){
  .bloom{grid-template-columns:1fr;padding:26px 22px;gap:26px}
  .bl-art{order:-1}
  .bl-svg{max-width:260px}
}
@media (prefers-reduced-motion:reduce){
  .bl-petal,.bl-glow,.bl-rise,.bl-sway{animation:none !important;opacity:1 !important}
  .bl-petal{transform:rotate(var(--a))}
  .bl-sway{transform:none}
}
</style>

<div class="bl-stage">
  <div class="bloom">
    <div class="bl-copy">
      <p class="bl-eyebrow bl-rise" style="--i:0">Series 01 &middot; Slow Bloom</p>
      <h1 class="bl-title bl-rise" style="--i:1">Peony<br>No. 4</h1>
      <p class="bl-sub bl-rise" style="--i:2">One stem, cut at dawn, shipped in a
        cooled sleeve. It opens over four days on your counter.</p>
      <div class="bl-row bl-rise" style="--i:3">
        <span class="bl-price">$38</span>
        <a class="bl-cta" href="#">Add to cart</a>
      </div>
    </div>
    <div class="bl-art">
      <svg class="bl-svg" viewBox="0 0 300 300" role="img" aria-label="A peony opening">
        <defs>
          <radialGradient id="blGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%"   stop-color="#F7D9DF" stop-opacity=".92"/>
            <stop offset="65%"  stop-color="#F7D9DF" stop-opacity=".20"/>
            <stop offset="100%" stop-color="#F7D9DF" stop-opacity="0"/>
          </radialGradient>
          <linearGradient id="blPetal" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stop-color="#FDEFF2"/>
            <stop offset="100%" stop-color="#EDA6B7"/>
          </linearGradient>
          <linearGradient id="blPetalIn" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stop-color="#F9D7DE"/>
            <stop offset="100%" stop-color="#E1849B"/>
          </linearGradient>
          <radialGradient id="blCore" cx="50%" cy="38%" r="62%">
            <stop offset="0%"   stop-color="#F6DC97"/>
            <stop offset="100%" stop-color="#C98F2E"/>
          </radialGradient>
        </defs>

        <circle class="bl-glow" cx="150" cy="150" r="142" fill="url(#blGlow)"/>

        <g class="bl-sway">
          <!-- 8 outer petals, 45deg apart -->
          <g class="bl-petal" style="--a:0deg;--i:0"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:45deg;--i:1"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:90deg;--i:2"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:135deg;--i:3"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:180deg;--i:4"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:225deg;--i:5"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:270deg;--i:6"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <g class="bl-petal" style="--a:315deg;--i:7"><ellipse cx="150" cy="92" rx="27" ry="56" fill="url(#blPetal)"/></g>
          <!-- 6 inner petals, 60deg apart, offset 22deg -->
          <g class="bl-petal" style="--a:22deg;--i:8"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <g class="bl-petal" style="--a:82deg;--i:9"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <g class="bl-petal" style="--a:142deg;--i:10"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <g class="bl-petal" style="--a:202deg;--i:11"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <g class="bl-petal" style="--a:262deg;--i:12"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <g class="bl-petal" style="--a:322deg;--i:13"><ellipse cx="150" cy="116" rx="18" ry="36" fill="url(#blPetalIn)"/></g>
          <!-- core -->
          <g class="bl-petal" style="--a:0deg;--i:14"><circle cx="150" cy="150" r="19" fill="url(#blCore)"/></g>
          <g class="bl-petal" style="--a:0deg;--i:15"><circle cx="150" cy="150" r="7.5" fill="#FDF4E0" opacity=".9"/></g>
        </g>
      </svg>
    </div>
  </div>
</div>

<script>
/* Single reveal at 20% viewport entry, exactly as the profile specified.
   Swap this for GSAP ScrollTrigger the moment you need scrub or pin. */
(function () {
  var stage = document.querySelector('.bl-stage');
  if (!stage) { return; }
  if (!('IntersectionObserver' in window)) { stage.classList.add('is-in'); return; }
  var io = new IntersectionObserver(function (entries) {
    for (var i = 0; i < entries.length; i++) {
      if (entries[i].isIntersecting) {
        entries[i].target.classList.add('is-in');
        io.unobserve(entries[i].target);
      }
    }
  }, { threshold: 0.2 });
  io.observe(stage);
})();
</script>
What to copy from this, other than the flower

The order. Identity first, as data. Then the process gate, before any markup exists. Then the heavy technical layer only if it earns its weight. Then the mechanism that drives the reveal. Then the numbers, from a table. Run it in that order and the agent never has to guess, which is the only reliable way to stop it from guessing badly.

04 The image layer

The five skills do not draw anything.

Worth being unambiguous about this, because it is the question that comes back most. The imagery in the companion story was generated with GPT Image 2 through the Higgsfield MCP. That is what actually rendered every picture in the piece. None of the five skills above produced a single pixel of it.

The two layers do different jobs and they compose cleanly:

the five skills
Structure, tokens, timing, API correctness, process. Layout, type scale, easing curves, scroll behavior, the audit at the end. All of it is code and configuration.
GPT Image 2 via Higgsfield MCP
The rendered imagery. Heroes, scene plates, anything illustrated or photographic. Called as a tool from the agent, with the image coming back as a file you place into the page.

GPT Image 2 is the default image model here, not a per-project choice. It is the one that goes on the board unless something structurally rules it out. The one gap worth memorizing: it has no 4:5 aspect ratio. Supported ratios are 1:1, 4:3, 3:4, 16:9, 9:16, 3:2 and 2:3. For a 1080×1350 feed image, render 3:4, keep every piece of text and every key element inside the central ~88% of the frame height, and center-crop to 4:5 afterward. Silently switching to a different model to get the ratio is how a set stops matching.

Practical sequence: design-dna gives you the palette and the mood, and those same values go into the image prompt so the generated art and the coded page agree on what the thing looks like. The skills tell the agent how to build. The image model tells it how to render. Neither substitutes for the other.

05 Operating order

The short version, for the next build.

design-dna
Before anything. Extract the profile, read the JSON, argue with it now while it is cheap to change.
genjutsu /paint
Second. Hand it the profile. Let it brainstorm and state a thesis before it writes a line. Do not skip the audit at the end.
threejs-*
Only if depth changes what the user understands. Load the one or two subsystem skills the scene actually needs.
gsap-*
When the motion outgrows a single observer: scrub, pin, coordinated timelines, or a framework with a lifecycle to clean up after.
motion-design
Last, and on everything. Every duration and easing value should trace to a table, including the exits.
genjutsu /cast
For a later pass, when the page exists and the motion needs to get better rather than the structure.