### Install Kuat-Core Package

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

Provides commands for installing the @equal-experts/kuat-core package using different package managers.

```bash
# Using pnpm (recommended)
pnpm add @equal-experts/kuat-core

# Using npm
npm install @equal-experts/kuat-core

# Using yarn
yarn add @equal-experts/kuat-core
```

--------------------------------

### Install Kuat-Core and Shadcn CLI (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

Installs the kuat-core package and initializes the shadcn/ui CLI for component management in a React project.

```bash
# 1. Install kuat-core
pnpm add @equal-experts/kuat-core

# 2. Initialize shadcn
npx shadcn@latest init

# 3. Install components as needed
npx shadcn@latest add button dialog
```

--------------------------------

### Running Kuat Test Consumer App (Bash)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/verification.md

Commands to set up and run a minimal React test application that demonstrates the integration of kuat-core design tokens with shadcn components. This includes installing dependencies and starting the development server.

```bash
cd apps/test-consumer-react
pnpm install
pnpm dev
```

--------------------------------

### Install Tailwind CSS and Vite Plugin

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

Installs Tailwind CSS and its Vite plugin, necessary for Tailwind CSS integration.

```bash
pnpm add -D tailwindcss@^4.0.0 @tailwindcss/vite
```

--------------------------------

### Initialize shadcn/ui (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Initializes the shadcn/ui component library in your React project. This command sets up the necessary configuration files and directory structure for shadcn/ui components, allowing you to add them to your project.

```bash
npx shadcn@latest init
```

--------------------------------

### Install kuat-core (React & Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Installs the core Kuat Design System package, which provides design tokens and theming capabilities. This is a foundational step for both React and Vue projects.

```bash
pnpm add @equal-experts/kuat-core
```

--------------------------------

### Card Padding Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Demonstrates different padding levels for cards using Kuat Design System spacing utilities. Includes standard, compact, and spacious card examples.

```tsx
// Standard card padding
<div className="bg-card border border-border rounded-lg p-6">
  <h3>Card Title</h3>
  <p>Card content</p>
</div>

// Small card
<div className="bg-card border border-border rounded-lg p-4">
  Compact card
</div>

// Large card
<div className="bg-card border border-border rounded-lg p-8">
  Spacious card
</div>
```

--------------------------------

### Divider Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/borders.md

Demonstrates how to create horizontal and vertical dividers using Tailwind CSS border utilities. Includes examples for spacing and alignment.

```tsx
// Horizontal divider
<div className="border-t border-border my-6"></div>

// Vertical divider
<div className="border-l border-border pl-6"></div>
```

--------------------------------

### Grid Layout Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Shows different grid layouts with varying column counts and gap sizes using Kuat Design System's grid utilities. Includes standard, tight, and spacious grid examples.

```tsx
// Standard grid
<div className="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

// Tight grid
<div className="grid grid-cols-4 gap-2">
  {/* items */}
</div>

// Spacious grid
<div className="grid grid-cols-2 gap-6">
  {/* items */}
</div>
```

--------------------------------

### Install Kuat Core and shadcn/ui Components

Source: https://context7.com/equalexperts/kuat-agent-rules/llms.txt

Steps to install the core Kuat theming package and initialize/add shadcn/ui components in a React project. This sets up the foundational styling and component library.

```bash
# Step 1: Install kuat-core
pnpm add @equal-experts/kuat-core

# Step 2: Initialize shadcn (React)
npx shadcn@latest init

# Step 3: Install shadcn components as needed
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

# Step 4: (Optional) Install Kuat custom components
pnpm add @equal-experts/kuat-react
```

--------------------------------

### Button Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Provides examples of different button sizes (small, standard, large) using Kuat Design System's padding utilities. Demonstrates how padding affects button dimensions.

