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 commands/farzannajipour/cursor-react-rules/create-responsive-layoutgit clone --depth 1 https://github.com/Farzannajipour/cursor-react-rulesWhat 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.02169 |
| Opus 5 | $0.00000 | $0.01085 |
| Sonnet 5 | $0.00000 | $0.00434 |
| Haiku 4.5 | $0.00000 | $0.00217 |
Grade A, and why
create-responsive-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 yesterday.
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 — 297 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Create Responsive Layout
Overview
Build mobile-first responsive layouts with Tailwind CSS that work across all device sizes.
Mobile-First Approach
Start with mobile styles, then add breakpoints for larger screens.
Tailwind Breakpoints
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px2xl: 1536px
Common Patterns
Responsive Grid
// 1 column mobile, 2 tablet, 3 desktop, 4 large desktop
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{items.map(item => (
<Card key={item.id} item={item} />
))}
</div>
Responsive Container
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">
Responsive Title
</h1>
</div>
Hide/Show Elements
// Hide on mobile, show on desktop
<div className="hidden lg:block">
Desktop sidebar
</div>
// Show on mobile, hide on desktop
<div className="block lg:hidden">
Mobile menu button
</div>
Responsive Navigation
export function Navigation() {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="bg-white shadow">
<div className="container mx-auto px-4">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<div className="flex-shrink-0">
<Logo />
</div>
{/* Desktop Navigation */}
<div className="hidden md:flex space-x-4">
<Link href="/" className="px-3 py-2 rounded hover:bg-gray-100">
Home
</Link>
<Link href="/about" className="px-3 py-2 rounded hover:bg-gray-100">
About
</Link>
<Link href="/contact" className="px-3 py-2 rounded hover:bg-gray-100">
Contact
</Link>
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setIsOpen(!isOpen)}
className="md:hidden p-2 rounded hover:bg-gray-100"
>
<MenuIcon className="w-6 h-6" />
</button>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden py-2">
<Link href="/" className="block px-4 py-2 hover:bg-gray-100">
Home
</Link>
<Link href="/about" className="block px-4 py-2 hover:bg-gray-100">
About
</Link>
<Link href="/contact" className="block px-4 py-2 hover:bg-gray-100">
Contact
</Link>
</div>
)}
</div>
</nav>
);
}
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.
- yesterday First seen · 297 lines · 0 tokens per session scan A 75dcdddaa96f
create-responsive-layout is a command published in the GitHub repository Farzannajipour/cursor-react-rules (3 stars, last pushed 7mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,169 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 commands, from other repositories
validate
Run lint and build to validate changes.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.
compose-test
Run Compose UI tests with Espresso. Verify critical user flows.
app-store-audit
Run an enterprise pre submission compliance audit on an iOS or Android app against Apple App Store and Google Play rejection rules. Pass a project path or run from the project root.
build-verify
Run the full build / test / analyze / format verification pass for this Flutter app.
apollo-status
Show the current Apollo removal migration progress.