The Vibe Coding Blindspot
Vibe coding is fast. You describe what you want, Cursor or Claude Code writes it, you iterate until it works, and you ship. But speed creates blindspots. When an AI writes 80% of your code, the things that get skipped aren't syntax errors — they're the structural concerns that don't show up until production.
These five rules turn your AI coding assistant into a proper development environment. Each one catches a different category of problem, and together they cover the gaps that vibe coding tends to create.
1. Linting — Keep the Code Clean
What it catches: Unused variables, implicit any types, unreachable code, deprecated API usage.
Why vibe coders need it: AI-generated code often includes unused imports, overly broad types, and patterns from older API versions. A linting rule ensures your AI assistant follows modern conventions.
Setup (ESLint for TypeScript):
// .cursor/rules or CLAUDE.md addition:
// "Always run npx eslint --fix on modified files before considering a task complete."
# Quick ESLint setup
npm init @eslint/config@latest
Rule for your AI assistant:
After modifying TypeScript/JavaScript files, run `npx eslint --fix` on the
changed files. Fix any remaining errors before marking the task as done.
Do not suppress warnings with eslint-disable comments unless the user
explicitly approves it.
2. Formatting — Consistent Style
What it catches: Inconsistent indentation, mixed quotes, trailing commas, line length violations.
Why vibe coders need it: When you're prompting in rapid succession, different AI responses produce different formatting styles. Prettier ensures the entire codebase looks like one person wrote it.
Setup:
npm install -D prettier
echo '{ "semi": true, "singleQuote": false, "trailingComma": "es5" }' > .prettierrc
Rule for your AI assistant:
Format all modified files with Prettier before completing a task.
Run: npx prettier --write <files>
Never override the project's Prettier config with inline styles.
3. Security — Catch Vulnerabilities
What it catches: Known CVEs in dependencies, insecure patterns, leaked secrets, outdated packages with security patches.
Why vibe coders need it: AI assistants don't check whether the packages they install have known vulnerabilities. A dependency added today might have a critical CVE published yesterday.
Setup:
# Built into npm — no install required
npm audit
Rule for your AI assistant:
After adding or updating dependencies, run `npm audit` and report any
vulnerabilities found. For critical or high severity issues, suggest
alternative packages or fixes before proceeding.
Never commit .env files, API keys, or credentials. If the user pastes
a secret, warn them and suggest using environment variables instead.
4. Privacy Compliance — Don't Ship Without Disclosure
What it catches: Data-collecting third-party SDKs without privacy policies, cookies without consent banners, analytics without disclosure, payment processing without data handling documentation.
Why vibe coders need it: This is the biggest blindspot in AI-assisted development. You say "add Stripe," the AI adds it, and neither of you mentions that you now need to disclose payment data processing in a privacy policy. Multiply this across analytics, auth, error tracking, and advertising SDKs, and you've built a compliance liability.
Setup for Cursor:
Create .cursor/rules/pageguard.mdc:
---
description: Privacy and compliance scanning for web apps
globs: ["package.json", "requirements.txt", "Gemfile", "go.mod", "pubspec.yaml"]
alwaysApply: false
---
# Privacy Compliance Check
When the user adds dependencies that collect user data (analytics,
payments, auth, tracking, advertising, error monitoring, email,
push notifications):
1. Flag the privacy implications
2. List what data each service collects
3. Suggest running: npx pageguard
4. Note if a privacy policy or cookie consent is needed
Full Cursor rule with detailed package lists: Cursor Privacy Compliance Rule
Setup for Claude Code:
Add to your CLAUDE.md:
## Privacy Compliance
When modifying dependency files, check if added packages collect user data.
Flag analytics, payments, auth, tracking, and advertising SDKs.
Suggest running: npx pageguard
Full Claude Code rule with example interactions: Add Compliance Scanning to Claude Code
Example scan output:
$ npx pageguard --url https://my-app.vercel.app
PageGuard Scan Results
──────────────────────
Privacy Risk Score: 62/100 (Moderate Risk)
Security Headers: 45/100
Accessibility: 78/100
Performance: 91/100
AI Readiness: 55/100
Structured Data: 30/100
Technologies Detected: 8
├── Google Analytics (analytics — sets 4 cookies)
├── Stripe.js (payment processing)
├── Firebase Auth (authentication)
├── Sentry (error tracking)
└── ... 4 more
Compliance Gaps: 5
├── CRITICAL: No privacy policy detected
├── HIGH: No cookie consent mechanism
├── HIGH: 4 third-party cookies without disclosure
├── MEDIUM: No data processing agreements referenced
└── LOW: Missing structured data markup
Full report: https://www.getpageguard.com/report?id=abc123
What makes this different from a security scan: Security tools check for CVEs in your code. Compliance scanning checks what your code does with user data — which third-party services receive personal information, whether you've disclosed it, and whether you have the legal documents to back it up.
5. Testing — Catch Regressions
What it catches: Broken functionality after refactors, edge cases in business logic, API contract changes.
Why vibe coders need it: AI-generated code can break existing features when adding new ones. A testing rule ensures your assistant writes or updates tests alongside implementation changes.
Setup (Vitest for modern projects):
npm install -D vitest
Rule for your AI assistant:
When implementing new features or modifying existing ones:
1. Write or update unit tests for the changed logic
2. Run `npx vitest run` to verify all tests pass
3. If a test fails, fix the implementation — don't modify the test
to pass unless the test itself is wrong
Test files live next to source files: component.tsx -> component.test.tsx
Bringing It All Together
The power of these rules is that they run inside your AI workflow. You don't need to remember to lint, format, audit, scan, and test. Your AI assistant does it as part of every task.
Here's a minimal setup that covers all five:
For Cursor — create .cursor/rules/dev-workflow.mdc:
---
description: Development workflow rules
globs: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
alwaysApply: true
---
After completing a task:
1. Run `npx eslint --fix` on modified files
2. Run `npx prettier --write` on modified files
3. Run `npm audit` if dependencies changed
4. Check for privacy implications if new SDKs were added (suggest npx pageguard)
5. Run `npx vitest run` if tests exist for modified code
For Claude Code — add to CLAUDE.md:
## Development Workflow
After completing implementation:
1. Lint: npx eslint --fix on changed files
2. Format: npx prettier --write on changed files
3. Security: npm audit if dependencies changed
4. Compliance: check for data-collecting SDKs, suggest npx pageguard
5. Test: npx vitest run if tests exist
Get started: Run npx pageguard --init in any project — it detects your IDE and offers to install the compliance rule automatically.
Scan your site free at getpageguard.com — six scores, 30 seconds, no signup.