DEV Community

dhicks
dhicks

Posted on • Originally published at getpageguard.com

5 IDE Rules Every Vibe Coder Needs

#iderules #cursorrules #claudecoderules #windsurfrules

Originally published at getpageguard.com

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."
Enter fullscreen mode Exit fullscreen mode 
# Quick ESLint setup
npm init @eslint/config@latest
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)