agentmods.dev

frontend

frontend is a cursor rule for Cursor from first-fluke/fullstack-starter. It costs 0 tokens per session (1,556 once invoked), scanned A, original, MIT.

A set of coding rules for React and Next.js frontends, using shared interface components, Tailwind CSS, and a lightweight feature-based project structure. It also defines rules for rendering, accessibility, and application state.

In plain words
What is it for?
It helps build React and Next.js pages, reuse interface components, organize frontend code, choose rendering methods, and connect interactive parts to APIs.
Why use it?
It reduces inconsistent components, duplicated styling, inaccessible controls, and unclear boundaries between server-side and browser-side code.

Cursor rule for Cursor

not rated 222 today A scan 0 tokens original MIT
View the source file first-fluke/fullstack-starter
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/first-fluke/fullstack-starter/frontend
Clone the repo
git clone --depth 1 https://github.com/first-fluke/fullstack-starter

Made for: Cursor.

Wrote 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.

agentmods badge for frontend

README.md
[![agentmods](https://agentmods.dev/badge/rules/first-fluke/fullstack-starter/frontend.svg)](https://agentmods.dev/rules/first-fluke/fullstack-starter/frontend)
Your own site
<a href="https://agentmods.dev/rules/first-fluke/fullstack-starter/frontend"><img src="https://agentmods.dev/badge/rules/first-fluke/fullstack-starter/frontend.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 1,556 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.01556
Opus 5 $0.00000 $0.00778
Sonnet 5 $0.00000 $0.00311
Haiku 4.5 $0.00000 $0.00156

Measured today against content hash 826e1cce3768, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend 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 today.

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.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

  • frontend — 94% identical, 3 lines differ
.cursor/rules/frontend.mdc · 82 lines

How it starts

The opening of the file, as written. The whole thing — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Coding Standards

Core Rules

  1. Component Reuse: Use shadcn/ui components first. Extend via cva variants or composition. Avoid custom CSS.
  2. Design Fidelity: Code must map 1:1 to DESIGN.md (Section 9 — Agent Prompt Guide) and Design Tokens. Resolve discrepancies before implementation.
  3. Rendering Strategy: Default to Server Components for performance. Use Client Components only for interactivity and API integration.
  4. Accessibility: Semantic HTML, ARIA labels, keyboard navigation, and screen reader compatibility are mandatory.
  5. Tool First: Check for existing solutions and tools before coding.
  6. Proxy over Middleware (BANNED): Next.js 16+ uses proxy.ts for request proxying. middleware.ts is NOT "deprecated" — it is forbidden in this project, touch it and you die. Do NOT create, recommend, suggest, or "restore" middleware.ts. Do NOT flag proxy.ts as dead code, unused, or not-wired. Do NOT demand a rename to middleware.ts. Any such finding is a fatal self-error — retract it immediately and write proxy.ts.
  7. No Prop Drilling: Avoid passing props beyond 3 levels. Use the project's client-state library (Jotai atoms or a Zustand store — see oma-frontend resources/tech-stack.md) instead. Avoid React Context.
  8. Auth Boundary: Frontend handles auth UI and token storage only. Never import database adapters, ORMs, or server-side auth libraries.
  9. Animation Library: Use motion (import from motion/react). framer-motion is the legacy package name and is BANNED — never import { motion } from 'framer-motion', never add framer-motion to package.json. Add the motion package via the project's package manager — detect from the lockfile (bun.lock → bun, pnpm-lock.yaml → pnpm, yarn.lock → yarn, package-lock.json → npm); default to bun when no lockfile exists. Import as import { motion, AnimatePresence } from 'motion/react'. Respect prefers-reduced-motion via useReducedMotion from motion/react.
  10. Framework Version: next@16+ and react@19+ are MANDATORY. When scaffolding or pinning package.json, set "next": "^16" (or higher) and "react": "^19"/"react-dom": "^19" — never pin next to ^15, ~15, or any range whose floor is below 16.0.0. If create-next-app (or any scaffold tool) produces next < 16, immediately bump it before committing. This rule is paired with Core Rule #6 (proxy.ts), which assumes Next.js 16+.

Read the full file on GitHub · 82 lines

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. today First seen · 82 lines · 0 tokens per session scan A 826e1cce3768

Subscribe to this mod's changes

frontend is a cursor rule published in the GitHub repository first-fluke/fullstack-starter (222 stars, last pushed today), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,556 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-09-03.

FrontendReactfastapifluttergcpmisemonoreponextjs
Related

Other cursor rules, from other repositories

modules

Module pattern — 8-step wiring. Applies when editing modules anywhere.

backendforth/next-sanity-starter · 0 tokens

react-query-tests

// ✅ CORRECT: Legacy React Query pattern const ctx = konn() .beforeEach(() => createAppRouter()) .afterEach((ctx) => ctx?.close?.()) .done().

trpc/trpc · 0 tokens

tanstack-react-query-tests

// ✅ CORRECT: Use await using for automatic cleanup await using ctx = testReactResource(appRouter, { server: { // server configuration }, client(opts) { return { links: [ httpLink({ url: opts.httpUrl, // client configuration }), ], }; }, }).

trpc/trpc · 0 tokens

cursorrules

Cursor rule "cursorrules" from CopilotKit/CopilotKit, covering instructions, additional command options and notes.

CopilotKit/CopilotKit · 594 tokens

cursorrules

Cursor rule "cursorrules" from module-federation/core, covering core principles and output format.

module-federation/core · 321 tokens

avoid_source_deduplication

name: avoid-source-deduplication description: Preserve unique source entries in search results to maintain proper citation tracking globs: ['/connectorservice.py', '/searchservice.py'] alwaysApply: true.

MODSetter/SurfSense · 185 tokens