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 rules/kevin-liu-01/sigil-ui/frontier-stackgit clone --depth 1 https://github.com/Kevin-Liu-01/Sigil-UIWrote 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/rules/kevin-liu-01/sigil-ui/frontier-stack)<a href="https://agentmods.dev/rules/kevin-liu-01/sigil-ui/frontier-stack"><img src="https://agentmods.dev/badge/rules/kevin-liu-01/sigil-ui/frontier-stack.svg" alt="Measured on agentmods" 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 | $0.00862 | $0.00862 |
| Opus 5 | $0.00431 | $0.00431 |
| Sonnet 5 | $0.00172 | $0.00172 |
| Haiku 4.5 | $0.00086 | $0.00086 |
Grade A, and why
frontier-stack 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 4d 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 — 62 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontier Stack 2026
Imported from Kevin's wiki (
wiki/design/frontier-stack-2026.md). Default animation/3D/rendering stack and decision matrix.
Default Stack
| Layer | Tool | Why |
|---|---|---|
| Tokens & styling | Tailwind CSS v4 @theme, runtime CSS variables, OKLCH tokens |
CSS-first, theme values become runtime vars usable in CSS/JS/Motion/shaders/canvas |
| Component motion | Motion (Framer Motion) | Component entrances, layout movement, hover/press, gestures, shared layout transitions |
| Scroll storytelling | GSAP + ScrollTrigger, Lenis when needed | Pinned sections, scrubbed scenes, multi-step narratives, mixed DOM/canvas |
| 3D scenes | React Three Fiber + drei | Hero objects, immersive scenes, camera-driven storytelling, particle fields |
| Shader-first | OGL, custom GLSL/WGSL | When the material/distortion itself is the idea, less abstraction than R3F |
| App transitions | React startTransition, useTransition, useEffectEvent, experimental <ViewTransition> |
Non-blocking UI updates, route/state transitions |
| Generative UI | json-render (@json-render/core + @json-render/shadcn + @json-render/directives) |
AI generates JSON specs constrained to component catalog. Cross-platform. |
Decision Matrix
| Project Type | Stack |
|---|---|
| Marketing site with narrative | Tailwind v4 + Motion (UI) + GSAP + ScrollTrigger (story) + Lenis if sync matters |
| Premium SaaS landing | Tailwind v4 + Motion (UI, stagger, hover) + GSAP only if real narrative sequencing |
| Docs site | Tailwind v4 + Fumadocs or similar + Motion sparingly. No Lenis, no scroll theatrics |
| 3D hero / spatial product | Tailwind v4 + Motion (shell) + R3F + drei (scene) + GSAP only for shell-scene orchestration |
| Shader-heavy microsite | Tailwind v4 or minimal CSS var system + OGL or custom shaders + GSAP/Motion around edges |
| Product app transitions | Motion for layout + React startTransition / useTransition + experimental <ViewTransition> |
| AI-generated dashboards/UIs | json-render catalog + @json-render/shadcn + @json-render/directives |
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.
- 4d ago First seen · 62 lines · 862 tokens per session scan A cd88f20fb401
frontier-stack is a cursor rule published in the GitHub repository Kevin-Liu-01/Sigil-UI (9 stars, last pushed 1mo ago), licensed MIT. It adds 862 tokens to every session, about $0.0043 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 cursor rules, from other repositories
cursorrules
You have access to a design system extraction tool. When the user asks you to match a website's visual style, build UI that looks like a specific site, or create a DESIGN.md.
components
CTA: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-primary-500 text-white rounded-lg hover:bg-primary-700 cursor-pointer Sub: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-white text-slate-700 border border-slate-200 rounded-lg hover:bg-gray-50…
sheleg-design
Apply SHELEG Design when building a cinematic scroll-driven landing page, hero, or particle/WebGL scroll experience — or when styling product UI (dashboards, admin, internal tools) with its style packs.
tinted-ui-tokens-skills
Generate a brand-tinted UI design-token system (CSS) from a single brand color. No pure neutral colors.
ui-template-structure
The UI for design selection is generated using a template system defined in src/tools/templates/designSelection.ts.
registry-bases-parity
Keep registry base and radix trees in sync when editing shared UI.