CSEdge UI

The Handcrafted, AI-First UI Devkit for Modern Web Apps.

Import-first templates and semantic UI primitives for product pages, dashboards, SaaS apps, documentation sites, portfolios, and internal tools. Built without Tailwind or heavy UI abstraction layers so both humans and AI coding agents can work faster.

It follows a shadcn/ui-style workflow: Initialize once, then 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 templates and UI primitives:

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

Inject a specific 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 project scaffold in 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:

"Create a simple landing page using the installed components, then wire real content from my product brief."

📚 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.