modern-site-engineering
Implement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind, Motion, GSAP, Lenis, Three.js/React Three Fiber, shadcn/ui customization, responsive layouts, landing pages, portfolios, cinematic sites, luxury brand sites, Squarespace-like sites, and any frontend build where Codex should produce polished modern UI by default.
npx skills add TheGoat395/Codex-Skills --skill modern-site-engineering --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Modern Site Engineering ## Operating Mode Inspect before coding. Identify structure, framework, entry files, styling system, interaction system, and build commands. If the user has not clearly said to proceed, explain planned files before major changes. ## Preferred Stack For new projects, prefer: ```bash npx create-next-app@latest <name> --typescript --tailwind --eslint --app --src-dir npm install motion gsap lenis lucide-react clsx tailwind-merge npm install three @react-three/fiber @react-three/drei npm install -D @playwright/test ``` Use existing project tools when working inside an existing repo. Do not add major dependencies without explaining why. ## 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 scr
- Operating Mode
- Preferred Stack
- Dependency Roles
- Build Workflow
- Component Defaults
- Motion Defaults
npx create-next-app@latest <name> --typescript --tailwind --eslint --app --src-dir npm install motion gsap lenis lucide-react clsx tailwind-merge npm install three @react-three/fiber @react-three/drei npm install -D @playwright/test
What does the modern-site-engineering skill do?
Implement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind, Motion, GSAP, Lenis, Three.js/React Three Fiber, shadcn/ui customization, responsive layouts, landing pages, portfolios, cinematic sites, luxury brand sites, Squarespace-like sites, and any frontend build where Codex should produce polished modern UI by default.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill modern-site-engineering --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.