lokuma-cli 1.2.4 → 1.2.6

package/dist/index.js

@@ -84,50 +84,163 @@ function resolvePath(p) {
 function buildSkillMd(scriptPath) {
   return `---
 name: lokuma
-description: Lokuma design intelligence. 67 UI styles, 161 color palettes, 57 font pairings, 25 chart types, 99 UX guidelines. Triggers: build, design, create, implement UI/UX. Projects: landing page, dashboard, SaaS, e-commerce, portfolio, mobile app. Styles: glassmorphism, minimalism, brutalism, neumorphism, bento grid, dark mode.
+description: >
+  Lokuma design intelligence. Query this skill whenever building or modifying
+  UI \u2014 landing pages, dashboards, SaaS products, mobile apps, e-commerce,
+  portfolios, admin panels. Provides: UI style recommendations, color palettes,
+  typography pairings, chart types, UX best practices, layout patterns.
+  Trigger keywords: build, design, create, implement, landing page, dashboard,
+  UI, UX, component, layout, color, font, style, theme, dark mode, responsive,
+  animation, accessibility.
 ---
 
-# Lokuma - Design Intelligence
+# Lokuma \u2014 Design Intelligence Skill
+
+## When to Use This Skill
+
+**Always invoke before writing UI code** for:
+- New pages or screens (landing, dashboard, onboarding, settings, checkout)
+- New UI components (cards, modals, forms, charts, navigation, hero sections)
+- Style/color/typography decisions ("what color scheme fits a fintech app?")
+- UX reviews ("is this layout accessible?", "why does this feel off?")
+- Dark mode, responsive layout, animation decisions
+
+**Skip for**: pure backend logic, API design, database work, DevOps.
+
+> Rule of thumb: if the task changes how something **looks, feels, moves, or is interacted with** \u2014 use this skill.
+
+---
 
 ## Setup
 
-Set your API key (required):
 \`\`\`bash
 export LOKUMA_API_KEY=lokuma_your_key_here
 \`\`\`
 
-Get your API key at https://lokuma.io
+Get your key at **https://lokuma.ai**
 
-## Usage
+---
+
+## Workflow (follow this order)
+
+### Step 1 \u2014 Generate Design System (always start here)
+
+Run this first for any new project, page, or major component:
 
-### Generate Design System (start here)
 \`\`\`bash
-python3 ${scriptPath} "<product description>" --design-system [-p "Project Name"]
+python3 ${scriptPath} "<product type> <industry> <style keywords>" --design-system [-p "Project Name"]
 \`\`\`
 
-Example:
+**Query strategy \u2014 be specific and multi-dimensional:**
+- \u2705 \`"beauty spa wellness booking service"\`
+- \u2705 \`"fintech crypto dashboard dark professional"\`
+- \u2705 \`"SaaS productivity tool minimal clean"\`
+- \u274C \`"app"\` or \`"website"\` (too vague)
+
+Output includes: page pattern, UI style, color palette, typography, key effects, anti-patterns.
+
+### Step 2 \u2014 Domain search (for specific decisions)
+
+After the design system, use targeted domain searches for deeper detail:
+
 \`\`\`bash
-python3 ${scriptPath} "beauty spa wellness" --design-system -p "Serenity Spa"
+python3 ${scriptPath} "<keywords>" --domain <domain> [-n <count>]
 \`\`\`
 
-### Domain Search
+| Domain | When to use | Example query |
+|--------|-------------|---------------|
+| \`style\` | Choosing visual style, CSS effects | \`"glassmorphism dark dashboard"\` |
+| \`color\` | Color palette, brand colors | \`"fintech trust blue professional"\` |
+| \`typography\` | Font pairing, heading/body combo | \`"elegant modern serif display"\` |
+| \`chart\` | Data visualization type selection | \`"real-time comparison time-series"\` |
+| \`landing\` | Page structure, CTA strategy | \`"hero social-proof conversion"\` |
+| \`product\` | Industry-specific patterns | \`"e-commerce fashion luxury"\` |
+| \`ux\` | Best practices, anti-patterns | \`"form validation animation loading"\` |
+| \`icons\` | Icon library recommendations | \`"outline minimal consistent"\` |
+| \`react\` | React/Next.js performance patterns | \`"virtualize memo bundle lazy"\` |
+| \`web\` | Accessibility, responsive, web perf | \`"contrast keyboard aria mobile"\` |
+| \`google-fonts\` | Font discovery by style | \`"geometric sans modern clean"\` |
+
+### Step 3 \u2014 Stack guidelines (implementation best practices)
+
 \`\`\`bash
-python3 ${scriptPath} "<keyword>" --domain <domain>
+python3 ${scriptPath} "<keywords>" --stack react-native
 \`\`\`
 
-Domains: \`style\` \`color\` \`typography\` \`chart\` \`landing\` \`product\` \`ux\` \`icons\`
+Use for: navigation patterns, list performance, gesture conflicts, safe areas.
+
+---
+
+## Query Writing Guide
+
+The search is keyword-based. **Better queries = better results.**
+
+| Situation | Good query | Poor query |
+|-----------|-----------|------------|
+| Wellness app | \`"spa wellness organic natural calm"\` | \`"health app"\` |
+| Finance tool | \`"fintech banking trust dark minimal"\` | \`"finance"\` |
+| Creative portfolio | \`"portfolio creative bold editorial brutalism"\` | \`"portfolio site"\` |
+| Kids app | \`"children playful colorful rounded friendly"\` | \`"kid app"\` |
+| Data dashboard | \`"analytics dashboard dark data-dense professional"\` | \`"dashboard"\` |
+
+**Tips:**
+- Combine: **product type + industry + tone + density + audience**
+- Use style vocabulary: \`minimal, vibrant, editorial, organic, corporate, playful, dark, light, glassmorphism, neumorphism, brutalism, bento\`
+- Use UX vocabulary: \`conversion, trust, engagement, immersive, content-first, task-focused\`
+
+---
+
+## Examples
+
+\`\`\`bash
+# Full design system for a SaaS landing page
+python3 ${scriptPath} "SaaS productivity tool minimal clean" --design-system -p "TaskFlow"
+
+# Color palette for a healthcare app
+python3 ${scriptPath} "healthcare medical trust calm" --domain color
+
+# Typography for an editorial blog
+python3 ${scriptPath} "editorial magazine bold serif" --domain typography
+
+# UX review for a checkout flow
+python3 ${scriptPath} "checkout form validation error states" --domain ux
+
+# Chart selection for an analytics dashboard
+python3 ${scriptPath} "time-series comparison trend realtime" --domain chart
+
+# React Native navigation best practices
+python3 ${scriptPath} "navigation stack gesture performance" --stack react-native
+\`\`\`
+
+---
+
+## Output Formats
 
-### Stack Guidelines
 \`\`\`bash
-python3 ${scriptPath} "<keyword>" --stack react-native
+# ASCII (default, terminal-friendly)
+python3 ${scriptPath} "fintech crypto" --design-system
+
+# Markdown (for docs/comments)
+python3 ${scriptPath} "fintech crypto" --design-system -f markdown
+
+# JSON (for programmatic use)
+python3 ${scriptPath} "fintech crypto" --design-system -f json
 \`\`\`
 
-## Workflow
+---
+
+## Pre-delivery Checklist
+
+Before shipping UI code, verify:
 
-1. **New project** \u2192 \`--design-system\` first to get full design system
-2. **Component** \u2192 \`--domain style\` or \`--domain ux\`
-3. **Colors/fonts** \u2192 \`--domain color\` or \`--domain typography\`
-4. **Review** \u2192 \`--domain ux\` for best practices
+- [ ] Contrast \u2265 4.5:1 for body text, \u2265 3:1 for large text (both light & dark mode)
+- [ ] Touch targets \u2265 44\xD744px (mobile) with adequate spacing
+- [ ] No emoji as icons \u2014 use SVG icon libraries
+- [ ] Loading states and error states implemented
+- [ ] Mobile-first layout tested at 375px width
+- [ ] Safe areas respected (notch, home indicator, tab bar)
+- [ ] Focus styles visible for keyboard navigation
+- [ ] Reduced-motion respected for animations
 `;
 }
 async function exists(path) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lokuma-cli",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "CLI to install Lokuma design intelligence skill for AI coding assistants",
   "type": "module",
   "bin": {