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 agentmods add skills/12-studio/tackl/lenis-reactnpx skills add 12-Studio/Tackl --skill lenis-reactgit clone --depth 1 https://github.com/12-Studio/TacklWhat 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 | $0.00084 | $0.03038 |
| Opus 5 | $0.00042 | $0.01519 |
| Sonnet 5 | $0.00017 | $0.00608 |
| Haiku 4.5 | $0.00008 | $0.00304 |
Grade A, and why
lenis-react 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 2d 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 — 440 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Lenis Smooth Scroll — React Integration Skill
Overview
Lenis (Latin: "smooth") is a lightweight, performant smooth-scroll library by darkroom.engineering. The lenis/react sub-package provides a <ReactLenis> context provider and a useLenis hook, eliminating prop-drilling and tying the RAF loop into React's lifecycle automatically.
Package landscape (important — use the right import):
| Package | Status | Import |
|---|---|---|
lenis |
✅ Current (v1+) | import { ReactLenis, useLenis } from 'lenis/react' |
@studio-freight/lenis |
⚠️ Legacy | import Lenis from '@studio-freight/lenis' |
@studio-freight/react-lenis |
⚠️ Legacy | import { ReactLenis } from '@studio-freight/react-lenis' |
Always use the current lenis package unless the project explicitly pins to the legacy packages.
1. Installation
npm install lenis
# or
yarn add lenis
# or
pnpm add lenis
Also add Lenis's required CSS (critical for correct layout):
/* In your global CSS file */
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
Or import from the package directly:
import 'lenis/dist/lenis.css'
2. Minimal Setup (full-page scroll)
// app/layout.tsx OR src/main.tsx
import { ReactLenis } from 'lenis/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ReactLenis root>
{children}
</ReactLenis>
</body>
</html>
)
}
rootprop: Lenis hijacks the<html>scroll container (the standard full-page case).- RAF loop is managed automatically when
autoRafis not disabled.
3. Common Configuration Options
Pass options via the options prop on <ReactLenis>:
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 2d ago First seen · 440 lines · 84 tokens per session scan A 3d4e53fb7fc7
lenis-react is a skill published in the GitHub repository 12-Studio/Tackl (10 stars, last pushed 6d ago), licensed MIT. It adds 84 tokens to every session and 3,038 once invoked, about $0.0004 per session on Opus 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-08-31.
Other skills, from other repositories
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…
verify
Build/launch/drive recipe for verifying apps/docs changes at runtime (demos, docs pages, llms.txt).
mobile-web-app
Add router-agnostic, native app-like page transitions to mobile web apps with SSGOI. Explore live drill, sheet, slide, and zoom demos at https://ssgoi.dev. Use when building or improving a mobile web app's routed page structure, layouts, or transitions, or when a project uses SSGOI or an @ssgoi package.
pixel-art
Generate 2D pixel art game assets, characters, sprite sheets, background removal, and game backgrounds. Trigger for "pixel art character", "sprite sheet", "walk cycle", "game sprites", "isometric sprites", "side-scroller assets", "RPG character sprites", "idle animation", "attack animation", "jump animation", "game…
threejs
Build 3D browser apps AND games with Three.js (r150+, ES modules): scene setup, geometries, materials, lighting, animation, GLTF models, physics (Rapier/cannon-es/arcade), character controllers, follow/third-person cameras, fixed-timestep loops, post-processing, and performance/debugging. Use for 'create a three.js…