# MK Design System

A Vue 3 + Tailwind CSS v4 design system derived from [Creative Tim's Vue Material Kit 2](https://github.com/creativetimofficial/vue-material-kit). Built to be handed off to another Claude instance for consistent UI work across projects.

**30+ components** · **Design tokens in CSS** · **Roboto variable font** · **Material Icons Round**

---

## Using in your project

### Option A — Copy components (simplest)

1. Copy `src/components/`, `src/composables/`, and `src/style.css` into your project.

2. Ensure your project has Tailwind CSS v4 with `@tailwindcss/vite`. Your `style.css` must contain the `@import "tailwindcss"` line and the full `@theme` block from this project's `src/style.css`.

3. Get the font files (4 woff2 files — see **Fonts** below) and place them in `public/fonts/`.

4. Import components directly:
   ```js
   import MkButton from '@/components/MkButton.vue'
   import MkInput  from '@/components/MkInput.vue'
   ```

### Option B — Build as a library

```bash
pnpm build:lib
```

This outputs `dist/mk-design-system.es.js`, `dist/mk-design-system.cjs.js`, and `dist/style.css`.

In the consuming project:

```js
// main.js — global registration
import { MkDesignSystem } from './mk-design-system.es.js'
import './mk-design-system.css'  // design tokens + @font-face
app.use(MkDesignSystem)
```

Or import components individually:

```js
import { MkButton, MkInput, MkNavbar } from './mk-design-system.es.js'
```

---

## Development

```bash
pnpm install
pnpm dev        # dashboard + showcase at localhost:5173
pnpm build      # production app build → dist/
pnpm build:lib  # library build → dist/mk-design-system.*
```

---

## Fonts

Place these woff2 files in `public/fonts/` before running the dev server:

```
public/fonts/roboto/
  Roboto-VariableFont_wdth-wght.woff2
  Roboto-Italic-VariableFont_wdth-wght.woff2

public/fonts/roboto-slab/
  RobotoSlab-VariableFont_wght.woff2

public/fonts/material-icons-round/
  material-icons-round-latin-400-normal.woff2
```

Download script (run from `/app`):

```bash
# Roboto (official Google Fonts variable build)
curl -L "https://github.com/google/fonts/raw/main/apache/roboto/Roboto%5Bwdth%2Cwght%5D.ttf" \
     -o public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2

# Material Icons Round
curl -L "https://cdn.jsdelivr.net/npm/@fontsource/material-icons-round@5/files/material-icons-round-latin-400-normal.woff2" \
     -o public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2
```

---

## Design reference

| File | Purpose |
|------|---------|
| `design-system.md` | Token reference, component patterns, 12 quick-start rules |
| `conformity.md` | 17-rule checklist — feed this + generated code to Claude to score conformity |
| `tokens.json` | Machine-readable design token values |
| `src/style.css` | Live source of truth — `@theme` block defines all tokens |

---

## For Claude

When starting a new project using this design system, provide Claude with:

1. `design-system.md` — the rules to follow
2. `conformity.md` — to score and verify generated code
3. The component list from `src/index.js` — so it knows what's available

Prompt template:
> "Use the MK Design System (design-system.md attached). Available components are listed in src/index.js. Build [feature]. After generating, score it against conformity.md."

---

## Notes

- `MkSocialButton` renders Font Awesome brand icons (`fab fa-*`). Load Font Awesome Free 6 externally if social icons are needed.
- `MkRotatingCard` requires its parent to set an explicit height (e.g. `style="height: 22rem"`).
- `MkNavbar` scroll-blur is automatic in `transparent` mode — no JS required.