Skip to main content

05 · AI GENERATION RULES

AI Hard-Constraint Checklist

Any AI (Claude Code · Cursor · Copilot …) generating code or content for POSX must satisfy every item simultaneously. Each line is a hard gate in human review.

§1

Color

  • No hardcoded HEX in .tsx; when a variable is required, use the var(--posx-*) form
  • Backgrounds / cards / borders / text use semantic tokens only (bg-background · bg-card · border-border · text-foreground)
  • Brand color via bg-primary / text-primary — auto dark-mode
  • Large gradients from the 6 approved gradients only; no improvised mixes
  • Never 2+ secondary colors (teal / gold / rose / azure) in one view
DOclassName="text-posx-purple-600"
DON'Tstyle={{ color: "#6352CE" }}
§2

Type & Layout

  • Headings font-heading (Space Grotesk) · body font-sans (Inter) · labels/figures font-mono
  • Sizes from the scale; no magic values (hero exceptions only)
  • Amounts / percentages / hashes / table figures must be tabular-nums
  • Eyebrows: text-[11px] font-mono uppercase tracking-widest
DOclassName="font-mono tabular-nums"
DON'TclassName="text-[15px]"
§3

Components

  • Buttons / cards / badges / forms / dialogs import from @/components/ui/* (shadcn); never re-implement
  • Primary CTA is always <Button> (default = brand purple); one per screen
  • Logos always via <PosxLogo>; never copy SVG paths or re-draw inline
  • Merge classes with cn()
DOimport { Button } from "@/components/ui/button"
DON'T<div className="..." onClick={...}>Button</div>
§4

Radius & Shadow

  • Radii via semantic classes rounded-sm/md/lg/xl/2xl/full (derived from --radius)
  • Shadows via shadow-xs/sm/md/lg/xl + --shadow-brand; no custom shadow colors
§5

Dark Mode

  • Prefer semantic tokens (theme-aware by default)
  • Use dark: variants when needed; conditional classes come in pairs
  • Never branch on theme in React state to swap classNames (theme managers excepted)
DOclassName="bg-card dark:bg-posx-purple-900/40"
DON'Ttheme === "dark" ? "bg-navy-800" : "bg-white"
§6

Motion

  • Entrances wrapped in <Reveal>; stagger with delay={i * 0.05}
  • Transitions via --dur-fast/base/slow + --ease-out
  • Must respect prefers-reduced-motion
  • No large motion libraries (GSAP, etc.)
§7

Accessibility

  • <button> needs type="button" (unless submitting); icon-only buttons need aria-label
  • SVG: decorative aria-hidden; semantic role="img" + aria-label
  • Forms: <label htmlFor> + aria-describedby
  • Hit targets ≥ 44×44px
§8

Files & Directories

  • New components → components/ui/* (shadcn-generated) or components/sections/*
  • Global styles / new tokens → app/globals.css, defined in both :root and .dark
  • Doc sources → numbered docs/ volumes; assets → assets/ categories
§9

Code Quality

  • TypeScript strict; no any (use unknown + type guards)
  • Props typed with type, not interface
  • Server components first; "use client" only with state / browser APIs
  • No Lorem-Ipsum placeholder residue
§10

Content Compliance (POSX-specific)

  • AI-written external copy must pass the marketing red lines (no price predictions / yield promises / multi-level referrals / implied partnerships)
  • AI imagery must be labeled "AI-assisted" and approved; prompts may not use cinematic / epic / hyperreal
  • Cited data carries Source + As-of; never invent numbers
DO$23.8T (Source: World Bank · As of 2025)
DON'T"Expected 3–5x at listing"