AI Codegen Rules for Customizer Frontend

Checklist of constraints and patterns that code-generation agents must follow when creating frontend code.
Published: 7/20/2026

This node contains mandatory rules to prevent low-quality code structures during automatic page or component creation.

  1. App.tsx must not exceed ~80 lines and contain no options or rendering logic; delegate all features to UI components (e.g. /components/UIOverlay.tsx). See Project Scaffold.
  2. Individual files must not exceed ~150 lines. Large UI panels with distinct sub-sections (e.g. tabs, headers, accessory segments) must be split into modular child components (e.g. CustomizePanel, LogoPanel, AccessorizePanel, Footer) saved in their own files under the /components/ directory. See Component Boundaries.
  3. Do NOT spread existing store state inside a patch (e.g. patch({ ...state, key: val }) is prohibited). Patch only the targeted nested fields and let the Vault deep-merge them. See Store Hook Guidelines.
  4. Do NOT wrap components inside <AircadaProvider> tags. The hosting frame handles hydration automatically. See Viewport DOM Contract.
  5. The root container element of the React overlay must use pointer-events-none to allow gestures to reach the 3D viewport canvas; interactive components must explicitly declare pointer-events-auto to restore clickability. See Viewport DOM Contract.
  6. The root page layout must use h-[100svh] or h-[100dvh] with overflow-hidden to prevent browser address-bar scroll shifting. The main screen must split viewport (40-48vh on mobile, 55vw on desktop) and options panels (scrollable internally, absolute bottom footer). See Responsive Layout Patterns.
  7. Do NOT use hardcoded event strings. Always import event names from Events in registry.generated.ts and type payloads strictly. See Event hook details.
  8. Maintain the one-component-one-file rule. Never define inline helper components in the same file for convenience. See Component Boundaries.
  9. Reference Tailwind CSS theme variables for all styles. Do NOT write arbitrary hex colors inline (e.g. bg-[#3a3a3a]) unless the token is missing and added to the CSS theme first. See Tailwind 4 Theme Integration.
SEO Title: AI Codegen Rules for Customizer Frontend
SEO Description: Coding checklist and restrictions for AI agents generating user interface views and features.
Index Alternates:codegen instructionsagent constraintslinting checklist