designkit-ai 1.0.0

package/skills/swiftui.md

@@ -0,0 +1,171 @@
+# Skill: SwiftUI (iOS)
+
+Build, design, and convert DesignKit UI using SwiftUI.
+
+## Your role
+
+You are an iOS developer with strong UI skills.
+You can:
+- **Design** a screen from scratch using the token system
+- **Convert** a DesignKit HTML file to SwiftUI Views
+- **Build** a full feature (onboarding, tab bar app, list + detail, settings, etc.)
+
+Read the request and determine which mode applies.
+
+## Token struct (`Tokens.swift`)
+
+```swift
+import SwiftUI
+
+struct T {
+  // Colors
+  static let primary      = Color(hex: "#6366F1")
+  static let primaryText  = Color.white
+  static let bg           = Color(hex: "#FFFFFF")
+  static let surface      = Color(hex: "#F8FAFC")
+  static let surface2     = Color(hex: "#F1F5F9")
+  static let textPrimary  = Color(hex: "#0F172A")
+  static let text2        = Color(hex: "#475569")
+  static let text3        = Color(hex: "#94A3B8")
+  static let border       = Color(hex: "#E2E8F0")
+  static let success      = Color(hex: "#22C55E")
+  static let error        = Color(hex: "#EF4444")
+  static let warning      = Color(hex: "#F59E0B")
+
+  // Border radius
+  static let radiusSm:   CGFloat = 6
+  static let radius:     CGFloat = 10
+  static let radiusLg:   CGFloat = 14
+  static let radiusXl:   CGFloat = 20
+
+  // Spacing
+  static let space1:  CGFloat = 4
+  static let space2:  CGFloat = 8
+  static let space3:  CGFloat = 12
+  static let space4:  CGFloat = 16
+  static let space5:  CGFloat = 20
+  static let space6:  CGFloat = 24
+  static let space8:  CGFloat = 32
+
+  // Typography
+  static let fontSm:  Font = .system(size: 13)
+  static let fontMd:  Font = .system(size: 15)
+  static let fontLg:  Font = .system(size: 17)
+  static let fontXl:  Font = .system(size: 20, weight: .semibold)
+  static let font2xl: Font = .system(size: 24, weight: .bold)
+  static let font3xl: Font = .system(size: 32, weight: .bold)
+}
+
+// Hex color initializer
+extension Color {
+  init(hex: String) {
+    let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+    var int: UInt64 = 0
+    Scanner(string: hex).scanHexInt64(&int)
+    let r = Double((int >> 16) & 0xFF) / 255
+    let g = Double((int >> 8) & 0xFF) / 255
+    let b = Double(int & 0xFF) / 255
+    self.init(red: r, green: g, blue: b)
+  }
+}
+```
+
+## HTML → SwiftUI mapping
+
+| HTML | SwiftUI |
+|------|---------|
+| `<div style="display:flex">` | `HStack {}` |
+| `<div style="flex-direction:column">` | `VStack(alignment: .leading) {}` |
+| `<div style="position:relative">` | `ZStack {}` |
+| `<div style="overflow-y:auto">` | `ScrollView {}` |
+| `<div style="background:X; border-radius:Y; padding:Z">` | `.background(X).clipShape(RoundedRectangle(cornerRadius: Y)).padding(Z)` |
+| `<button>` | `Button {}` |
+| `<input>` | `TextField("placeholder", text: $value)` |
+| `<img>` | `AsyncImage(url:)` or `Rectangle().fill(Color.gray.opacity(0.2))` |
+| `<span>` / `<p>` | `Text("...")` |
+| `<h1>` | `Text("...").font(.largeTitle).fontWeight(.bold)` |
+| `gap: 16px` | `VStack(spacing: 16)` or `HStack(spacing: 16)` |
+| `flex: 1` | `.frame(maxWidth: .infinity)` |
+
+## Output format
+
+```swift
+import SwiftUI
+
+struct ScreenNameView: View {
+  // @State, @Binding, @ObservedObject here
+
+  var body: some View {
+    NavigationStack {
+      ScrollView {
+        VStack(spacing: T.space4) {
+          // content here
+        }
+        .padding(T.space4)
+      }
+      .background(T.bg)
+      .navigationTitle("Screen Name")
+      .navigationBarTitleDisplayMode(.large)
+    }
+  }
+}
+
+#Preview {
+  ScreenNameView()
+}
+```
+
+## iOS-specific patterns
+
+```swift
+// Safe area + tab bar
+TabView {
+  HomeView().tabItem { Label("Home", systemImage: "house.fill") }
+  SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
+}
+
+// Card
+RoundedRectangle(cornerRadius: T.radiusLg)
+  .fill(T.surface)
+  .overlay(
+    VStack(alignment: .leading, spacing: T.space2) {
+      Text("Title").font(T.fontLg).fontWeight(.semibold)
+      Text("Subtitle").font(T.fontSm).foregroundColor(T.text2)
+    }
+    .padding(T.space4)
+    , alignment: .topLeading
+  )
+  .shadow(color: .black.opacity(0.08), radius: 3, y: 1)
+
+// Gradient card
+LinearGradient(colors: [T.primary, Color(hex: "#8B5CF6")],
+               startPoint: .topLeading, endPoint: .bottomTrailing)
+  .clipShape(RoundedRectangle(cornerRadius: T.radiusXl))
+```
+
+## Rules
+
+- **`T.*` tokens** — never hardcode Color or CGFloat
+- **`@State` / `@Binding`** for local vs passed state
+- **`NavigationStack`** not deprecated `NavigationView`
+- **`.frame(maxWidth: .infinity)`** for full-width elements
+- **`Spacer()`** for flex alignment
+- **iOS 17+** target — use latest SwiftUI APIs
+
+## Example prompt
+
+```
+Read AI-AGENT.md and skills/swiftui.md, then:
+
+Design and build a finance app home screen in SwiftUI:
+- Navigation bar: greeting + notification bell icon
+- Balance card: gradient (indigo → purple), large balance $12,450, +12.5% badge
+- Quick actions HStack: Send, Receive, Pay, More (icon + label)
+- "Recent Transactions" section header
+- 4 transaction rows (icon, merchant, date, amount with color)
+- TabView bottom bar: Home, Cards, Analytics, Profile
+
+Output:
+- HomeView.swift
+- Tokens.swift
+```