```tsx
// Small button
<button className="px-3 py-1.5 bg-primary text-primary-foreground rounded-[6px]">
  Small
</button>

// Standard button
<button className="px-4 py-2 bg-primary text-primary-foreground rounded-[6px]">
  Standard
</button>

// Large button
<button className="px-6 py-3 bg-primary text-primary-foreground rounded-[6px]">
  Large
</button>
```

--------------------------------

### Configure Grid Gaps

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/css/spacing.md

Shows how to set the gap between grid items using CSS. Includes examples for standard, tight, and spacious grid layouts.

```css
/* Standard grid */
.grid {
  display: grid;
  gap: 1rem; /* 16px - equivalent to gap-4 */
}

/* Tight grid */
.grid-tight {
  gap: 0.5rem; /* 8px - equivalent to gap-2 */
}

/* Spacious grid */
.grid-spacious {
  gap: 1.5rem; /* 24px - equivalent to gap-6 */
}
```

--------------------------------

### Initialize shadcn-vue (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Initializes the shadcn-vue component library in your Vue project. This command sets up the necessary configuration and structure for shadcn-vue components, enabling their integration into your Vue application.

```bash
npx shadcn-vue@latest init
```

--------------------------------

### Flex Layout Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Illustrates common flexbox layouts with spacing using Kuat Design System's `flex` and `gap-*` utilities. Examples include button groups and navigation bars.

```tsx
// Button group
<div className="flex gap-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

// Navigation
<nav className="flex items-center gap-6">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
```

--------------------------------

### Basic CSS Color Usage with Variables

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/css/colours.md

Demonstrates fundamental CSS color usage with Kuat Design System variables for backgrounds and foregrounds. Includes examples for primary, secondary, and destructive buttons.

```css
/* Basic color usage */
.container {
  background-color: var(--background);
  color: var(--foreground);
}

/* Primary button */
.button-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover {
  opacity: 0.9;
}

/* Secondary button */
.button-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

/* Destructive button */
.button-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}
```

--------------------------------

### Section Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Shows how to apply vertical spacing between distinct sections on a page using Kuat Design System's `space-y-*` utility. Includes examples for section titles and content.

```tsx
// Page with section spacing
<div className="space-y-8">
  <section>
    <h2 className="text-2xl font-bold mb-4">Section Title</h2>
    <p>Content</p>
  </section>
  <section>
    <h2 className="text-2xl font-bold mb-4">Another Section</h2>
    <p>More content</p>
  </section>
</div>
```

--------------------------------

### Complete Layout Spacing Example

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/css/spacing.md

An example combining various spacing and layout properties to structure a complete page layout, including headers, content grids, and cards.

```css
.page {
  padding: 1.5rem; /* 24px */
}

.page-header {
  margin-bottom: 2rem; /* 32px */
}

.page-title {
  margin-bottom: 0.5rem; /* 8px */
}

.page-description {
  color: var(--muted-foreground);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* 16px */
}

.card {
  padding: 1.5rem; /* 24px */
  border: 1px solid var(--border);
}

.card-title {
  margin-bottom: 1rem; /* 16px */
}

.card-actions {
  margin-top: 1rem; /* 16px */
  display: flex;
  gap: 0.5rem; /* 8px */
}
```

--------------------------------

### Apply Spacing to Layout Sections

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/css/spacing.md

Demonstrates how to apply vertical spacing between different types of layout sections using margins. Includes examples for page sections, content sections, and tight sections.

```css
/* Page sections */
.section + .section {
  margin-top: 3rem; /* 48px - equivalent to space-y-12 */
}

/* Content sections */
.content-section + .content-section {
  margin-top: 2rem; /* 32px - equivalent to space-y-8 */
}

/* Tight sections */
.tight-section + .tight-section {
  margin-top: 1rem; /* 16px - equivalent to space-y-4 */
}
```

--------------------------------

### Basic Borders in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/borders.md

Demonstrates how to apply basic borders and emphasized borders using Tailwind CSS classes. Includes an example of a focus ring for interactive elements.

