How to Add Automated Security (92 Rules), Playwright Browser QA, and UI Audits to Claude Code, Cursor & Codex

AI coding agents (Claude Code, Cursor, OpenAI Codex, Windsurf, and Cline) can scaffold an entire full-stack application in minutes. However, the verification loop is still mostly manual:

1. Static Security: Did the agent leak a service-role secret to a client bundle, skip webhook signature verification (constructEvent / svix.verify), or pull in a poisoned SKILL.md / .mcp.json?
2. Real Browser QA: Does npm run build pass while the actual page throws a runtime TypeError, fires a silent 500 API response, or overflows horizontally at 375px mobile width?
3. UI Craft & Accessibility: Did the agent output generic indigo-violet gradients, broken WCAG 2.1 AA / APCA contrast ratios, or inconsistent spacing tokens?

We built three zero-config, local-first open-source CLI, Agent Skill (SKILL.md), and Model Context Protocol (MCP) tools—now with native .claude-plugin, .cursor-plugin, and .codex-plugin manifests—so your coding agent can verify its own work before every commit:

• vibe-shield (Security & Supply Chain): https://github.com/avivgerz-hue/vibe-shield
• ghost-qa (Autonomous Playwright Browser QA): https://github.com/avivgerz-hue/ghost-qa
• unslop (UI Design Craft & Contrast Engine): https://github.com/avivgerz-hue/unslop

1. vibe-shield — 92-Rule Static Security & Agent Skill Scanner

GitHub: https://github.com/avivgerz-hue/vibe-shield

Run a full security audit on any repository in under a second:

npx -y @vibefoundry/vibe-shield@latest scan .

Or audit third-party SKILL.md, .cursorrules, CLAUDE.md, and .mcp.json files for prompt injection and command exfiltration:

npx -y @vibefoundry/vibe-shield@latest audit-skills .

What it catches across 8 security vectors:

• Client & Bundle Leaks: SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, and private env vars imported into client components or exposed via NEXT_PUBLIC_ / VITE_.
• Auth & Webhook Verification: Mutating API routes (POST/PUT/DELETE), Server Actions, and webhook endpoints missing raw-body HMAC signature verification (stripe.webhooks.constructEvent, svix.verify, crypto.timingSafeEqual).
• Database & RLS: Raw SQL string interpolation, ORM .raw() injection sinks, and PostgreSQL tables with Row-Level Security disabled.
• AI / LLM Sinks: Prompt injection vectors, unsanitized dangerouslySetInnerHTML on LLM output, and unbounded agent tool execution loops.
• MCP & Skill Poisoning: Hidden Unicode directional overrides, base64-encoded shell payloads, and secret exfiltration inside agent instruction files.

2. ghost-qa — Autonomous 8-Trap Playwright Browser QA

GitHub: https://github.com/avivgerz-hue/ghost-qa

Point ghost-qa at any local dev server (localhost:3000, localhost:5173, localhost:4321) or staging URL:

npx -y ghost-qa test http://localhost:3000

The 8 Browser Inspection Traps:

1. Console & PageError Trap: Captures uncaught exceptions, unhandled promise rejections, and hydration mismatches.
2. Network & API Failure Trap: Flags 4xx/5xx responses, failed fetches, and CORS errors during navigation and form interaction.
3. Layout & Responsive Geometry Trap: Tests Desktop (1440x900), Tablet (768x1024), and Mobile (375x812) viewports for horizontal overflow, overlapping elements, and touch targets smaller than 44x44px.
4. Accessibility & Keyboard Trap: Audits missing accessible labels, broken ARIA roles, and keyboard focus traps.
5. Performance & Core Web Vitals Trap: Measures LCP, CLS, FCP, and oversized assets.
6. Link & Route Integrity Trap: Crawls internal links and buttons to catch dead 404 routes.
7. SEO & Social Graph Trap: Verifies canonical tags, OpenGraph metadata, and heading hierarchy.
8. Dark / Light Theme Parity Trap: Checks for invisible text (color === backgroundColor) across theme switches.

3. unslop — 72-Rule UI Design Craft & Contrast Engine

GitHub: https://github.com/avivgerz-hue/unslop

Audit your React, Next.js, Vue, Svelte, or Tailwind CSS codebase for AI-generated design anti-patterns:

npx -y unslop-mcp audit .

What unslop enforces across 7 UI pillars:

• Color & Atmospheric Polarity: Full WCAG 2.1 AA/AAA (4.5:1 / 7:1) and APCA contrast math, flagging pure #000000 dark mode backgrounds and overused indigo/purple gradients.
• Typography & Scannable Hierarchy: Detects missing modular type scales, wide line widths (>75ch), and missing tabular-nums on data tables and KPI cards.
• Layout & Spatial Architecture: Flags Bento grid overuse, nested scroll containers, and inconsistent spacing tokens.
• 10 Studio Design Archetypes: Export ready-to-use CSS variables, Tailwind tokens, or W3C Design Tokens (DTCG) for presets like linear-precision, anthropic-warm-editorial, swiss-grid-editorial, and vercel-mono.

Adding All 3 to Your MCP Config (Claude Code, Cursor, Codex, Cline)

Or initialize rules and MCP configs automatically in any project:

npx -y @vibefoundry/vibe-shield@latest init
npx -y ghost-qa init
npx -y unslop-mcp init

If these tools help catch a bug in your project, a star on GitHub is hugely appreciated:

• 🛡️ vibe-shield: https://github.com/avivgerz-hue/vibe-shield
• 👻 ghost-qa: https://github.com/avivgerz-hue/ghost-qa
• 🎨 unslop: https://github.com/avivgerz-hue/unslop