Import-first portfolio templates and semantic UI primitives. Built distinctly without Tailwind CSS or massive UI abstractions to ensure perfect execution by Autonomous AI Coding Agents (Cursor, Windsurf, Copilot).

It works exactly like the shadcn/ui aesthetic workflow: Initialize once, and pull templates or UI primitives directly into your existing codebase. You own the code.

⚡️ Quick Start

You do not need to globally install anything. Run the initialization straight from your terminal:

npx @csedge-foundry/ui@latest init

List all available 20+ templates or UI primitives:

npx @csedge-foundry/ui@latest list templates
npx @csedge-foundry/ui@latest list ui

Inject a specific ecosystem template or UI primitive:

npx @csedge-foundry/ui@latest add template bento
npx @csedge-foundry/ui@latest add ui all

🏗️ The Architecture (Why We Built This)

Most modern frameworks rely on dense Abstract Syntax Trees (like Tailwind utility classes) which rapidly consume an LLM's context window.

This devkit relies on Strict Semantic Isolation:

• Zero External CSS Frameworks. Only generic CSS Custom Properties (Variables).
• Absolute Ownership. The CLI injects raw Button.jsx, Card.jsx, or sidebar.module.css into your local components directory.
• AI Rule Enforcement. Automatically scaffolds system .ai prompt hint files so agents know exactly what variables they are allowed to mutate.

📖 CLI Commands

• init → Generates your csedge.devkit.json configuration file, allowing you to define where components and templates compile.
• list templates → Shows the curated ecosystem of layouts (Monochrome, Bento, Glassmorphism, Brutalist, etc).
• list ui → Shows the catalog of pure semantic primitives.
• add template <slug> → Injects a full page template, its data model, and its renderer natively.
• add ui <name|all> → Injects the primitive logic and its associated <styleFile>.
• doctor → System check to ensure your underlying setup isn't conflicting with devkit constraints.

🤖 The AI Developer Flow

Building a portfolio in 10 seconds via Cursor:

1. Drop this into your terminal:

npx @csedge-foundry/ui@latest init --force
npx @csedge-foundry/ui@latest add template terminal --force
npx @csedge-foundry/ui@latest add ui all --force

2. Open your AI Assistant and prompt:

"Update my portfolio data file using my attached PDF resume, and render it using the Terminal Template we just pulled."

📚 Ecosystem Documentation

To view the live documentation, handcrafted components, and template showcases, clone this repository and spin up the internal docs site:

npm --prefix docs-app install
npm run docs:dev

If you are a member of the CSEdge Foundry, see the docs/contributing architecture internally for adding new UI nodes.