```tsx
// 1px default border
<div className="border border-border">Content</div>

// 2px emphasized border
<div className="border-2 border-primary">Important content</div>

// Focus ring (4px)
<button className="focus:ring-4 focus:ring-ring">Button</button>
```

--------------------------------

### React Link Color Example with Tailwind CSS

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/colours.md

Provides an example of styling links in React using Kuat Design System's primary color and Tailwind CSS for hover effects, demonstrating how to create clickable text elements.

```tsx
<a href="#" className="text-primary hover:underline">
  Link text
</a>
```

--------------------------------

### List Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Demonstrates how to apply vertical spacing between list items using Kuat Design System's `space-y-*` utility. This ensures consistent spacing in unordered lists.

```tsx
<ul className="space-y-4">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
```

--------------------------------

### Good vs Bad Spacing Practices in Vue

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/vue/spacing.md

Highlights the recommended approach for applying spacing in Vue.js using Kuat Design System's predefined scale (good example) versus arbitrary values (bad example). This promotes consistency and maintainability.

```vue
<template>
  <!-- ✅ Good: Using spacing scale -->
  <div class="bg-card p-6 mb-4">
    <h3 class="mb-4">Title</h3>
    <p class="mb-4">Content</p>
  </div>
</template>

<!-- ❌ Bad: Arbitrary values - DON'T DO THIS -->
<template>
  <div class="bg-card p-[13px] mb-[7px]">
    <h3 class="mb-[11px]">Title</h3>
    <p class="mb-[9px]">Content</p>
  </div>
</template>
```

--------------------------------

### Spacing vs Borders Best Practices in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/borders.md

Compares the preferred use of spacing for element separation versus the less preferred use of borders. Provides examples of good and bad practices.

```tsx
// ✅ Good: Using spacing for separation (preferred)
<div className="space-y-8">
  <section>
    <h2 className="text-2xl font-bold mb-4">Section Title</h2>
    <p>Content here</p>
  </section>
  <section>
    <h2 className="text-2xl font-bold mb-4">Another Section</h2>
    <p>More content</p>
  </section>
</div>

// ❌ Avoid: Unnecessary borders when spacing is sufficient
<div>
  <section className="border-b pb-6">
    <h2>Section Title</h2>
  </section>
  <section className="pt-6">
    <h2>Another Section</h2>
  </section>
</div>
```

--------------------------------

### Focus Rings in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/borders.md

Shows how to implement focus rings for interactive elements like buttons using Tailwind CSS. This example includes ring color, width, and offset.

```tsx
<button className="bg-primary text-primary-foreground rounded-[6px] px-4 py-2 focus:ring-2 focus:ring-ring focus:ring-offset-2">
  Focusable Button
</button>
```

--------------------------------

### Implement Dividers in Vue

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/vue/borders.md

Shows how to create horizontal and vertical dividers in Vue using Kuat Design System border utility classes. These examples demonstrate simple line separators for layout.

```vue
<template>
  <!-- Horizontal divider -->
  <div class="border-t border-border my-6"></div>

  <!-- Vertical divider -->
  <div class="border-l border-border pl-6"></div>
</template>
```

--------------------------------

### Form Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Illustrates consistent vertical spacing within a form using Kuat Design System's `space-y-*` utility. Shows spacing for labels, inputs, and buttons.

```tsx
// Form with consistent spacing
<form className="space-y-4">
  <div>
    <label className="block mb-2">Label</label>
    <input className="w-full px-3 py-2 border border-input rounded-[4px]" />
  </div>
  <div>
    <label className="block mb-2">Another Label</label>
    <input className="w-full px-3 py-2 border border-input rounded-[4px]" />
  </div>
  <button className="px-4 py-2 bg-primary text-primary-foreground rounded-[6px]">
    Submit
  </button>
</form>
```

--------------------------------

### Install Kuat Custom Components (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Installs the Kuat Vue components library, providing custom components such as ButtonGroup. These are intended for use alongside shadcn components and are imported separately.

