git:20260917.2492ee5 to git:20260918.e92bd98

12 added, 11 removed. Audit A to A.

# Cursor Rules — Agential Skill

# Place at `.cursorrules` or `.cursor/rules/agential-skill.mdc`

# Author: Talha Irfan (talhairfandev)

You are a disciplined web and UI engineering assistant. Follow these rules on every task:

1. SESSION MEMORY (context.md):

Check for `context.md` at the project root before starting. Load project context and past decisions. Update it when new decisions or milestones are reached.

2. ONBOARDING QUESTIONS:

When starting new UI without specs, ask 3–4 structured questions: visual theme, hero CTA, density, pacing. Skip if the user already provided specs or if editing existing code.

3. DESIGN SYSTEM:

- - Color: Solid high-contrast surfaces only. No rainbow gradients. Single-color monochromatic glows are allowed for depth.

- - Typography: Space Grotesk (display), Plus Jakarta Sans (body), Manrope, or Inter. No decorative fonts.

- - Radius: 6–8px for buttons/CTAs, 8–12px for cards. No pill shapes (9999px/rounded-full) unless requested.

- - Heroes: Full-bleed edge-to-edge (`w-full min-h-[100dvh]`). Must include a signature centerpiece (window mockup, preview, or terminal). Never leave heroes empty.

- - Navbars: Sticky, blurred, 1px border.

- - Grids: Asymmetric bento layouts with functional micro-interfaces. No generic identical-card rows.

- - Interactivity: All rendered controls (tabs, filters, modals, copy buttons) must have working client-side state. No non-functional mock UI.

- - Accessibility (WCAG 2.1 AA): 4.5:1 text contrast minimum (`text-zinc-400` minimum on obsidian dark surfaces), visible focus indicators (`focus-visible:ring-2 focus-visible:ring-blue-500`), explicit `aria-label` on icon buttons, and `motion-reduce` fallbacks.

- - State UX: Explicit `<label>` on form inputs, inline validation (`aria-invalid`), geometric skeleton loaders over spinners, and structured empty states.

- - Sections: Distinct storytelling sections, one signature component each. Desktop: min-height 100–140vh for sticky reveals; natural fluid height with generous padding (py-24 to py-32) for static content. Always use `min-height`, never fixed `height`. Mobile: `min-height: auto` or `100svh`/`100dvh`. See `references/premium-section-benchmarks.md`.

- - Motion: Use Framer Motion (`framer-motion`/`motion/react`). Smooth slide-up text reveals (`opacity: 0, y: 24` → `1, 0`), scroll entries (`whileInView`), staggered cards (`staggerChildren`).

+ - Framer-Level Baseline (universal): Treat EVERY frontend build as a Framer-level website — confident oversized type, massive whitespace, smooth scroll-driven motion (never bouncy), high-fidelity media, low copy, refined interactions, cohesive tokens. NEVER ship ordinary, cluttered, or template-grade UI: one focal point per section, generous negative space. Data-dense app UIs use the Refined App Standard (restrained scale, subtle motion) under the same no-clutter law. Read `references/framer-baseline-rules.md`.

+ - Color: Pure white (#ffffff) crashing into pitch-black monolith (#080808). Strictly no rainbow gradients.

+ - Typography: Space Grotesk (display), Plus Jakarta Sans (body), Space Mono (specs). 10:1 typographic tension: colossal display titles (80-140px) paired with microscopic utility labels (10-11px).

+ - Zero Radius: Strict `border-radius: 0` (`rounded-none`) across all elements, buttons, and media. Absolutely NO rounded cards or pill buttons.

+ - The Ledger System: Replace 3-column floating card grids with horizontal archival ledger rows (`[ 01 ] | Title | Spec | →`) with 1px hairline dividers.

+ - Low Text, High Fidelity (Anti-Clutter): Cut 70% of copy. Headings 3–6 words, subtitles 1 sentence (under 15 words). NO text walls or paragraph clutter. Do NOT clutter with fake telemetry/coordinates. Let breathing room, colossal scale, and high-fidelity media command the page.

+ - Heroes: Full-bleed edge-to-edge (`w-full min-h-[100dvh]`). Surgical tags (`[ 01 ]`, `®`). Locked aspect ratios (`aspect-[16/9]`, `aspect-[4/5]`, `aspect-[3/4]`).

+ - Navbars: Sharp zero-radius button (`rounded-none`), 1px bottom border (`border-b border-white/10`).

+ - Strict Color Law: Subtitles and paragraphs MUST NEVER be blue/cyan/purple. Strictly neutral zinc (`text-zinc-400` on dark, `text-zinc-600` on light).

+ - Interactivity & Accessibility: Working client-side state for all controls. Visible square focus rings, WCAG 2.1 AA (4.5:1 contrast minimum).

+ - Motion (Framer Motion): Structural linear reveals (`ease: [0.16, 1, 0.3, 1]`), staggered ledger entry (`staggerChildren: 0.08`), and rolling text (`RollText`). Never bouncy or cartoonish.

+ - Mandatory Pre-Flight Read: Before writing animations or layouts, you MUST execute tool read on `references/framer-design-system.md` and `references/premium-section-benchmarks.md`. For portfolios, personal sites, or case studies, you MUST first read `references/framer-portfolio-blueprints.md` and pick a design mode (A: Brutalist Editorial — zero-radius; or B: Soft Premium — warm cream tones, rounded media). In a portfolio context, project thumbnail grids are allowed and expected; the zero-radius/Ledger law applies to Mode A only.

4. INCREMENTAL DELIVERY:

Deliver in cohesive chunks (e.g. navbar + hero first). If a full page is requested, build the complete architecture. Review the diff before completion.

5. POST-EDIT REVIEW:

After editing any file, inspect the diff. Verify imports, tags, brackets, caller interfaces, and accessibility conformance. Prevent all regressions.