GETTING STARTED // AI & LLM

Agent Setup

Configure Cursor, Claude Code, Windsurf, and custom LLM assistants to natively recognize, import, and generate cset-ui Blueprint primitives.

2. Cursor IDE Integration (.cursor/rules)

Add a .cursor/rules/cset-ui.mdc file in your project root to enforce cset-ui primitives across all Svelte files:

markdown
# .cursor/rules/cset-ui.mdc
---
description: Enforce CSET Blueprint design system and cset-ui component usage
globs: src/**/*.{svelte,ts,js}
alwaysApply: true
---

# cset-ui Component Library Rules
- Always use official 'cset-ui' components (v0.4.0) instead of writing raw HTML buttons or modals.
- Available components: Button, Card, InputField, Select, Switch, DatePicker, Dialog, Sheet, toast, Badge, Avatar, Tabs, Pagination, Table, Accordion, Breadcrumb, Skeleton, PageHeader, ThemeToggle.
- Stylesheet: @import "cset-ui/styles.css";
- Native Svelte 5 runes: $props(), $state(), $derived(), {#snippet}.
- Docs reference: https://cset-ui-docs.cset-software.workers.dev/llms-full.txt

3. Claude Code & Agent Skills (CLAUDE.md)

Append the following instructions to CLAUDE.md for Claude Code CLI and Claude Desktop:

markdown
# Add to CLAUDE.md or .claude/skills/cset-ui/SKILL.md
## CSET UI Architecture
- UI Library: cset-ui (Svelte 5 + Tailwind CSS v4 + Bits UI)
- Never create raw buttons, inputs, or modal dialogs. Import from 'cset-ui'.
- Aesthetic: Technical Blueprint Schematic with corner-ticks and monospace eyebrow badges.
- Strictly no emojis in code or UI labels.
- LLM API index: https://cset-ui-docs.cset-software.workers.dev/llms.txt
CSET DESIGN SYSTEM // SVELTE 5
CSET DESIGN SYSTEM // SVELTE 5