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-layoutgit 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-layout)<a href="https://agentmods.dev/rules/oakensoul/nextjs-cursor-prompts/component-create-layout"><img src="https://agentmods.dev/badge/rules/oakensoul/nextjs-cursor-prompts/component-create-layout.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.03389 |
| Opus 5 | $0.00000 | $0.01695 |
| Sonnet 5 | $0.00000 | $0.00678 |
| Haiku 4.5 | $0.00000 | $0.00339 |
Grade A, and why
component-create-layout 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 3d 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 — 463 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Layout Component Creation Request
Please create a new layout component following our responsive design patterns and composition standards:
🎯 LAYOUT COMPONENT CREATION OBJECTIVES:
- IMPLEMENT responsive design with mobile-first approach and breakpoint consistency
- PROVIDE flexible composition with slot-based architecture and content organization
- ENSURE accessibility with proper landmark roles and semantic structure
- INTEGRATE with NextJS patterns including app router layouts and server components
- FOLLOW project standards for performance, accessibility, and component architecture
📋 LAYOUT DEVELOPMENT METHODOLOGY:
STEP 1: Layout Planning and Architecture
Determine Layout Type and Location:
- Server Component:
src/components/server/layout/- Static layout structures, SEO-focused - Client Component:
src/components/client/layout/- Interactive layout elements - App Router Integration: Layouts that integrate with NextJS app directory structure
- Layout Categories:
- Page Layouts: Full page structure templates (
page/) - Section Layouts: Content area organization (
section/) - Navigation Layouts: Header, sidebar, footer structures (
navigation/) - Content Layouts: Article, grid, list organization (
content/)
- Page Layouts: Full page structure templates (
Layout Composition Assessment:
- Container Strategy: Fixed width, fluid, or hybrid container patterns
- Grid System: CSS Grid, Flexbox, or hybrid layout approach
- Responsive Breakpoints: Mobile, tablet, desktop, and large screen considerations
- Content Slots: Named areas for flexible content placement
STEP 2: Responsive Design System
Breakpoint Strategy:
// Define responsive breakpoint system
const breakpoints = {
xs: '0px', // Mobile portrait
sm: '640px', // Mobile landscape
md: '768px', // Tablet
lg: '1024px', // Desktop
xl: '1280px', // Large desktop
'2xl': '1536px' // Extra large
} as const;
// Responsive layout variants
interface ResponsiveLayoutProps {
/** Layout behavior on mobile */
mobile?: 'stack' | 'scroll' | 'collapse';
/** Layout behavior on tablet */
tablet?: 'stack' | 'grid' | 'sidebar';
/** Layout behavior on desktop */
desktop?: 'grid' | 'sidebar' | 'columns';
/** Maximum content width */
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
/** Padding configuration */
padding?: 'none' | 'sm' | 'md' | 'lg' | 'responsive';
}
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.
- 3d ago First seen · 463 lines · 0 tokens per session scan A e2f83984931d
component-create-layout 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,389 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
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
dev-standard
Apache Superset development standards and guidelines for Cursor IDE.
cli-error-handling
CLI command error handling patterns.
prefer-direct-imports-over-module-mocks
Prefer extracting a testable core over vi.mock / vi.resetModules when unit tests need to reach production logic entangled with config, env, or singletons.
control-plane-descriptors
Control plane descriptor and instance implementation patterns.
family-instance-domain-actions
Family instance domain action implementation patterns.