agentmods.dev

vibes-plug-frontend

vibes-plug-frontend is a cursor rule for Cursor from roedyrustam/vibes-plug. It costs 0 tokens per session (527 once invoked), scanned A, original, MIT.

Frontend rules for building web interfaces with React, Next.js, and Tailwind, including required visual states for interactive controls. They also cover keyboard focus, contrast, typography, and prohibited visual patterns.

In plain words
What is it for?
Use them when editing React or Next.js components, page layouts, and CSS styling. They help define default, hover, focus, active, and disabled states and apply the listed visual conventions.
Why use it?
They reduce inconsistent interaction feedback and accessibility gaps in user interfaces. They give agents concrete conventions for buttons, links, forms, and other controls.

Cursor rule for Cursor

Written for Cursor: installed under .cursor/.

not rated 121repo +4 yesterday A scan 0 tokens original MIT

Good fit Use them when editing React or Next.js components, page layouts, and CSS styling. They help define default, hover, focus, active, and disabled states and apply the listed visual conventions.

Compare 6 cursor rules from other repositories ↓
Install with agentmods
npx agentmods add rules/roedyrustam/vibes-plug/vibes-plug-frontend
View source ↗ roedyrustam/vibes-plug roedyrustam.github.io
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/roedyrustam/vibes-plug

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 vibes-plug-frontend

README.md
[![agentmods](https://agentmods.dev/badge/rules/roedyrustam/vibes-plug/vibes-plug-frontend/github.svg)](https://agentmods.dev/rules/roedyrustam/vibes-plug/vibes-plug-frontend)
Your own site
<a href="https://agentmods.dev/rules/roedyrustam/vibes-plug/vibes-plug-frontend"><img src="https://agentmods.dev/badge/rules/roedyrustam/vibes-plug/vibes-plug-frontend/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 vibes-plug-frontend

Your own site · 80×15
<a href="https://agentmods.dev/rules/roedyrustam/vibes-plug/vibes-plug-frontend"><img src="https://agentmods.dev/badge/rules/roedyrustam/vibes-plug/vibes-plug-frontend.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 527 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.00527
Opus 5.5 $0.00000 $0.00211
Sonnet 5.5 $0.00000 $0.00105
Haiku 4.5 $0.00000 $0.00053

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

Security

Grade A, and why

vibes-plug-frontend 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 10d 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/vibes-plug-frontend.mdc · 30 lines

What it actually says

Vibes-Plug Frontend & UI Craftsmanship (2026 Edition)

When editing frontend components, user interfaces, or styling files, Cursor AI MUST enforce these non-negotiable standards:

1. 5-State Interactive Contract

Every button, form control, navigation link, and interactive widget MUST define 5 explicit visual states:

  1. default: Crisp 1px border (border-border/50), subtle background, legible contrast.
  2. hover: Subtle brightness/surface shift (hover:bg-muted/80), immediate feedback.
  3. focus-visible: High-contrast keyboard accessibility ring (focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none).
  4. active: Pressed-down scale or elevation (active:scale-[0.98] or active:bg-muted).
  5. disabled: Unmistakable disabled visual (disabled:opacity-50 disabled:pointer-events-none).

2. Professional Visual Craft (Anti-Slop Pillar 7)

  • Banned Clichés: No generic blue-purple neon gradients, no blurred neon glow balls, no stacked translucent glassmorphism cards.
  • Pill Button Ban: Banned rounded-full on standard rectangular text buttons. Use intentional radius scale (rounded-lg or rounded-md).
  • Tabular Numerals: MUST apply tabular-nums on all currencies, statistics, tables, and counters to eliminate layout jitter.
  • Micro-Interactions: Use CSS native transitions (transition-colors duration-150 ease-out).

3. Tech Stack Conventions

  • React 19: Use useActionState, useOptimistic, use, Server Actions. No unnecessary useEffect.
  • Next.js 15: Async Request APIs (await params, await searchParams), 'use cache' directives, PPR.
  • Tailwind CSS v4: CSS-first configuration via @theme, OKLCH color spaces.
  • Accessibility: Semantic HTML (<main>, <nav>, <article>), WCAG 2.2 AA contrast, proper ARIA labels.
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. 10d ago First seen · 30 lines · 0 tokens per session scan A 171fc557be83

Subscribe to this mod's changes

vibes-plug-frontend is a cursor rule published in the GitHub repository roedyrustam/vibes-plug (121 stars, last pushed yesterday), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 527 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-10-27.

CSS and stylingFrontendLLMReactai-agentsantigravitydeveloper-toolsprompt-engineeringskills
Related

vibes-plug-frontend compared with cursor rules from other repositories

vibes-plug-frontend next to 6 cursor rules from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
vibes-plug-frontendroedyrustam/vibes-plugCursor rule121yesterdayMITA0Cursor
antd-design-systemdtyq/magicCursor rule5.1k13d agononeA0Cursor
tech-stack-guidedtyq/magicCursor rule5.1k13d agononeA1,612Cursor
ponytailDietrichGebert/ponytailCursor rule185k8d agoMITA604Cursor
angular-20angular/angularCursor rule101kyesterdayMITA0Cursor
dev-standardapache/supersetCursor rule75ktodayApache-2.0A1,147Cursor
prefer-assertions-over-defensive-checksprisma/ormCursor rule48kyesterdayApache-2.0A0Cursor