vibe-check

vibe-check is a skill for Claude Code, Codex from artttj/rapid-stack. It costs 88 tokens per session (1,399 once invoked), scanned A, original, MIT.

A user-interface review that checks visual design, usability, mobile behavior, and accessibility across eight areas.

In plain words
What is it for?
Use it after building or generating a page or component, before release, or during a design review.
Why use it?
It turns a vague feeling that a UI looks wrong into a scored list of specific problems and fixes.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/artttj/rapid-stack/vibe-check
Any agent
npx skills add artttj/rapid-stack --skill vibe-check
Clone the repo
git clone --depth 1 https://github.com/artttj/rapid-stack

Made for: Claude Code, Codex.

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 vibe-check

README.md
[![agentmods](https://agentmods.dev/badge/skills/artttj/rapid-stack/vibe-check.svg)](https://agentmods.dev/skills/artttj/rapid-stack/vibe-check)
Your own site
<a href="https://agentmods.dev/skills/artttj/rapid-stack/vibe-check"><img src="https://agentmods.dev/badge/skills/artttj/rapid-stack/vibe-check.svg" alt="Measured on agentmods" height="20"></a>
Per session 88 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,399 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00088 $0.01399
Opus 5 $0.00044 $0.00700
Sonnet 5 $0.00018 $0.00280
Haiku 4.5 $0.00009 $0.00140

Measured 4d ago against content hash 88091675c304, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

vibe-check 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 4d 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.

.opencode/skills/vibe-check/SKILL.md · 177 lines

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.

Vibe Check

Audit a UI against 8 quality dimensions. Return a scorecard with priority-ordered fixes.

When to Run

  • After building a new component or page
  • Before shipping a feature
  • When a UI "feels off" but you can't pinpoint why
  • After AI generates UI (catch AI sameness)

The 8 Dimensions

1. Design System Compliance

Values come from the system or were invented ad-hoc:

Look for Bad signal
Colors Random hex not in palette
Spacing Values off the 4px/8px grid
Typography Font sizes outside the defined scale
Radius Inconsistent border-radius values
Shadows Mix of system tokens and one-off values

2. Visual Hierarchy

Can the eye read the page in 3 seconds?

  • Headings clearly larger than body
  • CTAs stand out (color, size, or both)
  • Important content weighted above noise
  • No "wall of equal" where everything competes

3. Spacing & Rhythm

Consistent cadence, not random gaps:

  • Vertical rhythm follows a scale (8, 16, 24, 32, 48)
  • Grouped elements tighter than section breaks
  • No orphaned 5px/13px/17px values
  • Breathing room around content blocks

4. Color & Contrast

WCAG AA minimum (4.5:1 text, 3:1 large/UI):

  • Text on background meets 4.5:1
  • Interactive elements meet 3:1 against surroundings
  • Color is semantic (red = error, green = success), not decorative
  • No two accent colors fighting for attention

5. Typography

Readability and hierarchy through type:

  • Body: 14-16px, line-height 1.5+
  • Headings: clear weight step (400 body → 600 heads)
  • Monospace for numbers, IDs, codes
  • One display font max. No mixing display fonts.

6. Responsive

Works at every breakpoint:

  • Mobile (320-375): single column, touch targets 44px+
  • Tablet (768-1024): adaptive grid
  • Desktop (1024+): full layout
  • No horizontal overflow at any width
  • Text not too large on mobile

7. Interactions & States

Feels alive, not static:

  • Hover on interactive elements (color shift, shadow, scale)
  • Focus indicators visible (ring, outline)
  • Active/pressed state (scale, darken)
  • Transitions: 150-200ms micro, 300-400ms macro
  • Loading/disabled states exist

Read the full file on GitHub · 177 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. 4d ago First seen · 177 lines · 88 tokens per session scan A 88091675c304

Subscribe to this mod's changes

vibe-check is a skill published in the GitHub repository artttj/rapid-stack (2 stars, last pushed 1mo ago), licensed MIT. It adds 88 tokens to every session and 1,399 once invoked, about $0.0004 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.

Related

Other skills, from other repositories

frontend-philosophy

Visual & UI philosophy (The 5 Pillars of Intentional UI). Understand deeply to avoid "AI slop" and create distinctive, memorable interfaces.

kdcokenny/ocx · 36 tokens

ux-modern-app-feel

Use when you want a Shopify embedded app to feel modern, fast, and opinionated like Linear, Notion, Vercel, or Cron — speed-first, keyboard-first, calm UI, opinionated defaults, no-config success path. Covers keyboard shortcuts inside App Bridge, command palette patterns, micro-interactions Polaris allows, density vs…

khadinakbarlabs/shopify-app-builder · 162 tokens

Eria-a-ui

Use this skill when the user or another AI needs UI/UX design, component architecture, styling, responsive layout, or front-end design. Eria is a feminine AI specialized in clean cute UI/UX design.

KCCHDEV/coder-noey-skill · 48 tokens

web-design-guidelines

Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

HiAi-gg/hiai-opencode · 33 tokens

adobe-fonts-skill

Search Adobe Fonts (Typekit) families, create and manage web kits/projects, and return ready-to-use embed snippets plus CSS font-family values. Use when the user asks to find Adobe fonts, compare font options, set up Typekit for a website, add fonts to kits, publish kits, or generate copy/paste font embed metadata for…

alexh/adobe-fonts-skill · 86 tokens

ui-skills

Opinionated constraints for building better interfaces with agents.

lunchpaillola/lola-opencode · 14 tokens