Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/pekral/cursor-rulesnpx agentmods add skills/pekral/cursor-rules/design-systemWrote 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/skills/pekral/cursor-rules/design-system)<a href="https://agentmods.dev/skills/pekral/cursor-rules/design-system"><img src="https://agentmods.dev/badge/skills/pekral/cursor-rules/design-system/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/pekral/cursor-rules/design-system"><img src="https://agentmods.dev/badge/skills/pekral/cursor-rules/design-system.svg" alt="Reviewed on agentmods" width="80" 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.00042 | $0.01660 |
| Opus 5.5 | $0.00017 | $0.00664 |
| Sonnet 5.5 | $0.00008 | $0.00332 |
| Haiku 4.5 | $0.00004 | $0.00166 |
Grade A, and why
design-system 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 1mo 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 — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Constraints
- Apply
@rules/laravel/filament.mdc— for custom Blade + Tailwind, create and register a custom theme; useFilament\Support\Icons\Heroiconfor icons. - Apply
@rules/laravel/livewire.mdc— keep Blade templates presentation-only; components are slim entry points. - Apply
@rules/laravel/architecture.mdcand@rules/laravel/laravel.mdcfor file placement. - Apply
@rules/security/frontend.mdif any audit fix touches output rendering or CSP. - Stack is Blade + Livewire + Alpine.js + Filament + Tailwind. No React/Vue/Next.
- Any live-URL or browser-screenshot step is OPTIONAL and tool-agnostic — never a hard dependency.
Use when
- Starting a project that needs a coherent design system.
- Auditing an existing codebase for visual consistency.
- Before a redesign — to understand what already exists.
- The UI looks "off" but the cause is unclear.
- Reviewing a PR that touches styling, Tailwind config, or a Filament theme.
This skill has three modes. Pick the one that matches the request.
Mode 1: Generate a design system
Produce a documented token set wired into Tailwind, a Filament theme, and reusable Blade/Livewire components.
Steps
- Scan existing styling for de-facto patterns:
tailwind.config.js,resources/css/app.css, Blade views underresources/views, and any Filament theme CSS. Collect every color, font, size, radius, and shadow already in use. - Extract tokens into these groups: colors (brand, neutral, semantic success/warning/danger/info), typography (font families, type scale, weights, line heights), spacing scale, border radius, shadows, breakpoints, z-index layers.
- Inspiration (optional) — if a browser tool is available you may reference real sites; never depend on it. Tokens must be derivable from the codebase alone.
- Define tokens in Tailwind config plus CSS custom properties so values stay coherent across light/dark and component states.
- Theme Filament — register a custom panel theme that consumes the same variables.
- Build reusable components as anonymous Blade components (and Livewire components where interactive state is needed) that consume the tokens — never hard-coded hex.
- Document decisions and rationale in
DESIGN.md.
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.
- 1mo ago First seen · 150 lines · 42 tokens per session scan A 4ec9a8fbfc70
design-system is a skill published in the GitHub repository pekral/cursor-rules (11 stars, last pushed 19d ago), licensed MIT. It adds 42 tokens to every session and 1,660 once invoked, about $0.0002 per session on Opus 5.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 skills, from other repositories
brand-landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established…
powergrid-theme
Create or update a PowerGrid v7 theme using the Theme abstract class, per-section token methods (layout/header/table/footer/cols/tabs plus filter/editable/toggleable), config themeoverrides, or ArrayTheme.
upgrade-theme-v6-to-v7
Migrates a v6 Theme class to the v7 architecture: a tiny struct() plus per-section token methods (layout/header/table/footer/cols/tabs + filter/editable/toggleable) with parentTheme inheritance.
align-grid
Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid…
larapilot-design
Writes HTML/CSS mockups under .larapilot/mockups/, presents and revises them with the user, and can build a custom design system for the client. Use for a mockup, landing, design-system choice, a change to existing mockups, or a client design system. Italian: mockup, prototipo visivo, design system, modifica mockup.
cecil-theme
Create, structure and package themes for Cecil (visual themes and component themes), following the conventions of the official Cecilapp/theme- repositories.