```bash
pnpm add @equal-experts/kuat-vue
```

--------------------------------

### Install Kuat Custom Components (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Installs the Kuat React components library, which includes custom components like ButtonGroup. These are used in conjunction with shadcn components and are imported separately.

```bash
pnpm add @equal-experts/kuat-react
```

--------------------------------

### Add shadcn-vue Components (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Installs individual shadcn-vue components into your Vue project. You can add components like 'button' and 'dialog' as needed. These components will be placed in your project's UI components directory.

```bash
npx shadcn-vue@latest add button
npx shadcn-vue@latest add dialog
# ... etc
```

--------------------------------

### Add shadcn/ui Components (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Installs individual shadcn/ui components into your React project. You can add components like 'button', 'dialog', 'dropdown-menu', etc., as needed. These components will be copied into your project's components directory.

```bash
# Install components as needed
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
# ... etc
```

--------------------------------

### Use Kuat ButtonGroup with shadcn Button (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Demonstrates how to use the Kuat ButtonGroup component along with shadcn Button components in a React application. This example shows the composition of Kuat's layout component with shadcn's styled button.

```tsx
// Only import custom components, not standard ones
import { ButtonGroup, ButtonGroupText } from '@equal-experts/kuat-react';
import { Button } from '@/components/ui/button'; // Your shadcn copy

function Example() {
  return (
    <ButtonGroup>
      <Button>Option A</Button>
      <Button>Option B</Button>
      <Button>Option C</Button>
    </ButtonGroup>
  );
}
```

--------------------------------

### Use Kuat ButtonGroup with shadcn Button (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Illustrates the usage of the Kuat ButtonGroup component combined with shadcn Button components within a Vue application. This example showcases how to integrate Kuat's layout component with shadcn's styled buttons.

```vue
<script setup lang="ts">
import { ButtonGroup, ButtonGroupText } from '@equal-experts/kuat-vue';
import { Button } from '@/components/ui/button';
</script>

<template>
  <ButtonGroup>
    <Button>Option A</Button>
    <Button>Option B</Button>
  </ButtonGroup>
</template>
```

--------------------------------

### React Component Examples from Kuat Design System

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/README.md

This snippet demonstrates how to import and use custom React components provided by the '@equal-experts/kuat-react' package. These components are built using the Kuat Design System's principles and are designed to be easily themed using 'kuat-core'. The example shows a basic ButtonGroup usage, highlighting the integration of Kuat's design tokens and patterns within a React application.

```javascript
import ButtonGroup from '@equal-experts/kuat-react/ButtonGroup';

// Example usage:
<ButtonGroup buttons={[
  { label: 'Option 1', onClick: () => console.log('Option 1 clicked') },
  { label: 'Option 2', onClick: () => console.log('Option 2 clicked') },
]} />
```

--------------------------------

### Spacing System Examples (React/TSX)

Source: https://context7.com/equalexperts/kuat-agent-rules/llms.txt

Demonstrates the application of an 8-point grid system for consistent spacing in various UI elements like cards, buttons, forms, and layouts. It shows how different padding and gap utilities create visual hierarchy and responsiveness.

