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 agentmods add skills/internet-development/nextjs-css-agent-components/build-app-pagenpx skills add internet-development/nextjs-css-agent-components --skill build-app-pagegit clone --depth 1 https://github.com/internet-development/nextjs-css-agent-componentsWrote 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/internet-development/nextjs-css-agent-components/build-app-page)<a href="https://agentmods.dev/skills/internet-development/nextjs-css-agent-components/build-app-page"><img src="https://agentmods.dev/badge/skills/internet-development/nextjs-css-agent-components/build-app-page.svg" alt="Measured on agentmods" 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 | $0.00107 | $0.03962 |
| Opus 5 | $0.00053 | $0.01981 |
| Sonnet 5 | $0.00021 | $0.00792 |
| Haiku 4.5 | $0.00011 | $0.00396 |
Grade A, and why
build-app-page 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 4d 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 — 390 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build an app page
This skill walks an empty .tsx file to a working app page that uses this repo's three-tier system correctly. The end state: a page that boots in npm run dev, renders with the right chrome and layout, has the right SEO metadata, and follows the import-tier rules from AGENTS.md.
When to use
- "Build a settings page for X"
- "Create a new dashboard for Y"
- "Add a documents page for Z"
- "Scaffold a new authenticated app screen"
- "Make a marketing landing page using our components"
- Any time the user wants a new route under
pages/that uses the design system
When NOT to use
- The user just wants to modify an existing page (use direct edits).
- The user wants a non-page React component (use the component conventions in
AGENTS.mdinstead). - The user wants App Router (
app/) page work — this repo's routes live under Pages Router (pages/). Stop and ask before introducing App Router.
Pre-flight: pin down what you're building
Before writing anything, ask yourself (or the user) four questions:
- What's the page's purpose? Marketing/landing, authenticated app screen, document viewer, dashboard, form, or gallery showcase? Each has a canonical layout pattern below.
- Does it need a session/API key? If yes, use
KeyHeaderand thegetServerSideProps→Server.setup(context)pattern (see "Authenticated app pages" below). If no, plainNavigation+getServerSidePropsreturning{ props: {} }is enough. - Does it open modals? If yes, you must render
<GlobalModalManager />and importuseModalsfrom@runtime/modals/ModalContext. - Is it a gallery showcase? If yes, you'll register it in
common/constants.tsafter writing.
Pick the page shape
Match the page to one of these canonical shapes. Each is taken straight from a working file in pages/examples/.
Shape A — Marketing / showcase page (Navigation + content + Footer)
Use when: landing pages, "show off this component" pages, content pages.
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.
- 4d ago First seen · 390 lines · 107 tokens per session scan A 8084f684d941
build-app-page is a skill published in the GitHub repository internet-development/nextjs-css-agent-components (216 stars, last pushed 17d ago), licensed MIT. It adds 107 tokens to every session and 3,962 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-30.
Other skills, from other repositories
portaljs-new-portal
Scaffold a new PortalJS data portal from a brief. Copies the canonical template from examples/portaljs-catalog and substitutes project tokens. Use when starting a brand-new data portal project from scratch.
algolia-search
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning.
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.
copilotkit-develop
Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.
copilotkit-upgrade
Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.
non-json-content-types
Handle FormData, file uploads, Blob, Uint8Array, and ReadableStream inputs in tRPC mutations. Use octetInputParser from @trpc/server/http for binary data. Route non-JSON requests with splitLink and isNonJsonSerializable() from @trpc/client. FormData and binary inputs only work with mutations (POST).