designkit-ai 1.0.0

package/skills/nextjs.md

@@ -0,0 +1,143 @@
+# Skill: Next.js (App Router + TypeScript)
+
+Build, design, and convert DesignKit UI using Next.js App Router.
+
+## Your role
+
+You are a Next.js developer with strong UI skills.
+You can:
+- **Design** a page or layout from scratch using the token system
+- **Convert** a DesignKit HTML file into App Router pages + components
+- **Build** a full feature (auth flow, dashboard, marketing page, API route + UI, etc.)
+
+Read the request and determine which mode applies.
+
+## Token file (output to `lib/tokens.ts`)
+
+```ts
+// lib/tokens.ts
+export const t = {
+  primary:       '#6366F1',
+  primaryText:   '#FFFFFF',
+  secondary:     '#64748B',
+  accent:        '#F59E0B',
+  bg:            '#FFFFFF',
+  surface:       '#F8FAFC',
+  surface2:      '#F1F5F9',
+  text:          '#0F172A',
+  text2:         '#475569',
+  text3:         '#94A3B8',
+  border:        '#E2E8F0',
+  borderStrong:  '#CBD5E1',
+  success:       '#22C55E',
+  error:         '#EF4444',
+  warning:       '#F59E0B',
+  radius:        '10px',
+  radiusSm:      '6px',
+  radiusLg:      '14px',
+  radiusFull:    '9999px',
+  shadow:        '0 4px 12px rgba(0,0,0,0.10)',
+  shadowSm:      '0 1px 3px rgba(0,0,0,0.08)',
+  shadowLg:      '0 8px 32px rgba(0,0,0,0.12)',
+  font:          "'Inter', system-ui, sans-serif",
+} as const
+
+export type Tokens = typeof t
+```
+
+## Output structure
+
+```
+src/
+├── app/
+│   ├── layout.tsx          ← RootLayout with font + global tokens
+│   ├── globals.css         ← :root { --kit-* } + reset
+│   └── [page-name]/
+│       └── page.tsx        ← Page Server Component
+├── components/
+│   ├── ui/
+│   │   ├── Button.tsx
+│   │   ├── Card.tsx
+│   │   └── ...
+│   └── layout/
+│       ├── Navbar.tsx
+│       └── Sidebar.tsx
+└── lib/
+    └── tokens.ts
+```
+
+## Component rules
+
+```tsx
+// Server Component (default — no interactivity)
+import { t } from '@/lib/tokens'
+
+export default function Page() {
+  return (
+    <main style={{ background: t.bg, minHeight: '100vh' }}>
+      ...
+    </main>
+  )
+}
+```
+
+```tsx
+// Client Component (needs useState, onClick, etc.)
+'use client'
+import { useState } from 'react'
+import { t } from '@/lib/tokens'
+
+export default function InteractiveWidget() {
+  const [open, setOpen] = useState(false)
+  ...
+}
+```
+
+## Rules
+
+- **App Router** — never use `pages/` directory
+- **Server Components by default** — only add `'use client'` when needed
+- **`next/link`** for all internal `<a>` tags
+- **`next/image`** for all `<img>` tags, add `width` + `height`
+- **No Tailwind unless asked** — use inline `style={{}}` with `t.*` tokens
+- **TypeScript** everywhere — all props typed
+- **Import tokens from `@/lib/tokens`** — never hardcode hex
+
+## globals.css
+
+```css
+/* app/globals.css */
+:root {
+  --kit-primary:   #6366F1;
+  --kit-bg:        #FFFFFF;
+  --kit-surface:   #F8FAFC;
+  --kit-text:      #0F172A;
+  --kit-text-2:    #475569;
+  --kit-border:    #E2E8F0;
+  --kit-radius:    10px;
+  --kit-font:      'Inter', system-ui, sans-serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: var(--kit-font); background: var(--kit-bg); color: var(--kit-text); }
+```
+
+## Example prompt
+
+```
+Read AI-AGENT.md and skills/nextjs.md, then:
+
+Design and build a SaaS dashboard with:
+- Sidebar navigation (Logo, 5 menu items, user avatar at bottom)  
+- Top header (page title, search, notifications)
+- KPI row (4 stat cards: Revenue, Users, Churn, MRR)
+- Area chart placeholder
+- Recent activity table (5 rows)
+
+Output files:
+- src/app/dashboard/page.tsx
+- src/components/layout/Sidebar.tsx
+- src/components/layout/Header.tsx
+- src/components/ui/StatCard.tsx
+- src/lib/tokens.ts
+```

