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/charlee-x/effect-cursor-rules/responsive-design-patternsgit clone --depth 1 https://github.com/CharLEE-X/effect-cursor-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.04203 |
| Opus 5 | $0.00000 | $0.02101 |
| Sonnet 5 | $0.00000 | $0.00841 |
| Haiku 4.5 | $0.00000 | $0.00420 |
Grade A, and why
responsive-design-patterns 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 — 629 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Responsive Design Patterns
Overview
Ensure all screens look great and function properly across mobile, tablet, and desktop devices. Follow mobile-first design principles with progressive enhancement.
Mobile-First Approach
✅ CORRECT Mobile-First Design
// Start with mobile styles, then enhance for larger screens
<div className="
// Mobile (default)
px-4 py-6 text-sm space-y-4
// Tablet (sm: 640px+)
sm:px-6 sm:py-8 sm:text-base sm:space-y-6
// Desktop (lg: 1024px+)
lg:px-8 lg:py-12 lg:text-lg lg:space-y-8
// Large Desktop (xl: 1280px+)
xl:px-12 xl:py-16
">
Content
</div>
// Grid layouts - responsive columns
<div className="
grid gap-4
grid-cols-1 // Mobile: 1 column
sm:grid-cols-2 // Tablet: 2 columns
lg:grid-cols-3 // Desktop: 3 columns
xl:grid-cols-4 // Large: 4 columns
">
{items.map(item => <Card key={item.id} {...item} />)}
</div>
❌ WRONG Desktop-First Approach
// Don't start with desktop styles
<div className="
px-12 py-16 text-lg // Desktop first
lg:px-8 lg:py-12 // Then scale down
sm:px-4 sm:py-6 // Mobile last
">
Content
</div>
Responsive Typography
✅ CORRECT Typography Scaling
// Headings with proper scaling
<h1 className="
text-2xl font-bold leading-tight // Mobile
sm:text-3xl sm:leading-tight // Tablet
md:text-4xl md:leading-tight // Medium
lg:text-5xl lg:leading-tight // Desktop
xl:text-6xl xl:leading-tight // Large
">
Main Heading
</h1>
// Body text with readable line heights
<p className="
text-sm leading-relaxed // Mobile
sm:text-base sm:leading-relaxed // Tablet
lg:text-lg lg:leading-relaxed // Desktop
max-w-prose // Optimal reading width
">
Body content with proper line spacing for readability.
</p>
// Responsive text alignment
<div className="
text-center // Mobile: center
sm:text-left // Tablet+: left align
">
Content
</div>
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 · 629 lines · 4,203 tokens per session scan A a08b5ef0deaa
responsive-design-patterns is a cursor rule published in the GitHub repository CharLEE-X/effect-cursor-rules (6 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 4,203 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
cursorrules
Kortix is a React Native + Expo app built with TypeScript, NativeWind (Tailwind CSS), and a custom design system.
git-commit-attribution
Git commits must use the human developer identity only; never Cursor Agent co-authorship.
android-viewmodel
Android ViewModel conventions — StateFlow, repository abstraction, coroutines, no LiveData.
project-structure
Cursor rule "project-structure" from HeeGyeong/ComposeSample, covering project structure guide, layer structure, modularization rules, dependency rules and resource management.
cursorrules
ROLE: Android Development Expert EXPERIENCELEVEL: Advanced (10+ years) SPECIALTIES.
ios-ui-development-focus
UI/UX and SwiftUI best practices - HIG compliance, presentation APIs, layout patterns.