package/skills/tailwind.md

@@ -0,0 +1,108 @@
+# Skill: Tailwind CSS v4
+
+Build, design, and convert DesignKit UI using Tailwind CSS.
+
+## Your role
+
+You are a frontend developer with strong UI skills, using Tailwind CSS v4.
+You can:
+- **Design** a component or page from scratch with Tailwind utility classes
+- **Convert** a DesignKit HTML file (inline styles → Tailwind classes)
+- **Build** a full section or feature (hero, pricing page, dashboard layout, etc.)
+
+Read the request and determine which mode applies.
+
+## Token mapping to Tailwind
+
+```
+--kit-primary     → bg-indigo-500 / text-indigo-500 / border-indigo-500
+--kit-bg          → bg-white
+--kit-surface     → bg-slate-50
+--kit-surface-2   → bg-slate-100
+--kit-text        → text-slate-900
+--kit-text-2      → text-slate-600
+--kit-text-3      → text-slate-400
+--kit-border      → border-slate-200
+--kit-radius      → rounded-[10px]  or  rounded-lg
+--kit-radius-sm   → rounded-md
+--kit-radius-lg   → rounded-xl
+--kit-radius-full → rounded-full
+--kit-shadow-sm   → shadow-sm
+--kit-shadow      → shadow-md
+--kit-shadow-lg   → shadow-lg
+--kit-space-4     → p-4 / gap-4 / m-4
+--kit-space-6     → p-6 / gap-6
+--kit-text-sm     → text-sm
+--kit-text-md     → text-base
+--kit-text-lg     → text-lg
+--kit-text-xl     → text-xl
+--kit-text-2xl    → text-2xl
+--kit-text-3xl    → text-3xl
+--kit-text-4xl    → text-4xl / text-5xl
+```
+
+## Tailwind v4 CSS config
+
+```css
+/* app.css */
+@import "tailwindcss";
+
+@theme {
+  --color-primary:    #6366F1;
+  --color-surface:    #F8FAFC;
+  --color-surface-2:  #F1F5F9;
+  --color-kit-text:   #0F172A;
+  --color-kit-text-2: #475569;
+  --color-kit-text-3: #94A3B8;
+  --radius-kit:       10px;
+  --font-kit:         'Inter', system-ui, sans-serif;
+}
+```
+
+## Output format
+
+```html
+<!-- Card example -->
+<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
+  <h2 class="text-base font-semibold text-slate-900">Card Title</h2>
+  <p class="text-sm text-slate-500 mt-1">Supporting text goes here.</p>
+</div>
+
+<!-- Button example -->
+<button class="h-10 px-5 bg-indigo-500 text-white text-sm font-medium rounded-lg
+               hover:bg-indigo-600 active:bg-indigo-700 transition-colors">
+  Get Started
+</button>
+```
+
+## Rules
+
+- **Utility classes only** — no `style=""` in output
+- **Semantic HTML** — `<button>`, `<nav>`, `<a>`, `<ul>/<li>`
+- **`hover:` / `focus:` / `active:`** variants for interactive elements
+- **`dark:` variants** if dark mode is requested
+- **`transition-colors`** on all interactive elements
+- **No arbitrary values unless necessary** — prefer Tailwind scale
+- **`gap-*` not `space-x-*`** for flex/grid spacing
+
+## Example prompt
+
+```
+Read skills/tailwind.md, then convert this component to Tailwind CSS:
+[paste HTML or file path]
+
+Use Tailwind v4 utility classes. Keep the same visual design.
+```
+
+Or design from scratch:
+
+```
+Read AI-AGENT.md and skills/tailwind.md, then:
+
+Design a SaaS top navigation bar using Tailwind CSS:
+- Logo left
+- Nav links center: Features, Pricing, Docs, Blog
+- Right: "Sign in" ghost button + "Get started" primary button
+
+Output: components/Navbar.html
+```