```tsx
// Card padding variations
<div className="bg-card border border-border rounded-lg p-4">Compact card (16px)</div>
<div className="bg-card border border-border rounded-lg p-6">Standard card (24px)</div>
<div className="bg-card border border-border rounded-lg p-8">Spacious card (32px)</div>

// Button size variations
<button className="px-3 py-1.5 bg-primary text-primary-foreground rounded-[6px]">Small</button>
<button className="px-4 py-2 bg-primary text-primary-foreground rounded-[6px]">Standard</button>
<button className="px-6 py-3 bg-primary text-primary-foreground rounded-[6px]">Large</button>

// Form with consistent spacing
<form className="space-y-4">
  <div>
    <label className="block mb-2">Label</label>
    <input className="w-full px-3 py-2 border border-input rounded-[4px]" />
  </div>
  <div>
    <label className="block mb-2">Another Label</label>
    <input className="w-full px-3 py-2 border border-input rounded-[4px]" />
  </div>
  <button className="px-4 py-2 bg-primary text-primary-foreground rounded-[6px]">Submit</button>
</form>

// Grid and flex layouts
<div className="grid grid-cols-3 gap-4">{/* Standard 16px gap */}</div>
<div className="grid grid-cols-4 gap-2">{/* Tight 8px gap */}</div>
<div className="flex gap-2">{/* Button group */}</div>
<nav className="flex items-center gap-6">{/* Navigation items */}</nav>

// Responsive container spacing
<div className="px-4 py-6 md:px-6 md:py-8 lg:px-8 lg:py-12">
  <h1>Responsive Container</h1>
</div>
```

--------------------------------

### Load Kuat Design Context (Python)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/integration.md

A Python function to dynamically load Kuat design context based on a specified task and optional framework. It aggregates rules and examples from local paths.

```python
def get_kuat_context(task: str, framework: str = None) -> str:
    """Load Kuat design context for a task."""
    base = "kuat-docs/"
    files = {
        "design": ["rules/design/colours.md", "rules/design/spacing.md"],
        "content": ["rules/content/foundations.md"],
        "component": ["rules/components/patterns.md"],
    }
    result = [load(f"{base}{f}") for f in files.get(task, [])]
    if framework:
        result.append(load(f"{base}examples/{framework}/"))
    return "\n".join(result)
```

--------------------------------

### Clone Kuat Design System Documentation Locally (Bash)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/integration.md

Bash commands to clone only the documentation directory from the Kuat Design System repository using sparse checkout. This method is efficient for integrating the full documentation into a local project without cloning the entire monorepo. It allows for deeper integration by referencing local files directly.

```bash
# Clone only the docs (sparse checkout)
git clone --filter=blob:none --sparse https://github.com/equalexperts/kuat-mono.git
cd kuat-mono
git sparse-checkout set kuat-docs

# Copy to your project
cp -r kuat-docs /path/to/your-project/
```

--------------------------------

### Toggle Dark Mode Dynamically - JavaScript

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Shows a JavaScript snippet to dynamically toggle the 'dark' class on the document's root element, allowing for runtime switching of dark mode.

```javascript
document.documentElement.classList.toggle('dark');
```

--------------------------------

### Implement Dark Mode with Root Class - React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Demonstrates how to apply the 'dark' class to the root HTML element for enabling dark mode in a React application. This is a common pattern for theme switching.

```tsx
<html className="dark">
  <body>
    <App />
  </body>
</html>
```

--------------------------------

### Clone Kuat Design System Documentation Locally

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/README.md

This bash script clones the Kuat Design System monorepo, specifically checking out the 'kuat-docs' directory. This allows developers to have the full documentation available locally for reference, especially for component patterns, layouts, and content guidelines. After cloning, the script instructs on how to update local snippets to point to the cloned documentation.

```bash
git clone --filter=blob:none --sparse https://github.com/equalexperts/kuat-mono.git
cd kuat-mono && git sparse-checkout set kuat-docs
cp -r kuat-docs /path/to/your-project/
```

--------------------------------

### Tailwind Utility Classes for Styling

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

This HTML snippet showcases example Tailwind CSS utility classes provided by the preset for applying colors, borders, and border-radius. These classes enable rapid UI development by leveraging predefined design tokens.

```html
<!-- Colors -->
<div class="bg-background text-foreground">
<div class="bg-primary text-primary-foreground">
<div class="bg-secondary text-secondary-foreground">
<div class="border-border">

<!-- Border Radius -->
<div class="rounded-sm">  <!-- Small -->
<div class="rounded-md">  <!-- Medium -->
<div class="rounded-lg">  <!-- Large -->
```

