VIBE CODING METHODOLOGY · LESSON 8

Encode Environment Facts in Rules

Every time you start a new conversation, the AI has no idea which model to call, what timeout to use, or which framework the project uses. Hard-code these environment facts into Rules once — like giving AI a pre-filled .env reference sheet that gets injected automatically into every conversation. Both demos on this page are fully interactive.

Why Rules: If you put config in .env and let AI read it on its own, it won't always do so proactively. If you write it in the conversation, it gets truncated and forgotten as the conversation grows. Rules are loaded into context before every conversation turn — the most reliable injection method.

Interactive Demo 1 · isComposing — Try It with an IME

When a Chinese IME (input method editor) confirms a candidate word, it triggers Enter. An input field that only checks e.key === 'Enter' will send a half-composed message. Coverage of isComposing in AI training data is low — if you don't write it into a Rule, the AI will definitely forget it. Switch to a Chinese IME and try typing in the box below.

LIVE DEMO
isComposing: false(becomes true while IME is composing)
Keystroke log appears here. First type pinyin and press Enter to select a candidate, then press Enter once more — compare the two judgments. Users without a Chinese IME can just type and press Enter to observe the false case.
STANDARD PATTERN
const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey
      && !e.nativeEvent.isComposing) {
    e.preventDefault()
    handleSend()
  }
}
  • isComposing is true: IME is still composing — Enter only confirms the candidate, it does not trigger send
  • isComposing is false: direct keyboard input — Enter sends normally
  • Rule text: never check only e.key === 'Enter' without also checking isComposing
Interactive Exercise 2 · Which Format Fits This Scenario

The data-format tripartite rule: three formats, each ruling its own domain — never mixed. Click a scenario, then pick the format you think is right.

❌ JSON escape hell: JSON nested inside a string
{
  "tool": "send_message",
  "arguments": "{\"channel\": \"dev\",
    \"payload\": \"{\\\"title\\\":
      \\\"Release reminder\\\", \\\"body\\\":
      \\\"v1.4 is live\\\"}\"}"
}
✅ Same content, XML version
<tool_call name="send_message">
  <channel>dev</channel>
  <payload>
    <title>Release reminder</title>
    <body>v1.4 is live</body>
  </payload>
</tool_call>

Every nesting level in JSON doubles the backslashes — when an LLM generates token by token, it is very easy to mismatch brackets and quotes. XML tag closure is intuitive, and models make far fewer errors.

Progress: 0 / 3 scenarios

Model Configuration: Set Once, Active Every Turn
Timeout

Image generation needs at least 120–180 s

Image APIs often fail due to the default 30-second timeout, and the AI keeps retrying the same broken config. Write the HTTP client timeout into a Rule — solved once and for all.

Proxy fallback

On network failure, retry via proxy first

When a network request fails, always retry via proxy (default 127.0.0.1:7890) before reporting failure to the user. Never skip the proxy and error out directly.

Streaming

All user-visible LLM responses must stream

Every user-visible LLM response must use Streaming. Non-streaming is only permitted for internal backend calls.

Tech Stack Lock-in and Taste Rules

Stack selection is a human decision

  • Backend: FastAPI; Frontend: React + Tailwind + Vite; Database: SQLite; Vector store: Chroma
  • Once decided, stop discussing alternatives — the AI's job is to write good code within the chosen stack
  • Avoid port 5000; assign randomly from 8000–9000 so multiple projects don't conflict

Icon and detail standards

  • Never use emoji as button icons — icons must be SVG
  • Choose icon sets by product tone: SaaS → Lucide; warm/friendly tone → Tabler Icons
  • Download icons locally — do not depend on a CDN

Note: Projects that use only GPT-series models can switch tool calls back to JSON — its function calling is natively JSON. "Agents use XML" is the greatest common denominator for multi-model setups; Claude-series models perform more stably with XML format.

Classroom Exercise · 20 minutes

Deliverable: the environment configuration section of your Rule. ① List your project's environment facts: model, API provider, timeout, proxy, tech stack, database. ② Write them as a Rule section; put sensitive keys in a separate secrets file and add it to .gitignore. ③ Open a fresh conversation to verify: without any additional context, can the AI immediately state your tech stack and model configuration?

Source material: open-source repo itshen/xs_vibe_rules, rule-opensource.mdc, Chapter 1 "Model Configuration", Chapter 4 "Documentation & Design Standards", Chapter 5 "Data Format Standards", Chapter 6 "Tech Stack & Frameworks".