package/skills/react-native.md

@@ -0,0 +1,258 @@
+# Skill: React Native (TypeScript)
+
+Build, design, and convert DesignKit UI using React Native.
+
+## Your role
+
+You are a React Native developer with strong UI skills.
+You can:
+- **Design** a screen from scratch in React Native using the token system
+- **Convert** a DesignKit HTML file to React Native components
+- **Build** a full feature (auth flow, tab navigation, list screen, etc.)
+
+Read the request and determine which mode applies.
+
+---
+
+## Token file (`src/tokens.ts`)
+
+Always output this file. Import from it everywhere — never hardcode colors or sizes.
+
+```ts
+import { Platform } from 'react-native'
+
+export const t = {
+  // Colors
+  primary:       '#6366F1',
+  primaryText:   '#FFFFFF',
+  secondary:     '#64748B',
+  accent:        '#F59E0B',
+  bg:            '#FFFFFF',
+  surface:       '#F8FAFC',
+  surface2:      '#F1F5F9',
+  text:          '#0F172A',
+  text2:         '#475569',
+  text3:         '#94A3B8',
+  border:        '#E2E8F0',
+  success:       '#22C55E',
+  error:         '#EF4444',
+  warning:       '#F59E0B',
+
+  // Border radius
+  radiusSm:    6,
+  radius:      10,
+  radiusLg:    14,
+  radiusXl:    20,
+  radiusFull:  9999,
+
+  // Spacing
+  space1:  4,
+  space2:  8,
+  space3:  12,
+  space4:  16,
+  space5:  20,
+  space6:  24,
+  space8:  32,
+  space10: 40,
+
+  // Font sizes
+  textXs:  11,
+  textSm:  13,
+  textMd:  15,
+  textLg:  17,
+  textXl:  20,
+  text2xl: 24,
+  text3xl: 32,
+  text4xl: 48,
+
+  // Platform shadows
+  shadowSm: Platform.select({
+    ios:     { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 3 },
+    android: { elevation: 2 },
+    default: {},
+  }),
+  shadow: Platform.select({
+    ios:     { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.10, shadowRadius: 12 },
+    android: { elevation: 4 },
+    default: {},
+  }),
+} as const
+```
+
+---
+
+## Component structure
+
+```tsx
+import React, { useState } from 'react'
+import {
+  View, Text, ScrollView, Pressable, TextInput,
+  StyleSheet, SafeAreaView, Image, FlatList,
+} from 'react-native'
+import { t } from '../tokens'
+
+interface Props {
+  // typed props
+}
+
+export default function ScreenName({ }: Props) {
+  return (
+    <SafeAreaView style={s.safe}>
+      <ScrollView style={s.scroll} showsVerticalScrollIndicator={false}>
+        {/* content */}
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const s = StyleSheet.create({
+  safe:   { flex: 1, backgroundColor: t.bg },
+  scroll: { flex: 1 },
+})
+```
+
+---
+
+## HTML → React Native mapping
+
+| HTML / CSS | React Native |
+|------------|-------------|
+| `<div>` | `<View>` |
+| `display: flex` (default column) | `<View style={{ flexDirection: 'row' }}>` for row |
+| `<p>`, `<span>`, `<h1>` | `<Text>` |
+| `<img>` | `<Image source={{ uri: '...' }} style={{ width, height }} />` |
+| `<button>` | `<Pressable>` |
+| `<input>` | `<TextInput>` |
+| `<a>` | `<Pressable onPress={() => navigation.navigate('X')}>` |
+| `overflow-y: scroll` | `<ScrollView>` |
+| list of items | `<FlatList data={} renderItem={} keyExtractor={} />` |
+| `position: fixed; bottom: 0` | `<View style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>` |
+| `border-radius: 10px` | `borderRadius: 10` (no `px`) |
+| `padding: 16px` | `padding: 16` (no `px`) |
+| `gap: 8px` in flex | `gap: 8` (RN 0.71+) or `marginBottom` per item |
+| `flex: 1` | `flex: 1` |
+| `width: 100%` | `alignSelf: 'stretch'` or `flex: 1` |
+
+---
+
+## Common patterns
+
+### Card
+```tsx
+<View style={s.card}>
+  <Text style={s.cardTitle}>Title</Text>
+  <Text style={s.cardSub}>Subtitle</Text>
+</View>
+
+// styles
+card: {
+  backgroundColor: t.surface,
+  borderRadius: t.radiusLg,
+  padding: t.space4,
+  borderWidth: 1,
+  borderColor: t.border,
+  ...t.shadowSm,
+},
+cardTitle: { fontSize: t.textMd, fontWeight: '600', color: t.text },
+cardSub:   { fontSize: t.textSm, color: t.text2, marginTop: 4 },
+```
+
+### Primary button
+```tsx
+<Pressable
+  style={({ pressed }) => [s.btn, pressed && s.btnPressed]}
+  onPress={onPress}
+>
+  <Text style={s.btnLabel}>{label}</Text>
+</Pressable>
+
+// styles
+btn:        { height: 48, backgroundColor: t.primary, borderRadius: t.radius, alignItems: 'center', justifyContent: 'center' },
+btnPressed: { opacity: 0.85 },
+btnLabel:   { fontSize: t.textMd, fontWeight: '600', color: t.primaryText },
+```
+
+### List item
+```tsx
+<Pressable style={s.item}>
+  <View style={s.iconWrap}>
+    {/* icon */}
+  </View>
+  <View style={s.itemBody}>
+    <Text style={s.itemTitle}>Label</Text>
+    <Text style={s.itemSub}>Subtitle</Text>
+  </View>
+  <Text style={s.itemTrail}>Value</Text>
+</Pressable>
+
+// styles
+item:     { flexDirection: 'row', alignItems: 'center', gap: t.space3, paddingVertical: t.space3, borderBottomWidth: 1, borderBottomColor: t.border },
+iconWrap: { width: 40, height: 40, borderRadius: t.radiusFull, backgroundColor: t.surface2, alignItems: 'center', justifyContent: 'center' },
+itemBody: { flex: 1 },
+itemTitle:{ fontSize: t.textMd, fontWeight: '500', color: t.text },
+itemSub:  { fontSize: t.textSm, color: t.text2, marginTop: 2 },
+itemTrail:{ fontSize: t.textSm, color: t.text3 },
+```
+
+### Gradient card (react-native-linear-gradient)
+```tsx
+import LinearGradient from 'react-native-linear-gradient'
+
+<LinearGradient colors={['#6366F1', '#8B5CF6']} style={s.gradCard}>
+  <Text style={s.gradLabel}>Total Balance</Text>
+  <Text style={s.gradAmount}>$12,450</Text>
+  <Text style={s.gradSub}>↑ 12.5% from last month</Text>
+</LinearGradient>
+
+// styles
+gradCard:   { borderRadius: t.radiusXl, padding: t.space6 },
+gradLabel:  { fontSize: t.textSm, color: 'rgba(255,255,255,0.8)', marginBottom: 8 },
+gradAmount: { fontSize: t.text4xl, fontWeight: '700', color: '#fff', letterSpacing: -1 },
+gradSub:    { fontSize: t.textSm, color: 'rgba(255,255,255,0.7)', marginTop: 4 },
+```
+
+---
+
+## Rules
+
+- **`StyleSheet.create()`** — all styles here, named short (`s`)
+- **`SafeAreaView`** on every screen root
+- **`Pressable`** over `TouchableOpacity` for new code
+- **`Platform.select()`** for shadow (iOS vs Android elevation)
+- **No `px` units** — unitless numbers only
+- **`flex: 1`** instead of `width: '100%'`
+- **`FlatList`** for long lists — not `ScrollView` + `map()`
+- **TypeScript** — all props and state typed
+
+---
+
+## Example prompts
+
+**Design from scratch:**
+```
+Read AI-AGENT.md and skills/react-native.md, then design and build
+a finance app home screen in React Native:
+- iOS safe area, status bar
+- Gradient balance card (indigo → purple), balance $12,450
+- Quick actions row: Send, Receive, Pay, More
+- Recent transactions FlatList (5 items: icon, name, date, amount)
+- Bottom tab bar: Home, Cards, Analytics, Profile
+
+Output:
+- src/screens/HomeScreen.tsx
+- src/tokens.ts
+```
+
+**Convert from HTML:**
+```
+Read skills/react-native.md, then convert output/finance-home.html
+to React Native. Mobile screen, iOS target.
+Output to src/screens/HomeScreen.tsx
+```
+
+**Build a feature:**
+```
+Read skills/react-native.md, then build a complete auth flow
+in React Native: Splash → Onboarding (3 steps) → Login → Home.
+Use React Navigation stack. Output all screens + navigator.
+```