package/skills/vue.md

@@ -0,0 +1,111 @@
+# Skill: Vue 3 (Composition API + TypeScript)
+
+Build, design, and convert DesignKit UI using Vue 3.
+
+## Your role
+
+You are a Vue 3 developer with strong UI skills.
+You can:
+- **Design** a component or view from scratch using the token system
+- **Convert** a DesignKit HTML file to Vue SFC components
+- **Build** a full feature (auth page, dashboard layout, form with validation, etc.)
+
+Read the request and determine which mode applies.
+
+## Token composable (output to `composables/useTokens.ts`)
+
+```ts
+// composables/useTokens.ts
+export const tokens = {
+  primary:       '#6366F1',
+  primaryText:   '#FFFFFF',
+  bg:            '#FFFFFF',
+  surface:       '#F8FAFC',
+  surface2:      '#F1F5F9',
+  text:          '#0F172A',
+  text2:         '#475569',
+  text3:         '#94A3B8',
+  border:        '#E2E8F0',
+  radius:        '10px',
+  radiusSm:      '6px',
+  radiusLg:      '14px',
+  radiusFull:    '9999px',
+  shadow:        '0 4px 12px rgba(0,0,0,0.10)',
+  font:          "'Inter', system-ui, sans-serif",
+} as const
+
+export function useTokens() {
+  return tokens
+}
+```
+
+## Output format
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTokens } from '@/composables/useTokens'
+
+// props
+interface Props {
+  title?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Default'
+})
+
+// emits
+const emit = defineEmits<{
+  change: [value: string]
+}>()
+
+const t = useTokens()
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div :style="{ fontFamily: t.font, background: t.bg, color: t.text }">
+    <!-- template here -->
+  </div>
+</template>
+```
+
+## Rules
+
+- **`<script setup lang="ts">`** — always, never Options API
+- **`:style` binding** — use object syntax `:style="{ color: t.primary }"`
+- **No scoped CSS** — use inline `:style` with tokens
+- **`v-for` with `:key`** on all lists
+- **`@click`, `@input`** for events — not `onclick`
+- **`defineProps`, `defineEmits`, `defineExpose`** — typed
+- **Semantic HTML** — `<button>`, `<nav>`, `<header>`, `<ul>/<li>`
+
+## Vue Router navigation
+
+```vue
+<template>
+  <RouterLink to="/dashboard" :style="{ color: t.primary }">
+    Dashboard
+  </RouterLink>
+</template>
+```
+
+## Example prompt
+
+```
+Read AI-AGENT.md and skills/vue.md, then:
+
+Design and build a mobile app login screen in Vue 3:
+- Logo at top
+- Email + password inputs
+- "Sign in" button (full width, primary color)
+- "Forgot password" link
+- Divider + Google OAuth button
+- "Don't have an account? Sign up" footer
+
+Output:
+- src/views/LoginView.vue
+- src/components/ui/BaseButton.vue
+- src/components/ui/BaseInput.vue
+- src/composables/useTokens.ts
+```

package/src/commands/add.js

@@ -0,0 +1,51 @@
+import { buildIndex, searchComponents } from '../lib/index.js'
+import { copyFileSync, mkdirSync, existsSync } from 'fs'
+import { join, basename } from 'path'
+
+export function addCommand(query, options) {
+  const { output } = options
+  const all = buildIndex()
+
+  // Exact match first
+  let component = all.find(c => c.id === query)
+
+  // Fuzzy match if not found
+  if (!component) {
+    const results = searchComponents(all, query)
+    if (results.length === 0) {
+      console.log(`\n  ✗ No component found for "${query}"\n`)
+      console.log('  Try: designkit search <query>')
+      console.log('  Or:  designkit list\n')
+      process.exit(1)
+    }
+    if (results.length === 1) {
+      component = results[0]
+    } else {
+      console.log(`\n  Multiple matches for "${query}":\n`)
+      for (const c of results.slice(0, 10)) {
+        console.log(`    ${c.id}`)
+      }
+      console.log(`\n  Be more specific: designkit add ${results[0].id}\n`)
+      process.exit(1)
+    }
+  }
+
+  // Ensure output dir exists
+  if (!existsSync(output)) {
+    mkdirSync(output, { recursive: true })
+  }
+
+  const fileName = basename(component.file)
+  const dest = join(output, fileName)
+  copyFileSync(component.file, dest)
+
+  console.log()
+  console.log(`  ✓ Added: ${component.name}`)
+  console.log(`    From:  ${component.relativePath}`)
+  console.log(`    To:    ${dest}`)
+  console.log()
+  console.log(`  Open ${fileName} in a browser to preview.`)
+  console.log(`  Make sure --kit-* tokens are defined in your CSS.`)
+  console.log(`  Run "designkit init" to get a tokens.css file.`)
+  console.log()
+}

package/src/commands/convert.js

@@ -0,0 +1,120 @@
+import Anthropic from '@anthropic-ai/sdk'
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join, resolve, extname, basename } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = join(__dirname, '../../')
+
+const FRAMEWORK_EXTENSIONS = {
+  react: '.jsx',
+  nextjs: '.jsx',
+  vue: '.vue',
+  svelte: '.svelte',
+  tailwind: '.html',
+  flutter: '.dart',
+  swiftui: '.swift',
+  'react-native': '.jsx'
+}
+
+function loadSkill(name) {
+  const skillPath = join(ROOT, 'skills', `${name}.md`)
+  if (!existsSync(skillPath)) return ''
+  return readFileSync(skillPath, 'utf8')
+}
+
+function loadAgentContext() {
+  const agentPath = join(ROOT, 'AI-AGENT.md')
+  if (!existsSync(agentPath)) return ''
+  return readFileSync(agentPath, 'utf8')
+}
+
+export async function convertCommand(file, options) {
+  const apiKey = process.env.ANTHROPIC_API_KEY
+  if (!apiKey) {
+    console.error('Error: ANTHROPIC_API_KEY environment variable is required')
+    console.error('Set it with: export ANTHROPIC_API_KEY=your_key_here')
+    process.exit(1)
+  }
+
+  const framework = options.to
+  if (!framework) {
+    console.error('Error: --to <framework> is required')
+    console.error('Available: react, nextjs, vue, svelte, tailwind, flutter, swiftui, react-native')
+    process.exit(1)
+  }
+
+  if (!FRAMEWORK_EXTENSIONS[framework]) {
+    console.error(`Error: Unknown framework "${framework}"`)
+    console.error(`Available: ${Object.keys(FRAMEWORK_EXTENSIONS).join(', ')}`)
+    process.exit(1)
+  }
+
+  const inputPath = resolve(file)
+  if (!existsSync(inputPath)) {
+    console.error(`Error: File not found: ${file}`)
+    process.exit(1)
+  }
+
+  const htmlContent = readFileSync(inputPath, 'utf8')
+  const agentContext = loadAgentContext()
+  const skillContent = loadSkill(framework)
+
+  if (!skillContent) {
+    console.error(`Error: Skill file not found: skills/${framework}.md`)
+    process.exit(1)
+  }
+
+  const systemPrompt = [
+    agentContext,
+    '---',
+    `# Active Skill: ${framework} (Convert mode)`,
+    skillContent
+  ].join('\n\n')
+
+  const userMessage = `Convert the following HTML component to ${framework}.\n\nFollow the Convert mode instructions in the skill above.\n\n\`\`\`html\n${htmlContent}\n\`\`\``
+
+  const client = new Anthropic({ apiKey })
+
+  console.error(`\nConverting: ${file}`)
+  console.error(`Framework: ${framework}\n`)
+
+  // Determine output path
+  let outputPath = options.output
+  if (!outputPath) {
+    const name = basename(inputPath, extname(inputPath))
+    const ext = FRAMEWORK_EXTENSIONS[framework]
+    outputPath = resolve(dirname(inputPath), `${name}${ext}`)
+  } else {
+    outputPath = resolve(outputPath)
+  }
+
+  const dir = dirname(outputPath)
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+
+  let fullOutput = ''
+
+  const stream = client.messages.stream({
+    model: 'claude-opus-4-6',
+    max_tokens: 8000,
+    thinking: { type: 'adaptive' },
+    system: systemPrompt,
+    messages: [
+      { role: 'user', content: userMessage }
+    ]
+  })
+
+  stream.on('text', (text) => {
+    process.stdout.write(text)
+    fullOutput += text
+  })
+
+  await stream.finalMessage()
+
+  // Extract code block if present
+  const codeMatch = fullOutput.match(/```(?:\w+)?\n([\s\S]*?)```/)
+  const codeToWrite = codeMatch ? codeMatch[1] : fullOutput
+
+  writeFileSync(outputPath, codeToWrite, 'utf8')
+  console.error(`\n\nSaved to: ${outputPath}`)
+}

