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.
git clone --depth 1 https://github.com/jalcantarab/v0-vibecodexWrote 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/jalcantarab/v0-vibecodex/styling-guidelines)<a href="https://agentmods.dev/rules/jalcantarab/v0-vibecodex/styling-guidelines"><img src="https://agentmods.dev/badge/rules/jalcantarab/v0-vibecodex/styling-guidelines.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.1 | $0.01214 | $0.01214 |
| Opus 5 | $0.00607 | $0.00607 |
| Sonnet 5 | $0.00243 | $0.00243 |
| Haiku 4.5 | $0.00121 | $0.00121 |
Grade A, and why
styling-guidelines 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 8d 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 — 177 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Styling and Design Guidelines
Tailwind CSS Usage
1. Color Palette
Use the established color system:
- Primary: Violet gradients (
from-violet-600 to-violet-500) - Secondary: Cyan accents (
bg-cyan-600) - Background: Subtle gradients (
from-violet-50 to-cyan-50) - Text: Use semantic colors (
text-foreground,text-muted-foreground)
2. Typography
// Page titles
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
// Section headings
<h2 className="text-xl font-semibold">
// Card titles
<CardTitle className="text-lg font-semibold">
// Body text
<p className="text-muted-foreground">
3. Spacing System
- Vertical spacing:
space-y-6for component groups - Grid gaps:
gap-6for grid layouts - Margins:
mb-6for section spacing - Padding:
p-6for card content
4. Gradient Patterns
// Text gradients
className="bg-gradient-to-r from-cyan-500 to-violet-500 text-transparent bg-clip-text"
// Button gradients
className="bg-gradient-to-r from-violet-600 to-violet-500 hover:from-violet-700 hover:to-violet-600"
// Background gradients
className="bg-gradient-to-br from-violet-50 to-cyan-50 dark:from-violet-950/20 dark:to-cyan-950/20"
5. Component Styling
// Card styling
<Card className="hover:bg-muted/50 transition-colors backdrop-blur-sm">
// Button styling
<Button className="bg-gradient-to-r from-violet-600 to-violet-500">
// Badge styling
<Badge className="bg-cyan-600 text-white">
Responsive Design
1. Breakpoint Strategy
- Mobile-first: Start with mobile styles
- Tablet:
md:prefix for tablet and up - Desktop:
lg:prefix for desktop and up
2. Layout Patterns
// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
// Responsive container
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
// Responsive text
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
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.
- 8d ago First seen · 177 lines · 1,214 tokens per session scan A f33e617a71c1
styling-guidelines is a cursor rule published in the GitHub repository jalcantarab/v0-vibecodex (8 stars, last pushed 1y ago), licensed MIT. It adds 1,214 tokens to every session, about $0.0061 per session on Opus 5. 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
tailwindcss
Tailwind CSS and UI component best practices for modern web applications.
nextjs
Next.js with TypeScript and Tailwind UI best practices.
external-scale
Source: docs/agents/external-scale.md Regenerate: npm run agents:sync -w packages/openbridge-webcomponents -->.
codex-premium-website-skills
Apply Codex Skills standards to frontend, website, motion, accessibility, QA, agent reasoning, and handoff work.
ui-components
USE WHEN: Building UI components, structuring layouts, and applying styles using Tailwind CSS.
ui-motion-workflow
Orchestrate motion-aware UI work by sequencing direction, provider choice, implementation, and browser validation.