FrontEnd VibeCode DevKit

Stop babysitting AI. Start supervising it.

AI keeps turning simple frontend work into React apps, npm installs, and modern JavaScript you can’t ship.

You’re not doing anything wrong.
AI is just overconfident by default.

VibeCode doesn’t generate code.
It controls how AI behaves before it touches your frontend.

If you work with WordPress, static sites, legacy browsers, or no-build setups, this stops AI from fighting you.

What This Actually Is

VibeCode Frontend DevKit is a behavioral control system for AI code generation.

Not a prompt pack.
Not a framework.
Not an IDE plugin.

These files change how AI thinks before it writes or edits frontend code.
They force questions, block bad assumptions, and prevent rewrites unless you approve them.

AI behaves like a junior developer under supervision, not a confident idiot with root access.

The Problem (You Already Know This)

AI models are trained on ideal frontend code:

• React everywhere
• ES6+ by default
• npm assumed
• Build tools assumed
• Full rewrites instead of fixes

Real frontend isn’t that.

Real frontend is:

• WordPress themes that need IE11 support
• Static HTML with vanilla JS
• jQuery because that’s what the site already uses
• Vanilla CSS because there is no build step

Until now, you’ve been explaining this.

Every.
Single.
Time.

The Solution: Enforcement, Not Hope

VibeCode forces AI to respect your constraints:

• Mandatory questions - AI must ask about platform, browser support, and tooling
• Pattern blocking - React, ES6, npm are forbidden unless explicitly allowed
• No rewrites - AI modifies what exists, not rebuilds it
• Diff-only changes - see exactly what changed and why
• External memory - progress tracked in files, not AI’s unreliable head

These aren’t suggestions.

They’re gates.

If questions aren’t answered, AI cannot proceed.

What Changes (Before vs After)

Before VibeCode:

• “Add a contact form” → React component with hooks
• “Fix this jQuery bug” → Entire file rewritten in modern JS
• “Update this style” → Tailwind classes in a no-build project
• “Make it responsive” → CSS Grid without browser checks

After VibeCode:

• “Add a contact form” → “What’s your stack? Browser support? Build tools?”
• “Fix this jQuery bug” → 3-line diff showing the actual fix
• “Update this style” → Confirms existing CSS approach first
• “Make it responsive” → Asks about browser requirements before generating

AI doesn’t get creative.
It gets predictable.

What You Get

7 interconnected control files:

• Core Rules - Universal enforcement. No hallucinated APIs. Questions before code.
• Frontend Understanding - What AI gets wrong about frontend. Mandatory questions.
• Project Types - Static vs WordPress vs SPA. Defaults and forbidden patterns.
• Generator Enforcement - Code generation fails if questions aren’t answered.
• Refactor Rules - What changes require permission first.
• Debugging Protocol - Diagnose without rewriting everything.
• Task Tracking - External memory system AI actually uses.

Together, they form a single system.

How It Works

AI IDEs (Cursor, Windsurf, etc.)

1. Drop the files into your project
2. The IDE includes them automatically
3. Start coding with disciplined AI

ChatGPT / Claude / Chat Interfaces

1. Paste Core Rules into a new conversation
2. Add Frontend Understanding
3. Add the specific enforcement file you need
4. Make your request - AI is now supervised

API Usage

Include the files in your system prompt.
Start with Core, add Understanding, then task-specific enforcement.

You don’t need all files every time.
Core + Understanding covers most cases.

Who This Is For

You need this if you:

• Work on WordPress sites where AI keeps suggesting React
• Maintain static sites where AI assumes npm exists
• Support older browsers where AI writes ES6 by default
• Clean up AI code more than you use it
• Want AI to ask questions instead of making assumptions

You don’t need this if you:

• Only build modern SPAs with full build pipelines
• Never touch WordPress or static sites
• Enjoy rewriting AI’s overconfident output
• Have infinite patience explaining browser support

Real Talk

This will not make AI more creative.
It will make AI more disciplined.

You’ll get:

• Less code
• More questions
• Smaller diffs
• Fewer rewrites

Some developers want AI that impresses them.
You want AI that listens.

What You’re Actually Buying

Not a product.
A position.

The position is:

• AI should be supervised, not trusted
• Code should be minimal, not impressive
• Questions should come before answers

Most developers will keep fighting their AI.

You won’t.

Stop explaining.
Start enforcing.