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 rules/oakensoul/nextjs-cursor-prompts/component-create-navigationgit clone --depth 1 https://github.com/oakensoul/nextjs-cursor-promptsWrote 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/rules/oakensoul/nextjs-cursor-prompts/component-create-navigation)<a href="https://agentmods.dev/rules/oakensoul/nextjs-cursor-prompts/component-create-navigation"><img src="https://agentmods.dev/badge/rules/oakensoul/nextjs-cursor-prompts/component-create-navigation.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.00000 | $0.03323 |
| Opus 5 | $0.00000 | $0.01662 |
| Sonnet 5 | $0.00000 | $0.00665 |
| Haiku 4.5 | $0.00000 | $0.00332 |
Grade A, and why
component-create-navigation 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 — 481 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Navigation Component Creation Request
Please create a new navigation component following our specialized navigation patterns, routing integration, and accessibility standards.
🎯 NAVIGATION CREATION OBJECTIVES:
- IMPLEMENT accessible navigation with proper ARIA landmarks, keyboard navigation, and screen reader support
- INTEGRATE with NextJS App Router for proper routing, active states, and navigation patterns
- ENSURE responsive design with mobile-first approach and progressive enhancement
- PROVIDE intuitive UX with clear hierarchy, focus management, and interaction feedback
- FOLLOW project standards for TypeScript, testing, and component architecture
📋 NAVIGATION DEVELOPMENT METHODOLOGY:
STEP 1: Navigation Planning and Architecture
Determine Navigation Type and Location:
- Client Component:
src/components/client/navigation/- Interactive navigation with state management - Server Component:
src/components/server/layout/- Static navigation for headers and footers - Navigation Categories:
- Main Navigation: Primary site navigation (
main-nav/) - User Navigation: User-specific menus and dropdowns (
user-menu/) - Page Navigation: Breadcrumbs, pagination, step indicators (
page-nav/) - Mobile Navigation: Responsive navigation patterns (
mobile-nav/)
- Main Navigation: Primary site navigation (
Navigation Pattern Assessment:
- Header Navigation: Top-level navigation with dropdown menus
- Sidebar Navigation: Side-mounted navigation with nested items
- Breadcrumb Navigation: Hierarchical path navigation
- Mobile Navigation: Hamburger menus, drawer navigation, bottom navigation
- Dropdown Menus: Single-level and multi-level dropdown patterns
- Mega Menus: Complex dropdown navigation with rich content
STEP 2: Routing and State Design
NextJS App Router Integration:
'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
interface NavigationItem {
href: string
label: string
description?: string
children?: NavigationItem[]
external?: boolean
disabled?: boolean
}
const navigationItems: NavigationItem[] = [
{
href: '/dashboard',
label: 'Dashboard',
description: 'Overview and quick actions'
},
{
href: '/characters',
label: 'Characters',
children: [
{ href: '/characters', label: 'All Characters' },
{ href: '/characters/create', label: 'Create Character' },
{ href: '/characters/favorites', label: 'Favorites' }
]
}
]
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 · 481 lines · 0 tokens per session scan A 668cd3a799bf
component-create-navigation is a cursor rule published in the GitHub repository oakensoul/nextjs-cursor-prompts (4 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 3,323 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.
Other cursor rules, from other repositories
prototype-previewer
Build interactive prototype reviewers with synced review notes and Figma capture pages.
figma-performance
Handling large documents efficiently in the Plugin API.
7-day-nextjs-web-design-cursor
A seven-day design workflow for web products that will be built in Next.js.
principle-reinterpretation-system
デザイン原則の再解釈システム - 全体ロジック説明.
mermaid
Diagram Creator. Load when the user requests "Create a diagram".
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.