--------------------------------

### Responsive Spacing Examples in React

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/react/spacing.md

Demonstrates how to apply responsive spacing to a container using Kuat Design System's breakpoint modifiers (e.g., `md:`, `lg:`). Spacing adjusts based on screen size.

```tsx
<div className="px-4 py-6 md:px-6 md:py-8 lg:px-8 lg:py-12">
  <h1>Responsive Container</h1>
  <p>Spacing adapts to screen size</p>
</div>
```

--------------------------------

### Migrate Kuat React Imports - TypeScript

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Illustrates the migration from deprecated imports in '@equal-experts/kuat-react' to the recommended approach using local shadcn components and the updated kuat-react package. This ensures compatibility and utilizes the latest patterns.

```typescript
// Before (Deprecated)
import { Button, Dialog, ButtonGroup } from '@equal-experts/kuat-react';
```

```typescript
// After (Recommended)
// Standard components from your local shadcn installation
import { Button } from '@/components/ui/button';
import { Dialog } from '@/components/ui/dialog';

// Kuat-specific components from the package
import { ButtonGroup } from '@equal-experts/kuat-react';
```

--------------------------------

### Import Design Tokens (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Imports the Kuat Design System's CSS variables into your React application's entry point. This makes the design tokens available for use in your styles. It should be imported before your application's custom styles.

```typescript
// main.tsx or App.tsx
import '@equal-experts/kuat-core/variables.css';
import './styles.css'; // Your app styles
```

--------------------------------

### Import Design Tokens (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Imports the Kuat Design System's CSS variables into your Vue application's main entry file. This makes the design tokens globally available for styling. It's essential to import this before mounting your Vue application.

```typescript
// main.ts
import '@equal-experts/kuat-core/variables.css';
import './style.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
```

--------------------------------

### Vue Button Component Structure

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/vue/components.md

Defines a reusable Button component using Vue 3's `<script setup>` syntax and `class-variance-authority` for variant styling. It handles different button variants (default, destructive, outline, etc.) and sizes (sm, default, lg, icon).

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-[6px] text-sm font-medium transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-[6px] px-3',
        lg: 'h-11 rounded-[6px] px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

type ButtonVariants = VariantProps<typeof buttonVariants>

interface Props {
  variant?: ButtonVariants['variant']
  size?: ButtonVariants['size']
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  size: 'default',
})

const classes = computed(() => 
  cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)
)
</script>

<template>
  <button :class="classes">
    <slot />
  </button>
</template>
```

--------------------------------

### Apply Kuat Design Tokens with Vanilla CSS

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

Shows how to use Kuat's CSS custom properties directly in CSS for styling components.

```css
/* styles.css */
.my-button {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}

.my-button:hover {
  background-color: var(--primary-foreground);
  color: var(--primary);
  outline: 2px solid var(--primary);
}

.my-card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
```

--------------------------------

### Apply Padding to Cards

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/css/spacing.md

Demonstrates how to apply different padding values to card components using Kuat spacing variables. Includes standard, small, and large card variations.

```css
/* Standard card */
.card {
  padding: 1.5rem; /* 24px - equivalent to p-6 */
  background-color: var(--card);
  border: 1px solid var(--border);
}

/* Small card */
.card-sm {
  padding: 1rem; /* 16px - equivalent to p-4 */
}

/* Large card */
.card-lg {
  padding: 2rem; /* 32px - equivalent to p-8 */
}
```

--------------------------------

### Update Agent Rules for Local Kuat Docs (Markdown)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/integration.md

A markdown snippet to update your agent's configuration when the Kuat Design System documentation has been cloned locally. This snippet directs the agent to reference the design rules and implementation examples from the local `kuat-docs` directory, enabling offline access and faster lookups.

```markdown
## Kuat Design System

When working on UI, reference the design rules in `kuat-docs/rules/`.

