css-styling

css-styling is a cursor rule for Cursor from Consensys/doc.linea. It costs 0 tokens per session (1,408 once invoked), scanned A, original, Apache-2.0.

A set of CSS rules for a Docusaurus v3 documentation site. It explains where to put design tokens, global styles, theme overrides, utilities, and component-specific styles.

In plain words
What is it for?
Use it when creating or changing Docusaurus components, layouts, theme elements, global utilities, or other user-facing styles.
Why use it?
It prevents styles from being scattered across the project and helps UI changes follow the site's existing structure.

Cursor rule for Cursor

Written for Cursor: installed under .cursor/.

Good fit Use it when creating or changing Docusaurus components, layouts, theme elements, global utilities, or other user-facing styles.

Compare 6 cursor rules from other repositories ↓
Install with agentmods
npx agentmods add rules/consensys/doc.linea/css-styling
Install

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.

Clone the repo
git clone --depth 1 https://github.com/Consensys/doc.linea

Made for: Cursor.

Wrote 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.

agentmods badge for css-styling

README.md
[![agentmods](https://agentmods.dev/badge/rules/consensys/doc.linea/css-styling/github.svg)](https://agentmods.dev/rules/consensys/doc.linea/css-styling)
Your own site
<a href="https://agentmods.dev/rules/consensys/doc.linea/css-styling"><img src="https://agentmods.dev/badge/rules/consensys/doc.linea/css-styling/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.

agentmods 80×15 button for css-styling

Your own site · 80×15
<a href="https://agentmods.dev/rules/consensys/doc.linea/css-styling"><img src="https://agentmods.dev/badge/rules/consensys/doc.linea/css-styling.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 1,408 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.01408
Opus 5.5 $0.00000 $0.00563
Sonnet 5.5 $0.00000 $0.00282
Haiku 4.5 $0.00000 $0.00141

Measured 1mo ago against content hash b370832d01b6, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

css-styling 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.

.cursor/rules/css-styling.mdc · 140 lines

How it starts

The opening of the file, as written. The whole thing — 140 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CSS and styling rules

This is a Docusaurus v3 site using Infima. The CSS is split into layers. Follow these rules for every UI change.

File structure

src/css/
  custom.css              ← Entry point (imports only, never add rules here)
  tokens.css              ← Design tokens, theme variables
  fonts.css               ← @font-face declarations
  base.css                ← Element resets (body, headings, tables)
  utilities.css           ← Utility classes used from MDX (.video-container, .img-*)
  docusaurus-overrides.css ← Navbar, sidebar, TOC, breadcrumbs, admonitions, code blocks
  vendor-overrides.css    ← Algolia DocSearch overrides

Component styles live in co-located CSS Modules (styles.module.css).

Where to put new styles

What you're styling Where it goes
A React component src/components/MyComponent/styles.module.css
A swizzled theme component src/theme/ComponentName/styles.module.css
A new design token src/css/tokens.css under :root or [data-theme]
A Docusaurus theme override (navbar, sidebar, TOC) src/css/docusaurus-overrides.css
A global utility class used in MDX src/css/utilities.css
A third-party plugin override src/css/vendor-overrides.css

Never add rules directly to custom.css. It is an import-only entry point.

Mandatory: use tokens, not hardcoded values

Brand colors (constant — use everywhere)

var(--linea-brand-navy)    /* #190066 */
var(--linea-brand-purple)  /* #6119ef */
var(--linea-brand-cyan)    /* #61dfff */
var(--linea-brand-yellow)  /* #fff068 */
var(--linea-purple-hover)  /* #8e5dff */

Theme-aware tokens (switch automatically between light/dark)

var(--linea-text-primary)    /* #121212 | #f8f7f2 */
var(--linea-text-secondary)  /* #525252 | #d1d1d1 */
var(--linea-text-muted)      /* #808080 | #808080 */
var(--linea-text-subtle)     /* #a0a0a0 | #a0a0a0 */
var(--linea-border)          /* #e5e5e5 | #333    */
var(--linea-border-subtle)   /* #e5e5e5 | #2d2d2d */
var(--linea-surface-elevated)/* #efefeb | #2f2f2f */
var(--linea-hover-bg)        /* #EFEFEB | rgba     */
var(--linea-active-color)    /* #6119ef | #a78bfa  */
var(--linea-active-bg)       /* rgba    | rgba     */

Read the full file on GitHub · 140 lines

Changes

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.

  1. 1mo ago First seen · 140 lines · 0 tokens per session scan A b370832d01b6

Subscribe to this mod's changes

css-styling is a cursor rule published in the GitHub repository Consensys/doc.linea (474 stars, last pushed 1mo ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 1,408 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-30.

Related

Other cursor rules, from other repositories

chakra-ui-best-practices

A set of rules for building React interfaces with Chakra UI, a component library for styled and accessible user interfaces. It covers themes, responsive layouts, accessibility, performance, and reusable components.

holtwood/awesome-cursorrules-zh · 0 tokens

chakra-ui---accessibility-features

An accessibility rule for React interfaces built with Chakra UI, a component library. It covers semantic HTML, screen-reader labels, keyboard navigation, focus handling, and color contrast.

holtwood/awesome-cursorrules-zh · 0 tokens

chakra-ui---responsive-design

Guidance for making Chakra UI layouts adapt to different screen sizes. It uses responsive style values, breakpoints, layout components, and conditional display rules for phones, tablets, and desktops.

holtwood/awesome-cursorrules-zh · 0 tokens

chakra-ui---theme-directory-rules

Rules for organizing a Chakra UI theme into an entry file, foundational settings, and component-specific styles. The theme controls shared colors, fonts, spacing, breakpoints, and component variants.

holtwood/awesome-cursorrules-zh · 0 tokens

chakra-ui---dark-mode-implementation

A Chakra UI rule for adding a light and dark color mode to React components. It covers switching modes, following the system preference, storing the choice, and preventing a flash of the wrong theme during loading.

holtwood/awesome-cursorrules-zh · 0 tokens

documentation

Documentation discovery index for Lineth monorepo.

LFDT-Lineth/lineth-monorepo · 489 tokens