Nextjs Site Architecture Skill for Codex

Structure modern Next.js websites and landing pages. Use for App Router projects, TypeScript, metadata, fonts, images, static pages, route groups, sections, component organization, performance, SEO basics, and production-ready architecture for premium websites.

1k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

115

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/TheGoat395/Codex-Skills --skill nextjs-site-architecture

What comes with it

2 164 bytes besides the instruction

agents/openai.yaml

references/nextjs-site-architecture-guide.md

The instruction itself

5 sections, as written by the author

Next.js Site Architecture

Overview

Set a clean, maintainable Next.js foundation. Architecture should let the design stay consistent while keeping pages easy to refine.

Website Nonnegotiables

Inspect before coding: structure, framework, homepage or main entry file, styling system, JavaScript or interaction system, assets, and build commands.
Before major changes, explain planned files and wait unless the user clearly says proceed, build, create, implement, or fix.
Use existing project conventions first. Explain major new dependencies before adding them.
Never ship generic visual work: no default card grids, placeholder copy, weak type, random gradients, stock-like media, or template heroes.
Build version 1, inspect the rendered result, improve spacing, type, hierarchy, motion, media, hover states, and responsiveness, then run checks again.
Run available lint, build, and test commands when possible. Report commands, changed files, and any untested areas honestly.
Check desktop and mobile. Respect accessibility, semantic markup, focus states, and reduced-motion preferences.

Workflow

Read the user's brief and identify the website category, audience, content reality, visual references, and asset availability.
Inspect the project before editing when code exists.
Apply this skill's specific rules from references/nextjs-site-architecture-guide.md.
Explain planned files before major changes unless the user has clearly said to proceed.
Build, inspect, polish, and verify before final delivery.

Reference

Read references/nextjs-site-architecture-guide.md when this skill triggers for a concrete website build, redesign, visual review, or implementation plan.

Other skills for the same job

different authors, same section of the catalogue

Mobile Developer

by ComeOnOliver

×2

Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.

4k tokens

Apple Appstore Reviewer

by github

vendor ×1

Serves as a reviewer of the codebase with instructions on looking for Apple App Store optimizations or rejection reasons.

2k tokens

Uncertainty And Units

by K-Dense-AI

×1

Track physical units and propagate measurement uncertainty in scientific calculations using pint and uncertainties. Use for unit conversion and dimensional checking, GUM uncertainty budgets, Type A and Type B evaluation, coverage factors and expanded uncertainty, Monte Carlo propagation, significant-figure and plus-minus reporting, error propagation through curve fits, CODATA constants, auditing Python code for stripped units or broken uncertainty propagation, and order-of-magnitude plausibility checks using dimensionless groups (Reynolds, Peclet, Damkohler, Knudsen, Biot, Womersley), characteristic scales such as diffusion time or Debye length, and observed magnitude ranges. Trigger on "is this number physically reasonable", "sanity check these units", "what regime is this flow in", or a result that looks off by orders of magnitude.

Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.

3k tokens

Libsbml Network Modeling

by BioTender-max

×1

Build, read, validate, modify SBML biological network models via the libSBML Python API. SBML Levels 1–3, reactions/kinetic laws, species, rules, FBC extension for flux balance, conversion. Interoperates with COBRApy, Tellurium/RoadRunner, COPASI. Use when programmatically constructing ODE or constraint-based metabolic/signaling models in SBML.

9k tokens

Binary Re Dynamic Analysis

by ComeOnOliver

×1

Use when you need to run a binary, trace execution, or observe runtime behavior. Runtime analysis via QEMU emulation, GDB debugging, and Frida hooking - syscall tracing (strace), breakpoints, memory inspection, function interception. Keywords - "run binary", "execute", "debug", "trace syscalls", "set breakpoint", "qemu", "gdb", "frida", "strace", "watch memory

Use when reverse engineering tools are missing, not working, or need configuration. Installation guides for radare2 (r2), Ghidra, GDB, QEMU, Frida, binutils, and cross-compilation toolchains. Keywords - "install radare2", "setup ghidra", "r2 not found", "qemu missing", "tool not installed", "configure gdb", "cross-compiler

Use when first encountering an unknown binary, ELF file, executable, or firmware blob. Fast fingerprinting via rabin2 - architecture detection (ARM, x86, MIPS), ABI identification, dependency mapping, string extraction. Keywords - "what is this binary", "identify architecture", "check file type", "rabin2", "file analysis", "quick scan

5k tokens

How to use it

Copy the folder

Take thegoat395/nextjs-site-architecture from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.