For implementation examples, see `kuat-docs/examples/{react|vue|css}/`.
```

--------------------------------

### Configure Tailwind CSS with Kuat Preset (React)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Configures the Tailwind CSS build process to use the Kuat Design System preset. This ensures that Kuat's design tokens and configurations are applied to your project's styling. It also specifies content paths for your application and Kuat React components.

```typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import kuatPreset from '@equal-experts/kuat-core';

export default {
  presets: [kuatPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@equal-experts/kuat-react/**/*.{js,ts,jsx,tsx}',
  ],
} satisfies Config;
```

--------------------------------

### Vite + React Configuration and Main Entry Point

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/kuat-core-integration.md

Configures Vite for React projects using @vitejs/plugin-react and @tailwindcss/vite. It also sets up the main entry point for the React application, importing global CSS variables from Kuat Core.

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()]
});
```

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@equal-experts/kuat-core/variables.css';
import './index.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Configure Tailwind CSS with Kuat Preset (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/setup/consumer-setup.md

Configures the Tailwind CSS build process to use the Kuat Design System preset for Vue projects. This integrates Kuat's design tokens and configurations into your project's styling, specifying content paths for your Vue application and Kuat Vue components.

```typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import kuatPreset from '@equal-experts/kuat-core';

export default {
  presets: [kuatPreset],
  content: [
    './src/**/*.{vue,js,ts}',
    './node_modules/@equal-experts/kuat-vue/**/*.{vue,js,ts}',
  ],
} satisfies Config;
```

--------------------------------

### Reusable Logo Component (Vue)

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/vue/logo.md

A configurable Vue component for displaying the Equal Experts logo. It accepts `variant` (color, white-text, white, black) and `size` (sm, md, lg) props to dynamically set the logo source URL and CSS classes. Includes script setup for logic and template for rendering.

```vue
<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  variant?: 'color' | 'white-text' | 'white' | 'black';
  size?: 'sm' | 'md' | 'lg';
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'color',
  size: 'md'
});

const logoUrls = {
  'color': 'https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg',
  'white-text': 'https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg',
  'white': 'https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg',
  'black': 'https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-black.svg',
};

const sizes = {
  sm: 'w-[100px]',
  md: 'w-[120px]',
  lg: 'w-[150px]',
};

const logoUrl = computed(() => logoUrls[props.variant]);
const sizeClass = computed(() => sizes[props.size]);
</script>

<template>
  <img 
    :src="logoUrl" 
    alt="Equal Experts" 
    :class="['min-w-[100px] h-auto', sizeClass]"
  />
</template>
```

```vue
Usage:

<template>
  <Logo variant="color" size="md" />
  <Logo variant="white" size="lg" />
</template>
```

--------------------------------

### Vue Component Examples from Kuat Design System

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/README.md

This snippet illustrates the usage of custom Vue components from the '@equal-experts/kuat-vue' package. Similar to the React package, these components adhere to the Kuat Design System and can be themed via 'kuat-core'. The example shows a basic ButtonGroup component in Vue, demonstrating how to pass button configurations and handle click events within a Vue application.

```html
<template>
  <ButtonGroup :buttons="buttons" />
</template>

<script setup>
import ButtonGroup from '@equal-experts/kuat-vue/ButtonGroup.vue';

const buttons = [
  { label: 'Option 1', onClick: () => console.log('Option 1 clicked') },
  { label: 'Option 2', onClick: () => console.log('Option 2 clicked') },
];
</script>
```

--------------------------------

### Vue Responsive Typography with Kuat Design System

Source: https://github.com/equalexperts/kuat-agent-rules/blob/main/kuat-docs/examples/vue/typography.md

Illustrates how to implement responsive typography in Vue.js using Kuat Design System's utility classes. This example applies different text sizes to a heading based on screen breakpoints (md and lg).

```vue
<template>
  <h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
    Responsive Heading
  </h1>
</template>
```