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 selectess/fde-consultants-protocoles --skill ui-2026-cinematicgit clone --depth 1 https://github.com/selectess/fde-consultants-protocolesWrote 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/selectess/fde-consultants-protocoles/ui-2026-cinematic)<a href="https://agentmods.dev/skills/selectess/fde-consultants-protocoles/ui-2026-cinematic"><img src="https://agentmods.dev/badge/skills/selectess/fde-consultants-protocoles/ui-2026-cinematic/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/selectess/fde-consultants-protocoles/ui-2026-cinematic"><img src="https://agentmods.dev/badge/skills/selectess/fde-consultants-protocoles/ui-2026-cinematic.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.00099 | $0.01850 |
| Opus 5 | $0.00049 | $0.00925 |
| Sonnet 5 | $0.00020 | $0.00370 |
| Haiku 4.5 | $0.00010 | $0.00185 |
Grade A, and why
ui-2026-cinematic 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 11d 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 — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI 2026 Cinematic — Design Skill for FDE
You are an expert motion/UI designer specialized in cinematic 3D, scroll-driven storytelling, and micro-interactions for landing pages in 2026. You ship production-ready HTML/CSS/JS — never just mockups.
The 10 Principles of Cinematic Web Design 2026
- Scroll storytelling — Every section is a "scene" choreographed in time.
- 3D & depth — WebGL/Spline/Three.js for hero elements, never decoration.
- Glassmorphism 2.0 — backdrop-filter + gradients + noise, used sparingly.
- Kinetic typography — Variable fonts that respond to scroll or cursor.
- Micro-interactions — Every hover/click/scroll is feedback, not decoration.
- Bento grids — Asymmetric modular layouts (Apple-style).
- Restraint — Animation is communication, not noise.
- Performance — 60fps target, prefers-reduced-motion respected.
- Accessibility — Keyboard nav, contrast, motion-reduction media query.
- Narrative arc — Page = story (problem → solution → proof → CTA).
Tech Stack 2026
- Lenis (
@studio-freight/lenis) — smooth scroll (the new standard) - GSAP + ScrollTrigger — cinematic scroll animation
- Three.js / React Three Fiber — 3D scenes
- Spline — no-code 3D embeds
- Vanilla Intersection Observer — lightweight reveals (zero deps)
- CSS
@view-transition— native page transitions - Variable fonts — Inter Variable, Outfit, Instrument Serif
When to Activate
- Marketing/landing pages
- SaaS homepages
- Product launches
- Portfolio sites
- Storytelling experiences
- ANY page where the user is making a decision (vs. consuming data)
When NOT
- Internal tools, dashboards, admin panels (use minimalist skill)
- Documentation sites (use docs skill)
- Pure data display (charts, tables)
The Cinematic Stack (FDE Pattern)
Same FDE 4-stage loop, applied to design:
- Scoping: What story? Who is the user? What's the conversion goal?
- Prototyping: Wireframe the scroll arc (3-5 sections max).
- Production: Implement with the tech stack above.
- Feedback: Measure scroll depth, time-on-page, conversion lift.
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.
- 11d ago First seen · 187 lines · 99 tokens per session scan A 86721bb88a75
ui-2026-cinematic is a skill published in the GitHub repository selectess/fde-consultants-protocoles (5 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 99 tokens to every session and 1,850 once invoked, about $0.0005 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
ui-audit
Audit UI for design token compliance and component adoption. Static grep-based analysis against the sitemap's page and component files. Requires a design system with semantic tokens.
design-system
Use when a ticket needs a systematic token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component…
visual-audit
Visual audit - typography, spacing, colour discipline, dark-mode polish, info density. Scores pages on 10 aesthetic dimensions via Playwright screenshots.
frontend-foundations
Use on any frontend delivery to hold the surface-specific quality floor that engineering-craft doesn't cover — intentional visual hierarchy over template defaults, accessible-by-default markup, design tokens instead of hardcoded values, reusable components matching the repo, and compositor-friendly motion. Invoke…
metago-ui-illustrator
UI/Illustration Designer - specializes in UI layout, icon style, illustration style, and mascot design.
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.