adding some more cards

2026-06-02 08:34:59 -06:00
parent 8ad6132dfa
commit fdf0d5865b
12 changed files with 563 additions and 8 deletions
@@ -1,5 +1,119 @@
-# Vue Material Kit Design System
+# MK Design System

-This is a fork/derivative of [Creative Tim's Vue Material Kit 2](https://www.creative-tim.com/product/vue-material-kit), source found [here](https://github.com/creativetimofficial/vue-material-kit).
+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.

-I am going to iterate over it with an AI agent and extract styles and functionality into a design system that can be plugged in to another project. The end goal is to have a working directory than can be handed off to another AI agent that is used when building a new site to keep a consistent and clean design.
+**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.