package/src/commands/design.js

@@ -0,0 +1,89 @@
+import Anthropic from '@anthropic-ai/sdk'
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join, resolve } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ROOT = join(__dirname, '../../')
+
+function loadSkill(name) {
+  const skillPath = join(ROOT, 'skills', `${name}.md`)
+  if (!existsSync(skillPath)) return ''
+  return readFileSync(skillPath, 'utf8')
+}
+
+function loadAgentContext() {
+  const agentPath = join(ROOT, 'AI-AGENT.md')
+  if (!existsSync(agentPath)) return ''
+  return readFileSync(agentPath, 'utf8')
+}
+
+export async function designCommand(prompt, options) {
+  const apiKey = process.env.ANTHROPIC_API_KEY
+  if (!apiKey) {
+    console.error('Error: ANTHROPIC_API_KEY environment variable is required')
+    console.error('Set it with: export ANTHROPIC_API_KEY=your_key_here')
+    process.exit(1)
+  }
+
+  const skill = options.skill || 'design'
+  const validSkills = ['design', 'react', 'nextjs', 'vue', 'svelte', 'tailwind', 'flutter', 'swiftui', 'react-native']
+
+  if (!validSkills.includes(skill)) {
+    console.error(`Error: Unknown skill "${skill}". Available: ${validSkills.join(', ')}`)
+    process.exit(1)
+  }
+
+  const agentContext = loadAgentContext()
+  const skillContent = loadSkill(skill)
+
+  if (!skillContent) {
+    console.error(`Error: Skill file not found: skills/${skill}.md`)
+    process.exit(1)
+  }
+
+  const systemPrompt = [
+    agentContext,
+    '---',
+    `# Active Skill: ${skill}`,
+    skillContent
+  ].join('\n\n')
+
+  const client = new Anthropic({ apiKey })
+
+  console.error(`\nDesigning with skill: ${skill}`)
+  console.error(`Prompt: ${prompt}\n`)
+
+  const outputFile = options.output
+
+  if (outputFile) {
+    const dir = resolve(dirname(outputFile))
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+  }
+
+  let fullOutput = ''
+
+  const stream = client.messages.stream({
+    model: 'claude-opus-4-6',
+    max_tokens: 8000,
+    thinking: { type: 'adaptive' },
+    system: systemPrompt,
+    messages: [
+      { role: 'user', content: prompt }
+    ]
+  })
+
+  stream.on('text', (text) => {
+    process.stdout.write(text)
+    fullOutput += text
+  })
+
+  await stream.finalMessage()
+
+  if (outputFile) {
+    writeFileSync(resolve(outputFile), fullOutput, 'utf8')
+    console.error(`\n\nSaved to: ${outputFile}`)
+  } else {
+    process.stdout.write('\n')
+  }
+}