lokuma-cli 1.2.6 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +131 -86
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -85,29 +85,31 @@ function buildSkillMd(scriptPath) {
|
|
|
85
85
|
return `---
|
|
86
86
|
name: lokuma
|
|
87
87
|
description: >
|
|
88
|
-
Lokuma design intelligence.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
UI, UX, component, layout, color, font, style, theme, dark mode, responsive,
|
|
94
|
-
animation, accessibility.
|
|
88
|
+
Lokuma design intelligence. Use this skill whenever building or modifying UI:
|
|
89
|
+
landing pages, dashboards, SaaS products, mobile apps, e-commerce, portfolios,
|
|
90
|
+
admin panels, onboarding flows, settings screens, pricing pages, forms, charts,
|
|
91
|
+
and design systems. Best used by describing the product, audience, platform,
|
|
92
|
+
tone, and business goal in natural language.
|
|
95
93
|
---
|
|
96
94
|
|
|
97
95
|
# Lokuma \u2014 Design Intelligence Skill
|
|
98
96
|
|
|
99
97
|
## When to Use This Skill
|
|
100
98
|
|
|
101
|
-
|
|
102
|
-
- New pages or screens (landing, dashboard, onboarding, settings, checkout)
|
|
103
|
-
- New UI components (cards, modals, forms, charts, navigation, hero sections)
|
|
104
|
-
- Style/color/typography decisions ("what color scheme fits a fintech app?")
|
|
105
|
-
- UX reviews ("is this layout accessible?", "why does this feel off?")
|
|
106
|
-
- Dark mode, responsive layout, animation decisions
|
|
99
|
+
Use Lokuma whenever the task affects how something **looks, feels, moves, or is interacted with**.
|
|
107
100
|
|
|
108
|
-
|
|
101
|
+
### Must use for
|
|
102
|
+
- New pages or screens
|
|
103
|
+
- New components (cards, forms, modals, nav, hero sections, charts)
|
|
104
|
+
- Choosing visual style, colors, typography, spacing, or layout direction
|
|
105
|
+
- UX reviews, accessibility reviews, dark mode, responsive behavior
|
|
106
|
+
- Converting vague product ideas into a coherent design direction
|
|
109
107
|
|
|
110
|
-
|
|
108
|
+
### Skip for
|
|
109
|
+
- Pure backend logic
|
|
110
|
+
- Database / API design
|
|
111
|
+
- Infra / DevOps work
|
|
112
|
+
- Non-UI scripting
|
|
111
113
|
|
|
112
114
|
---
|
|
113
115
|
|
|
@@ -121,95 +123,139 @@ Get your key at **https://lokuma.ai**
|
|
|
121
123
|
|
|
122
124
|
---
|
|
123
125
|
|
|
124
|
-
##
|
|
126
|
+
## How to Query Lokuma (important)
|
|
125
127
|
|
|
126
|
-
|
|
128
|
+
**You do NOT need to invent rigid search keywords anymore.**
|
|
127
129
|
|
|
128
|
-
|
|
130
|
+
Lokuma now uses an AI semantic selector in the cloud. That means the best input is usually just a **clear natural-language description of the design need**.
|
|
131
|
+
|
|
132
|
+
### Good inputs
|
|
133
|
+
- What the product is
|
|
134
|
+
- Who it is for
|
|
135
|
+
- What platform it lives on (web, mobile app, dashboard, landing page)
|
|
136
|
+
- What feeling or brand tone it should convey
|
|
137
|
+
- Any special goals (conversion, trust, clarity, premium feel, speed, playfulness)
|
|
138
|
+
|
|
139
|
+
### Examples of good natural-language input
|
|
140
|
+
- "A meditation and sleep mobile app for young professionals. Calm, premium, organic, not too clinical."
|
|
141
|
+
- "A landing page for an AI note-taking SaaS. Clean, modern, trustworthy, conversion-focused."
|
|
142
|
+
- "A fintech dashboard for small businesses. Professional, data-dense, readable, high trust."
|
|
143
|
+
- "An e-commerce brand for handmade skincare. Warm, soft, elegant, natural, slightly editorial."
|
|
144
|
+
|
|
145
|
+
### Better results if you include
|
|
146
|
+
- **Product**: what it is
|
|
147
|
+
- **Audience**: who uses it
|
|
148
|
+
- **Platform**: app / web / dashboard / landing / admin
|
|
149
|
+
- **Tone**: calm / playful / bold / premium / trustworthy / minimal / editorial
|
|
150
|
+
- **Goal**: conversion / retention / clarity / efficiency / immersion / delight
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## Recommended Workflow
|
|
155
|
+
|
|
156
|
+
### 1) Start with design system
|
|
157
|
+
For any new project, new page, or fuzzy design request, start here:
|
|
129
158
|
|
|
130
159
|
\`\`\`bash
|
|
131
|
-
python3 ${scriptPath} "<
|
|
160
|
+
python3 ${scriptPath} "<natural language product/design request>" --design-system [-p "Project Name"]
|
|
132
161
|
\`\`\`
|
|
133
162
|
|
|
134
|
-
|
|
135
|
-
- \u2705 \`"beauty spa wellness booking service"\`
|
|
136
|
-
- \u2705 \`"fintech crypto dashboard dark professional"\`
|
|
137
|
-
- \u2705 \`"SaaS productivity tool minimal clean"\`
|
|
138
|
-
- \u274C \`"app"\` or \`"website"\` (too vague)
|
|
163
|
+
Examples:
|
|
139
164
|
|
|
140
|
-
|
|
165
|
+
\`\`\`bash
|
|
166
|
+
python3 ${scriptPath} "A meditation app for stressed professionals. Calm, premium, organic, soft and trustworthy." --design-system -p "Still"
|
|
141
167
|
|
|
142
|
-
|
|
168
|
+
python3 ${scriptPath} "A landing page for an AI sales assistant SaaS. Modern, sharp, fast, conversion-focused, investor-friendly." --design-system -p "Closer"
|
|
169
|
+
\`\`\`
|
|
143
170
|
|
|
144
|
-
|
|
171
|
+
This returns a full design direction:
|
|
172
|
+
- page / conversion pattern
|
|
173
|
+
- visual style
|
|
174
|
+
- color direction
|
|
175
|
+
- typography
|
|
176
|
+
- key effects
|
|
177
|
+
- anti-patterns to avoid
|
|
178
|
+
|
|
179
|
+
### 2) Use domain search for focused follow-up
|
|
180
|
+
After design-system, use targeted search only when you want more detail in one area.
|
|
145
181
|
|
|
146
182
|
\`\`\`bash
|
|
147
|
-
python3 ${scriptPath} "<
|
|
183
|
+
python3 ${scriptPath} "<design need>" --domain <domain> [-n <count>]
|
|
148
184
|
\`\`\`
|
|
149
185
|
|
|
150
|
-
| Domain |
|
|
151
|
-
|
|
152
|
-
| \`style\` |
|
|
153
|
-
| \`color\` |
|
|
154
|
-
| \`typography\` |
|
|
155
|
-
| \`
|
|
156
|
-
| \`
|
|
157
|
-
| \`
|
|
158
|
-
| \`
|
|
159
|
-
| \`
|
|
160
|
-
| \`
|
|
161
|
-
| \`
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
186
|
+
| Domain | Use it when you want... |
|
|
187
|
+
|--------|--------------------------|
|
|
188
|
+
| \`style\` | visual direction / aesthetic language |
|
|
189
|
+
| \`color\` | palettes / mood / brand color strategy |
|
|
190
|
+
| \`typography\` | font pairing and hierarchy |
|
|
191
|
+
| \`product\` | industry-specific design patterns |
|
|
192
|
+
| \`reasoning\` | design logic and decision support |
|
|
193
|
+
| \`ux\` | usability, accessibility, interaction best practices |
|
|
194
|
+
| \`chart\` | data visualization type recommendations |
|
|
195
|
+
| \`landing\` | landing page structure and CTA strategy |
|
|
196
|
+
| \`icons\` | icon style / library suggestions |
|
|
197
|
+
| \`google-fonts\` | specific Google Font discovery |
|
|
198
|
+
|
|
199
|
+
Examples:
|
|
200
|
+
|
|
201
|
+
\`\`\`bash
|
|
202
|
+
python3 ${scriptPath} "Need a calm but premium color direction for a wellness app" --domain color
|
|
203
|
+
python3 ${scriptPath} "What typography fits a luxury skincare brand with an editorial feel?" --domain typography
|
|
204
|
+
python3 ${scriptPath} "Best landing page structure for an AI productivity SaaS that needs signups" --domain landing
|
|
205
|
+
python3 ${scriptPath} "UX risks in a mobile checkout flow with address, payment, and promo code" --domain ux
|
|
206
|
+
\`\`\`
|
|
165
207
|
|
|
208
|
+
### 3) Use stack search for implementation-specific guidance
|
|
166
209
|
\`\`\`bash
|
|
167
|
-
python3 ${scriptPath} "
|
|
210
|
+
python3 ${scriptPath} "navigation performance and gestures" --stack react-native
|
|
168
211
|
\`\`\`
|
|
169
212
|
|
|
170
|
-
Use
|
|
213
|
+
Use this when you need technical guidance for implementation rather than visual direction.
|
|
171
214
|
|
|
172
215
|
---
|
|
173
216
|
|
|
174
|
-
##
|
|
217
|
+
## Practical Advice for AI Coding Assistants
|
|
175
218
|
|
|
176
|
-
|
|
219
|
+
### Prefer the user's original language
|
|
220
|
+
If the user already described what they want clearly, pass that directly into Lokuma. Do **not** aggressively compress it into keywords unless needed.
|
|
177
221
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
| Data dashboard | \`"analytics dashboard dark data-dense professional"\` | \`"dashboard"\` |
|
|
222
|
+
### Use design-system first when the task is broad
|
|
223
|
+
If the user says things like:
|
|
224
|
+
- "build a landing page"
|
|
225
|
+
- "make this app feel more premium"
|
|
226
|
+
- "what style should this dashboard use"
|
|
227
|
+
- "design a fintech onboarding flow"
|
|
185
228
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
229
|
+
then use \`--design-system\` first.
|
|
230
|
+
|
|
231
|
+
### Use domain search when the decision is narrow
|
|
232
|
+
If the user only needs:
|
|
233
|
+
- a palette
|
|
234
|
+
- a font direction
|
|
235
|
+
- a chart type
|
|
236
|
+
- UX review notes
|
|
237
|
+
|
|
238
|
+
then use a focused domain query.
|
|
190
239
|
|
|
191
240
|
---
|
|
192
241
|
|
|
193
242
|
## Examples
|
|
194
243
|
|
|
195
244
|
\`\`\`bash
|
|
196
|
-
# Full
|
|
197
|
-
python3 ${scriptPath} "
|
|
245
|
+
# Full product direction
|
|
246
|
+
python3 ${scriptPath} "A wellness subscription app for burnout recovery. Soft, warm, calming, organic, habit-forming." --design-system -p "Exhale"
|
|
198
247
|
|
|
199
|
-
#
|
|
200
|
-
python3 ${scriptPath} "
|
|
248
|
+
# Landing page strategy
|
|
249
|
+
python3 ${scriptPath} "A homepage for an AI coding assistant targeting startups. High trust, fast clarity, strong CTA." --domain landing
|
|
201
250
|
|
|
202
|
-
#
|
|
203
|
-
python3 ${scriptPath} "editorial
|
|
251
|
+
# Style direction
|
|
252
|
+
python3 ${scriptPath} "A creative portfolio site for a motion designer. Bold, editorial, experimental, but still readable." --domain style
|
|
204
253
|
|
|
205
|
-
#
|
|
206
|
-
python3 ${scriptPath} "
|
|
254
|
+
# Color direction
|
|
255
|
+
python3 ${scriptPath} "A secure but friendly fintech app for freelancers" --domain color
|
|
207
256
|
|
|
208
|
-
#
|
|
209
|
-
python3 ${scriptPath} "
|
|
210
|
-
|
|
211
|
-
# React Native navigation best practices
|
|
212
|
-
python3 ${scriptPath} "navigation stack gesture performance" --stack react-native
|
|
257
|
+
# UX guidance
|
|
258
|
+
python3 ${scriptPath} "A mobile onboarding flow with permissions, account creation, and trust concerns" --domain ux
|
|
213
259
|
\`\`\`
|
|
214
260
|
|
|
215
261
|
---
|
|
@@ -217,14 +263,14 @@ python3 ${scriptPath} "navigation stack gesture performance" --stack react-nativ
|
|
|
217
263
|
## Output Formats
|
|
218
264
|
|
|
219
265
|
\`\`\`bash
|
|
220
|
-
#
|
|
221
|
-
python3 ${scriptPath} "fintech
|
|
266
|
+
# JSON (best for programmatic use)
|
|
267
|
+
python3 ${scriptPath} "A fintech mobile app for young investors" --design-system -f json
|
|
222
268
|
|
|
223
|
-
# Markdown (for docs/
|
|
224
|
-
python3 ${scriptPath} "fintech
|
|
269
|
+
# Markdown (best for docs / notes)
|
|
270
|
+
python3 ${scriptPath} "A fintech mobile app for young investors" --design-system -f markdown
|
|
225
271
|
|
|
226
|
-
#
|
|
227
|
-
python3 ${scriptPath} "fintech
|
|
272
|
+
# ASCII (default terminal output)
|
|
273
|
+
python3 ${scriptPath} "A fintech mobile app for young investors" --design-system
|
|
228
274
|
\`\`\`
|
|
229
275
|
|
|
230
276
|
---
|
|
@@ -232,15 +278,14 @@ python3 ${scriptPath} "fintech crypto" --design-system -f json
|
|
|
232
278
|
## Pre-delivery Checklist
|
|
233
279
|
|
|
234
280
|
Before shipping UI code, verify:
|
|
235
|
-
|
|
236
|
-
- [ ] Contrast
|
|
237
|
-
- [ ] Touch targets
|
|
238
|
-
- [ ]
|
|
239
|
-
- [ ]
|
|
240
|
-
- [ ]
|
|
241
|
-
- [ ]
|
|
242
|
-
- [ ]
|
|
243
|
-
- [ ] Reduced-motion respected for animations
|
|
281
|
+
- [ ] Clear visual hierarchy
|
|
282
|
+
- [ ] Contrast is accessible in light and dark mode
|
|
283
|
+
- [ ] Touch targets are large enough on mobile
|
|
284
|
+
- [ ] Loading / empty / error states exist
|
|
285
|
+
- [ ] Layout works at small widths
|
|
286
|
+
- [ ] Motion feels intentional, not noisy
|
|
287
|
+
- [ ] Icons are consistent and non-emoji
|
|
288
|
+
- [ ] The UI matches the user's product, audience, and brand tone
|
|
244
289
|
`;
|
|
245
290
|
}
|
|
246
291
|
async function exists(path) {
|