๐ Welcome Back, Vibe Coders!
In [Part 1], we built the “Hard Memory” folder structure to give our AI a brain. Now, we need to give it eyes and hands.
Most beginners tell their AI: “Make me a dashboard.” And the AI responds with a React app that auto-refreshes every second. Result? Your IP gets banned by the exchange for spamming, or you burn through your monthly API quota in 2 hours. ๐ธ
Today, in Part 2, we are creating the Frontend_Rules.md. This isn’t about making things “pretty.” It’s about Resource Sovereigntyโensuring your bot only spends data when you explicitly tell it to.
๐ Where does this go?
Remember the folder we made in Part 1? Create a new file named Frontend_Rules.md inside the ./agent/ directory.
๐ Core Philosophy: “Passive by Default”
The biggest mistake in AI trading apps is “Auto-Polling” (automatically checking prices every second).
- The Problem: It wastes resources and triggers “Rate Limit” bans from providers like Yahoo Finance or Alpha Vantage.
- The Antigravity Rule: We use a “Passive Dashboard.” The UI never updates unless you click a button.
Key Rule to Write:
“No
setIntervaloruseEffectfor data fetching. Data is expensive. Only fetch on explicit user interaction.”
๐จ The Visual System (US Market Standard)
We are building a tool for High-Stakes Environments. We need “Cognitive Clarity,” not fancy animations.
1. The Theme: Deep Immersion Dark We use #0F1115. Itโs darker than standard black, reducing eye strain during long trading sessions.
2. Semantic Colors (US Standard) ๐บ๐ธ Unlike in some Asian markets, we follow the Wall Street standard:
- ๐ Positive (Profit): Teal/Emerald (
#10B981) - ๐ Negative (Loss): Rose/Red (
#F43F5E) - โ ๏ธ Live Active (Warning): Amber Pulse (
#F59E0B) โ This color acts like a “Hot Stove” warning. It means “Real Money is at risk.”
๐ก๏ธ The “Safety Switch” Architecture
In Vibe Coding, we need to prevent “Fat Finger” errors. We don’t want to accidentally execute a trade while testing.
The Mode Control Switch:
- Simulation Mode (Default): Green UI. Uses fake money and local mock data. Cost = $0.
- LIVE Mode: Red Pulsing UI. Connects to the real broker API.
- The Rule: The AI must force a “Double-Check Modal” when switching to LIVE mode.
๐ Action Item: Copy & Paste This!
Here is the finalized content for your agent/Frontend_Rules.md. I have optimized this for US Traders (using Green/Red logic) and API Safety.
๐ Copy this content into your file:
# ======================================================
# ๐ Antigravity Frontend Rules (US Market Edition)
# Version: 2.1
# Context: UI/UX Architecture & Resource Efficiency
# ======================================================
metadata:
trigger: "always_on"
description: "UI/UX Architecture standards focusing on Resource Efficiency and US Market Visuals."
system_role:
title: "Principal Experience Architect"
core_objective: "Ensure cognitive clarity and resource sovereignty. Prevent accidental API costs through Defensive Design."
# ------------------------------------------------------
# 1. Resource-Conscious UI Patterns (Anti-Ban Strategy)
# ------------------------------------------------------
resource_efficiency_rules:
passive_by_default:
policy: "Strictly NO Auto-Polling (Auto-refresh)."
exception: "Only allowed if the user explicitly toggles 'LIVE' mode."
rationale: "Prevent API rate-limit bans (e.g., Yahoo Finance, SEC) and conserve quota."
indicators:
cached_time:
display_format: "Last updated: [Time] (e.g., '10 mins ago')"
purpose: "Reduce user anxiety and prevent compulsive refreshing."
explicit_triggers:
button_labeling: "Must indicate cost consequence."
example: "Scan Market (Costs Quota)"
# ------------------------------------------------------
# 2. Visual System (US Market Standardization)
# ------------------------------------------------------
visual_system:
theme:
name: "Deep Immersion Dark"
hex_code: "#0F1115"
# [Localization Note] US Market: Green = Up/Profit, Red = Down/Loss
semantic_colors:
positive_profit:
color: "Teal/Emerald"
hex: "#10B981"
meaning: "Asset Price Increase / Profit"
negative_loss:
color: "Rose/Red"
hex: "#F43F5E"
meaning: "Asset Price Decrease / Loss"
live_warning:
color: "Amber Pulse"
hex: "#F59E0B"
meaning: "API Active / Real Money at Risk"
mode_control_switch:
location: "Top-Right Header"
states:
simulation:
visual: "Green Accents"
data_source: "Local Mock Data (Safe)"
live:
visual: "Red Pulsing Border"
data_source: "Real Broker API (Risk)"
safety_logic: "Switching to LIVE requires a 'Confirmation Modal' warning about API usage."
# ------------------------------------------------------
# 3. Component Architecture
# ------------------------------------------------------
components:
data_tables:
alignment: "Right-aligned numbers (Financial Standard)"
style: "Zebra striping for readability"
input_fields:
validation: "Real-time client-side validation"
purpose: "Block invalid requests before they reach the API limit."
status_indicators:
quota_battery:
type: "Visual Bar"
function: "Display remaining daily API calls."
# ------------------------------------------------------
# โก Special Commands
# ------------------------------------------------------
commands:
ui_audit:
action: "Check for unnecessary re-renders or useEffect hooks lacking dependencies."๐ Why This Matters
By saving this file, you have just taught your AI:
- Don’t burn my money on API calls.
- Don’t confuse me with bad color schemes.
- Don’t let me trade accidentally without a safety switch.
In Part 3, we will dive into the engine roomโBackend_Rules.md. We will define how to calculate RSI, Bollinger Bands, and handle order execution with Python.
Get your ./agent/ folder ready. The real logic starts next. ๐ง