Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add anton-abyzov/vskill --skill scrollcraft-layoutgit clone --depth 1 https://github.com/anton-abyzov/vskillWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/anton-abyzov/vskill/scrollcraft-layout)<a href="https://agentmods.dev/skills/anton-abyzov/vskill/scrollcraft-layout"><img src="https://agentmods.dev/badge/skills/anton-abyzov/vskill/scrollcraft-layout/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/anton-abyzov/vskill/scrollcraft-layout"><img src="https://agentmods.dev/badge/skills/anton-abyzov/vskill/scrollcraft-layout.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00137 | $0.01193 |
| Opus 5.5 | $0.00055 | $0.00477 |
| Sonnet 5.5 | $0.00027 | $0.00239 |
| Haiku 4.5 | $0.00014 | $0.00119 |
Grade A, and why
scrollcraft-layout scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 20d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 42 lines — stays where its author put it; the contents beside it link to each section on GitHub.
scrollcraft-layout
Source: transcript of youtube.com/watch?v=QUI6Ug4cHnE (Nate Herk, "I Built The Ultimate Claude Website Design Skill", Aug 2026). Core idea: the scroll is the story. Every scroll gesture should correlate with something happening on the page, so the visitor is hooked like short-form content and keeps going. Keep the copy and the brand; change how it unfolds.
1. Interview first (2 minutes, not 20)
Answer these before touching code (from the brief or by asking):
- Vibe on two axes: premium/trusted/editorial ↔ energetic/hype, and real assets ↔ generated world. Anton's sites default to premium editorial with real photos/videos.
- The scroll journey: what should the visitor feel at second 0, 5, 20, 60? Which single thing must they remember?
- Real assets available (photos, clips, logos). Generate only fillers that match the palette (Kie/GPT Image via the kie-gemini-omni skill), never photoreal people.
- "One thing this site does that no site you have seen does."
2. Composition rules that read as premium
- Hero must not be bland: depth (layered background planes, grain, a light source), a magazine-cover lockup (name as object, one line of role, one CTA), a subtle scroll-linked zoom or parallax, real photo/video cut-out on its own layer.
- One thing at a time: long sections become pinned sequences where content swaps as you scroll (a "stage" with 3–6 beats), or horizontal scroll rails for series (career eras, products, goals).
- Numbers count up on scroll, images reveal with scroll (mask/clip), lines draw, text arrives staggered. Slow it down: a scroll-linked animation should take ~60–100 vh of scroll to complete, not 20. Fast = invisible.
- Layers: at least three planes moving at different rates (background field, mid content, foreground accents). Use
translate3donly. - Typography and spacing carry taste: display + body pairing (no Inter/Roboto/Arial/system-ui/Space Grotesk), generous whitespace, editorial hierarchy, a data voice for metrics.
- Cards get dynamic hover (tilt/glow following the pointer) but never depend on hover for meaning.
- Cut what is bland or redundant rather than animating it.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 20d ago First seen · 42 lines · 137 tokens per session scan A 5850743ea9f6
scrollcraft-layout is a skill published in the GitHub repository anton-abyzov/vskill (47 stars, last pushed today), licensed MIT. It adds 137 tokens to every session and 1,193 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-26.
Other skills, from other repositories
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
ui
Generation d'interfaces SaaS — basic, premium dark-mode, ou landing page complete. Choisir le mode selon le besoin.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
gpt-taste
Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.
gsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is…
gsap-timeline
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).