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 TheGoat395/Codex-Skills --skill modern-site-engineeringgit clone --depth 1 https://github.com/TheGoat395/Codex-SkillsWrote 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/thegoat395/codex-skills/modern-site-engineering)<a href="https://agentmods.dev/skills/thegoat395/codex-skills/modern-site-engineering"><img src="https://agentmods.dev/badge/skills/thegoat395/codex-skills/modern-site-engineering/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/thegoat395/codex-skills/modern-site-engineering"><img src="https://agentmods.dev/badge/skills/thegoat395/codex-skills/modern-site-engineering.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00012 | $0.00670 |
| Opus 5 | $0.00006 | $0.00335 |
| Sonnet 5 | $0.00002 | $0.00134 |
| Haiku 4.5 | $0.00001 | $0.00067 |
Grade A, and why
modern-site-engineering 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 — 60 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Modern Site Engineering
Operating Mode
Inspect relevant structure, framework, entry files, styling and interaction systems, and available build commands. Proceed within existing authorization and explain material choices.
Selected stack
Retain the selected framework and existing package manager. For a new project with an unresolved choice, use route-enterprise-web-stack if installed. Otherwise, compare the actual rendering, interaction, hosting and maintenance requirements, and choose the smallest compatible stack. Select only dependencies required by the actual components. The roles below are optional capabilities, not an installation list.
Dependency Roles
- Next.js: routing, metadata, optimized images/fonts, production build.
- TypeScript: stable component contracts.
- Tailwind: fast design-system implementation with custom tokens.
- CSS variables: brand colors, spacing, shadows, easing, radii, typography.
- Motion: React-native UI motion, enter/exit, hover/tap, layout transitions.
- GSAP: timeline-driven cinematic sequences, ScrollTrigger, pinned scenes, split text, advanced scroll choreography.
- Lenis: smooth scrolling when the design calls for cinematic scroll.
- Three.js/R3F/Drei: immersive product, material, shader, or spatial scenes.
- lucide-react: icons for controls and clear commands.
- shadcn/ui: accessible component source to customize, not a default visual identity.
- Playwright: visual and interaction verification.
Build Workflow
- Inspect project and commands.
- Reuse the approved visual system; establish type, color, spacing, media and motion only when those decisions are in scope.
- Build version 1 with real content structure.
- Run the app locally when possible.
- Inspect changed visual output in the browser at the requested supported sizes.
- Correct observed spacing, type, hierarchy, interaction, motion or responsive defects on affected surfaces. Repeat checks after edits or unresolved findings, not by fixed cycle.
- Run available lint/build/test commands.
- Report files changed, commands run, and any errors honestly.
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 Changed 216a9294c10e
- 4d ago Changed · -5 lines · -74 tokens per session d0218c2f1022
- 11d ago First seen · 65 lines · 86 tokens per session scan A ddd10a7cb286
modern-site-engineering is a skill published in the GitHub repository TheGoat395/Codex-Skills (122 stars, last pushed today), licensed MIT. It adds 12 tokens to every session and 670 once invoked, about $0.0001 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-30.
Other skills, from other repositories
product-motion-design
Design, implement, audit, or repair purposeful motion for React and web interfaces, including GSAP timelines, scroll choreography, micro-interactions, and optional Three.js scenes, with cleanup, responsive behavior, reduced-motion support, and browser verification.
motion-foundations
Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or…
nextjs-shadcn
Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn…
motion-dev
Use when React animation library — spring physics, gesture animations, layout animations, scroll effects, SVG path drawing. Successor to Framer Motion. Use when building UI animations, micro-interactions, page transitions, shared element transitions, parallax effects.
design-pipeline
A build-and-test workflow for turning Figma designs into shadcn/ui components, a reusable set of interface components for React-based projects. It checks the result in a real browser at three screen sizes and runs accessibility checks.
web-typography
Expert front-end web typography — apply this whenever you are styling text on the web or making type decisions in HTML/CSS/JSX/Tailwind. Use it to choose and pair fonts, build a type scale, set body copy and headings, tune fluid/responsive type with clamp(), fix line-height, rhythm, measure and heading wraps, improve…