agentmods.dev

20-frontend-nextjs

A set of rules for building the frontend, the part of an application people see and use, with Next.js and TypeScript. It covers component structure, data access, loading and error states, accessibility, and project organization.

In plain words
What is it for?
Use it when creating or changing Next.js pages, reusable interface components, API integrations, forms, loading and error screens, and frontend tests.
Why use it?
It gives the coding agent consistent guidance for keeping interface code readable and maintainable. It helps prevent oversized components, duplicated data logic, hardcoded service addresses, and missing UI states.

Cursor rule

10 2mo ago A scan 0 tokens original MIT
View the source file aiagentwithdhruv/ai-dev-stack
Install

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.

agentmods
npx agentmods add rules/aiagentwithdhruv/ai-dev-stack/20-frontend-nextjs
Clone the repo
git clone --depth 1 https://github.com/aiagentwithdhruv/ai-dev-stack
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 264 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00264
Opus 5 $0.00000 $0.00132
Sonnet 5 $0.00000 $0.00053
Haiku 4.5 $0.00000 $0.00026

Measured 2d ago against content hash 80fe5088f37b, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

20-frontend-nextjs 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.

rules/20-frontend-nextjs.mdc · 46 lines

What it actually says

Frontend stack:

  • Next.js
  • TypeScript
  • Component-driven UI
  • API integration with backend services

Frontend rules:

  • Prefer TypeScript for all frontend logic.
  • Keep components small, reusable, and focused.
  • Keep presentation separate from business/data-fetching logic.
  • Use hooks, services, or server actions appropriately based on project style.
  • Handle loading, error, and empty states explicitly.
  • Preserve design consistency and naming consistency.

Preferred frontend structure:

  • frontend/app/
  • frontend/components/
  • frontend/features/
  • frontend/hooks/
  • frontend/lib/
  • frontend/services/
  • frontend/types/
  • frontend/tests/

UI/UX rules:

  • Use accessible markup and semantic HTML.
  • Prefer reusable design system components.
  • Avoid oversized page components.
  • Avoid embedding complex API logic directly inside visual components unless already established in the repo.

State/data rules:

  • Keep API clients centralized.
  • Normalize repeated API access patterns.
  • Handle auth state carefully.
  • Validate critical inputs on both client and server.

Do not:

  • Mix many responsibilities into one component.
  • Hardcode API URLs in components.
  • Duplicate UI patterns that should be shared.
Changes

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.

  1. 2d ago First seen · 46 lines · 0 tokens per session scan A 80fe5088f37b

Subscribe to this mod's changes

20-frontend-nextjs is a cursor rule published in the GitHub repository aiagentwithdhruv/ai-dev-stack (10 stars, last pushed 2mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 264 tokens. 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-31.

Frontendai-agentsai-codingai-developmentcursorcursor-rulesnextjs
Related

Other cursor rules, from other repositories

cursorrules

You are building an AI/ML project with Python. The project uses PyTorch for model training, handles data pipelines with proper validation, tracks experiments systematically, and follows production ML engineering practices. Code is type-hinted, tested, and reproducible.

survivorforge/cursor-rules · 2,136 tokens

cursorrules

Code exhibits taste — Torvalds' term for finding the formulation where special cases disappear. Seek representations where edge cases become impossible, the type system proves correctness, and the API guides users into the pit of success.

Kerim-Sabic/elite-engineer · 2,899 tokens

java

Modern Java: records, sealed classes, streams, virtual threads.

nedcodes-ok/cursorrules-collection · 1,083 tokens

javascript

Modern JavaScript: ES2023+, async patterns, common traps.

nedcodes-ok/cursorrules-collection · 1,250 tokens

accessibility

Accessibility: semantic HTML, ARIA, keyboard navigation, testing.

nedcodes-ok/cursorrules-collection · 1,145 tokens

cross-tool-config

Cross-tool AI config: what transfers between Cursor, Claude Code, Copilot, Windsurf, Gemini, and Codex.

nedcodes-ok/cursorrules-collection · 24 tokens