package/skills/react.md

@@ -0,0 +1,171 @@
+# Skill: React (TypeScript)
+
+Build, design, and convert DesignKit UI using React TypeScript.
+
+## Your role
+
+You are a React developer with strong UI skills.
+You can:
+- **Design** a component or page from scratch using the token system
+- **Convert** a DesignKit HTML file to React components
+- **Build** a full feature (auth form, dashboard layout, data table, etc.)
+
+Read the request and determine which mode applies.
+
+## Styling approach
+
+Use whichever the user specifies. If not specified, default to **CSS Modules**.
+
+### Option A — CSS Modules (default)
+
+```tsx
+// Button.tsx
+import styles from './Button.module.css'
+
+export default function Button({ label }: { label: string }) {
+  return <button className={styles.btn}>{label}</button>
+}
+```
+
+```css
+/* Button.module.css */
+.btn {
+  height: 40px;
+  padding: 0 20px;
+  background: var(--kit-primary, #6366F1);
+  color: var(--kit-primary-text, #fff);
+  border-radius: var(--kit-radius, 10px);
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+```
+
+Keep `var(--kit-*)` in CSS — tokens stay in one place, easy to retheme.
+
+### Option B — Tailwind CSS
+
+```tsx
+export default function Button({ label }: { label: string }) {
+  return (
+    <button className="h-10 px-5 bg-indigo-500 text-white text-sm font-medium rounded-lg hover:bg-indigo-600 transition-colors">
+      {label}
+    </button>
+  )
+}
+```
+
+Use Tailwind utility classes. Map `--kit-*` → Tailwind scale (see [skills/tailwind.md](tailwind.md)).
+
+### Option C — inline styles + token object
+
+Use when zero build config is preferred, or when converting HTML 1:1.
+
+```tsx
+const t = {
+  primary:     '#6366F1',
+  primaryText: '#FFFFFF',
+  bg:          '#FFFFFF',
+  surface:     '#F8FAFC',
+  text:        '#0F172A',
+  text2:       '#475569',
+  text3:       '#94A3B8',
+  border:      '#E2E8F0',
+  radius:      '10px',
+  shadow:      '0 4px 12px rgba(0,0,0,0.10)',
+  font:        "'Inter', system-ui, sans-serif",
+} as const
+
+export default function Button({ label }: { label: string }) {
+  return (
+    <button style={{
+      height: 40,
+      padding: '0 20px',
+      background: t.primary,
+      color: t.primaryText,
+      borderRadius: t.radius,
+      border: 'none',
+      fontSize: 13,
+      fontWeight: 500,
+      cursor: 'pointer',
+    }}>
+      {label}
+    </button>
+  )
+}
+```
+
+### Option D — styled-components / Emotion
+
+```tsx
+import styled from 'styled-components'
+
+const Btn = styled.button`
+  height: 40px;
+  padding: 0 20px;
+  background: var(--kit-primary, #6366F1);
+  color: var(--kit-primary-text, #fff);
+  border-radius: var(--kit-radius, 10px);
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+`
+
+export default function Button({ label }: { label: string }) {
+  return <Btn>{label}</Btn>
+}
+```
+
+---
+
+## Output format (CSS Modules default)
+
+```tsx
+import React, { useState } from 'react'
+import styles from './ComponentName.module.css'
+
+interface Props {
+  // typed props here
+}
+
+export default function ComponentName({ ...props }: Props) {
+  // state here
+
+  return (
+    <div className={styles.root}>
+      {/* JSX here */}
+    </div>
+  )
+}
+```
+
+## Rules
+
+- **TypeScript** — all props typed with `interface`
+- **Semantic HTML** — `<button>`, `<nav>`, `<header>`, `<ul>/<li>`, `<a>`
+- **No hardcoded hex** — reference tokens via `var(--kit-*)` in CSS, or `t.*` in inline styles
+- **Split large screens** — extract repeated patterns into sub-components
+- **Images** — `<img src="https://placehold.jp/400x300.png" alt="..." />`
+- One file output unless the user asks for multiple files
+
+## Example prompts
+
+```
+Read skills/react.md, then convert output/dashboard.html
+to React components using CSS Modules.
+Output to src/components/Dashboard/
+```
+
+```
+Read skills/react.md, then convert output/dashboard.html
+to React + Tailwind.
+Output to src/components/Dashboard.tsx
+```
+
+```
+Read AI-AGENT.md and skills/react.md, then design and build
+a finance app home screen in React with styled-components.
+Output to src/screens/HomeScreen.tsx
+```

package/skills/svelte.md

@@ -0,0 +1,95 @@
+# Skill: Svelte 5 (Runes)
+
+Build, design, and convert DesignKit UI using Svelte 5.
+
+## Your role
+
+You are a Svelte 5 developer with strong UI skills.
+You can:
+- **Design** a component or page from scratch using the token system
+- **Convert** a DesignKit HTML file to Svelte components
+- **Build** a full feature (auth flow, dashboard, interactive form, etc.)
+
+Read the request and determine which mode applies.
+
+## Token module (`src/lib/tokens.ts`)
+
+```ts
+export const t = {
+  primary:       '#6366F1',
+  primaryText:   '#FFFFFF',
+  bg:            '#FFFFFF',
+  surface:       '#F8FAFC',
+  text:          '#0F172A',
+  text2:         '#475569',
+  text3:         '#94A3B8',
+  border:        '#E2E8F0',
+  radius:        '10px',
+  radiusSm:      '6px',
+  radiusLg:      '14px',
+  shadow:        '0 4px 12px rgba(0,0,0,0.10)',
+  font:          "'Inter', system-ui, sans-serif",
+} as const
+```
+
+## Output format
+
+```svelte
+<script lang="ts">
+  import { t } from '$lib/tokens'
+
+  // Svelte 5 runes
+  let { title = 'Default', onclick }: {
+    title?: string
+    onclick?: () => void
+  } = $props()
+
+  let isOpen = $state(false)
+  let label = $derived(isOpen ? 'Close' : 'Open')
+</script>
+
+<div style:font-family={t.font} style:background={t.bg} style:color={t.text}>
+  <!-- markup here -->
+</div>
+```
+
+## Svelte style directives
+
+Use `style:property={value}` instead of `:style="{}"`
+
+```svelte
+<!-- preferred -->
+<div
+  style:background={t.surface}
+  style:border-radius={t.radius}
+  style:padding="16px"
+>
+
+<!-- also valid for dynamic objects -->
+<div style={`background:${t.primary};color:${t.primaryText}`}>
+```
+
+## Rules
+
+- **Svelte 5 Runes** — `$state`, `$derived`, `$props`, `$effect`
+- **`style:property`** directive — not `style=""` string
+- **`{#each}` with `{#key}`** for lists
+- **`{#if}` / `{:else}`** for conditionals
+- **`<a href="">` with SvelteKit** → use `<a>` (SvelteKit handles routing)
+- **No class-based CSS** — inline styles only
+
+## Example prompt
+
+```
+Read AI-AGENT.md and skills/svelte.md, then:
+
+Design and build a pricing section for a SaaS app in Svelte 5:
+- Monthly/Annual toggle (saves 20%)
+- 3 pricing tiers: Starter $9, Pro $29 (highlighted), Enterprise $99
+- Feature list per tier
+- CTA button per tier
+
+Output:
+- src/lib/components/PricingSection.svelte
+- src/lib/tokens.ts
+```