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.5 | $0.00005 | $0.00268 |
| Sonnet 5.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 1mo 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.
- 1mo ago Changed 216a9294c10e
- 1mo ago Changed · -5 lines · -74 tokens per session d0218c2f1022
- 1mo 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 (133 stars, last pushed 4d ago), licensed MIT. It adds 12 tokens to every session and 670 once invoked, about $0.0000 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-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…
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).…
nextjs-shadcn
Builds distinctive Next.js interfaces with shadcn/ui, choosing typography, styling and purposeful visual effects for the product. Use when creating or polishing a Next.js + shadcn app, page or component, including themes, presets, backgrounds and design-system lint. Uses frontend-design for substantial visual…
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.