AI Integration Guide

CSEdge ui was uniquely architected for the era of Generative UI & Autonomous Coding Agents (like Cursor, Windsurf, Copilot, or Claude).

Why AI Agents Prefer This DevKit

Most modern web frameworks rely on massive utility-class systems (like Tailwind CSS) or deeply nested headless UI abstractions. These create extremely dense Abstract Syntax Trees (ASTs) that consume an LLM's context window rapidly, leading to hallucinations or broken layout logic.

1. Semantic Isolation

Because we strictly rely on native CSS modules (styles.module.css) and un-opinionated HTML boundaries, an agent mapping your component only sees semantic markup:

// Dense styling is hidden safely in the CSS module <Card className={styles.wrapper}> <SectionTitle>Experience</SectionTitle> </Card>

2. The .ai Hint Protocol

Our templates ship with embedded .ai extension files or hidden JSON payloads within the component structure. These act as strict "system prompts" outlining what variables an LLM is allowed to mutate (e.g., Theme tokens) and what is strictly off-limits (e.g., Layout geometry mapping).

Recommended System Prompt

To get the best results when generating new sections for your portfolio, append this to your agent's system prompt or .cursorrules file:

You are building within the CSEdge Portfolio Devkit. RULES: 1. Do NOT use Tailwind CSS. 2. Rely entirely on CSS Variables provided in globals.css. 3. Import primitives exclusively from @/components/ui/*. 4. Maintain 4px (var(--space-1)) spacing scales. 5. All components must be cleanly separable and semantic.

By enforcing these constraints, you ensure your portfolio remains incredibly lightweight, lightning fast, and structurally pristine.