ui-ux-consultant-cli 1.0.0-beta.1

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.
Files changed (30) hide show
  1. package/assets/ui-ux-consultant/SKILL.md +844 -0
  2. package/assets/ui-ux-consultant/references/accessibility.md +175 -0
  3. package/assets/ui-ux-consultant/references/alt-libraries.md +90 -0
  4. package/assets/ui-ux-consultant/references/animations.md +448 -0
  5. package/assets/ui-ux-consultant/references/catalog/colors.md +91 -0
  6. package/assets/ui-ux-consultant/references/catalog/fonts.md +363 -0
  7. package/assets/ui-ux-consultant/references/catalog/products.md +340 -0
  8. package/assets/ui-ux-consultant/references/catalog/styles.md +165 -0
  9. package/assets/ui-ux-consultant/references/components.md +1116 -0
  10. package/assets/ui-ux-consultant/references/patterns.md +600 -0
  11. package/assets/ui-ux-consultant/references/performance.md +198 -0
  12. package/assets/ui-ux-consultant/references/stacks/astro.md +382 -0
  13. package/assets/ui-ux-consultant/references/stacks/flutter.md +308 -0
  14. package/assets/ui-ux-consultant/references/stacks/html-tailwind.md +415 -0
  15. package/assets/ui-ux-consultant/references/stacks/jetpack-compose.md +333 -0
  16. package/assets/ui-ux-consultant/references/stacks/laravel.md +521 -0
  17. package/assets/ui-ux-consultant/references/stacks/nextjs.md +275 -0
  18. package/assets/ui-ux-consultant/references/stacks/nuxt-ui.md +384 -0
  19. package/assets/ui-ux-consultant/references/stacks/nuxtjs.md +264 -0
  20. package/assets/ui-ux-consultant/references/stacks/react-native.md +346 -0
  21. package/assets/ui-ux-consultant/references/stacks/react.md +268 -0
  22. package/assets/ui-ux-consultant/references/stacks/shadcn.md +485 -0
  23. package/assets/ui-ux-consultant/references/stacks/svelte.md +429 -0
  24. package/assets/ui-ux-consultant/references/stacks/swiftui.md +336 -0
  25. package/assets/ui-ux-consultant/references/stacks/threejs.md +366 -0
  26. package/assets/ui-ux-consultant/references/stacks/vue.md +272 -0
  27. package/assets/ui-ux-consultant/references/theming.md +701 -0
  28. package/dist/index.d.ts +2 -0
  29. package/dist/index.js +130 -0
  30. package/package.json +51 -0
package/assets/ui-ux-consultant/references/stacks/html-tailwind.md ADDED
@@ -0,0 +1,415 @@
1
+ # Pure HTML + Tailwind CSS — UI/UX Reference
2
+
3
+ ## When to Read
4
+ Use this file when building UI with plain HTML and Tailwind CSS — no JavaScript framework. Covers layout, components, dark mode, Tailwind v4 patterns, and minimal interactivity with Alpine.js or Vanilla JS.
5
+
6
+ ---
7
+
8
+ ## Recommended Libraries
9
+
10
+ | Library | Type | Install |
11
+ |---|---|---|
12
+ | DaisyUI | Pre-built Tailwind component classes | `npm install daisyui` |
13
+ | Flowbite | HTML components + JS behaviors | `npm install flowbite` |
14
+ | Preline | Copy-paste HTML blocks | Free on preline.co |
15
+ | Headless UI | Accessible JS behaviors (React/Vue) | `npm install @headlessui/react` |
16
+ | Alpine.js | Lightweight interactivity (no build step) | CDN or `npm install alpinejs` |
17
+ | Floating UI | Tooltips, dropdowns, popovers | `npm install @floating-ui/dom` |
18
+ | AOS | Scroll animations | `npm install aos` |
19
+
20
+ ---
21
+
22
+ ## Style Recommendations
23
+
24
+ - **Landing pages:** Aurora UI, Motion-Driven, Glassmorphism accents
25
+ - **Documentation:** Minimalism + dark mode first
26
+ - **Marketing / SaaS:** Bold Typography + Vibrant accent color
27
+ - **Dashboard:** Custom Tailwind grid, neutral palette, tight spacing
28
+ - **Portfolio / creative:** Large imagery, editorial typography, minimal UI chrome
29
+ - **E-commerce:** Clean white space, clear hierarchy, high-contrast CTAs
30
+
31
+ ---
32
+
33
+ ## Setup Options
34
+
35
+ ### CDN (Prototype / No Build)
36
+
37
+ ```html
38
+ <!DOCTYPE html>
39
+ <html lang="en">
40
+ <head>
41
+ <meta charset="UTF-8">
42
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
43
+ <script src="https://cdn.tailwindcss.com"></script>
44
+ <title>My App</title>
45
+ </head>
46
+ <body class="bg-white text-gray-900 antialiased">
47
+ <!-- content -->
48
+ </body>
49
+ </html>
50
+ ```
51
+
52
+ ### Vite (Recommended for Production)
53
+
54
+ ```bash
55
+ npm create vite@latest my-app -- --template vanilla
56
+ cd my-app
57
+ npm install tailwindcss @tailwindcss/vite
58
+ ```
59
+
60
+ ```typescript
61
+ // vite.config.ts
62
+ import { defineConfig } from 'vite';
63
+ import tailwindcss from '@tailwindcss/vite';
64
+
65
+ export default defineConfig({
66
+ plugins: [tailwindcss()],
67
+ });
68
+ ```
69
+
70
+ ```css
71
+ /* src/style.css */
72
+ @import "tailwindcss";
73
+ /* Tailwind v4: no tailwind.config.js needed */
74
+ ```
75
+
76
+ ### Tailwind v4 Custom Theme
77
+
78
+ ```css
79
+ /* style.css */
80
+ @import "tailwindcss";
81
+
82
+ @theme {
83
+ --color-brand: #2563EB;
84
+ --color-brand-dark: #1D4ED8;
85
+ --color-brand-50: #EFF6FF;
86
+ --font-display: 'Cal Sans', sans-serif;
87
+ --font-body: 'Inter', sans-serif;
88
+ --radius-card: 0.75rem;
89
+ }
90
+
91
+ /* Usage: class="bg-brand text-brand font-display" */
92
+ ```
93
+
94
+ ---
95
+
96
+ ## Top UX Patterns with Code
97
+
98
+ ### 1. Navigation Bar
99
+
100
+ ```html
101
+ <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
102
+ <nav class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
103
+ <!-- Logo -->
104
+ <a href="/" class="flex items-center gap-2 font-semibold text-gray-900">
105
+ <svg class="w-6 h-6 text-blue-600" ...></svg>
106
+ Brand
107
+ </a>
108
+
109
+ <!-- Desktop links -->
110
+ <div class="hidden md:flex items-center gap-8 text-sm text-gray-600">
111
+ <a href="/features" class="hover:text-gray-900 transition-colors">Features</a>
112
+ <a href="/pricing" class="hover:text-gray-900 transition-colors">Pricing</a>
113
+ <a href="/docs" class="hover:text-gray-900 transition-colors">Docs</a>
114
+ </div>
115
+
116
+ <!-- CTA -->
117
+ <div class="flex items-center gap-3">
118
+ <a href="/login" class="text-sm text-gray-600 hover:text-gray-900">Log in</a>
119
+ <a href="/signup" class="px-4 py-2 bg-gray-900 text-white text-sm rounded-full hover:bg-gray-700 transition-colors">
120
+ Get started
121
+ </a>
122
+ </div>
123
+
124
+ <!-- Mobile menu button -->
125
+ <button class="md:hidden p-2" aria-label="Open menu">
126
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
127
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
128
+ </svg>
129
+ </button>
130
+ </nav>
131
+ </header>
132
+ ```
133
+
134
+ ### 2. Hero Section
135
+
136
+ ```html
137
+ <section class="py-24 md:py-32 px-6 text-center">
138
+ <div class="max-w-4xl mx-auto">
139
+ <!-- Badge -->
140
+ <span class="inline-flex items-center gap-2 px-3 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full mb-6">
141
+ <span class="w-1.5 h-1.5 bg-blue-500 rounded-full"></span>
142
+ Now in public beta
143
+ </span>
144
+
145
+ <!-- Headline -->
146
+ <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-gray-900 mb-6 leading-none">
147
+ Build something
148
+ <span class="text-blue-600">great</span>
149
+ </h1>
150
+
151
+ <!-- Subtext -->
152
+ <p class="text-xl text-gray-500 mb-10 max-w-2xl mx-auto leading-relaxed">
153
+ The toolkit for building modern web applications. Ship faster with
154
+ less boilerplate and more focus on what matters.
155
+ </p>
156
+
157
+ <!-- CTAs -->
158
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
159
+ <a href="/get-started"
160
+ class="w-full sm:w-auto px-8 py-4 bg-gray-900 text-white rounded-full font-medium hover:bg-gray-700 transition-colors">
161
+ Get started free
162
+ </a>
163
+ <a href="/demo"
164
+ class="w-full sm:w-auto px-8 py-4 border border-gray-200 text-gray-700 rounded-full font-medium hover:border-gray-300 hover:bg-gray-50 transition-colors">
165
+ Watch demo →
166
+ </a>
167
+ </div>
168
+ </div>
169
+ </section>
170
+ ```
171
+
172
+ ### 3. Card Components
173
+
174
+ ```html
175
+ <!-- Basic card -->
176
+ <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
177
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
178
+ <svg class="w-5 h-5 text-blue-600" ...></svg>
179
+ </div>
180
+ <h3 class="font-semibold text-gray-900 mb-2">Card Title</h3>
181
+ <p class="text-sm text-gray-600 leading-relaxed">
182
+ Description text with good line length and comfortable spacing.
183
+ </p>
184
+ </div>
185
+
186
+ <!-- Feature grid -->
187
+ <section class="py-24 px-6">
188
+ <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
189
+ <!-- Card repeated -->
190
+ </div>
191
+ </section>
192
+
193
+ <!-- Pricing card (highlighted) -->
194
+ <div class="relative rounded-2xl bg-gray-900 text-white p-8">
195
+ <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-blue-500 text-white text-xs font-medium rounded-full">
196
+ Most popular
197
+ </span>
198
+ <h3 class="text-2xl font-bold mb-2">Pro</h3>
199
+ <p class="text-gray-400 mb-6">For growing teams</p>
200
+ <div class="text-4xl font-bold mb-8">$49<span class="text-lg font-normal text-gray-400">/mo</span></div>
201
+ <a href="/signup" class="block text-center py-3 bg-white text-gray-900 rounded-xl font-medium hover:bg-gray-100 transition-colors">
202
+ Start free trial
203
+ </a>
204
+ </div>
205
+ ```
206
+
207
+ ### 4. Form Elements
208
+
209
+ ```html
210
+ <form class="space-y-6 max-w-md">
211
+ <!-- Text input with label -->
212
+ <div class="space-y-2">
213
+ <label for="email" class="block text-sm font-medium text-gray-700">
214
+ Email address
215
+ </label>
216
+ <input
217
+ id="email" name="email" type="email"
218
+ placeholder="you@example.com"
219
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm
220
+ focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
221
+ placeholder:text-gray-400 transition-colors"
222
+ />
223
+ <p class="text-xs text-gray-500">We'll never share your email.</p>
224
+ </div>
225
+
226
+ <!-- Select -->
227
+ <div class="space-y-2">
228
+ <label for="role" class="block text-sm font-medium text-gray-700">Role</label>
229
+ <select id="role" name="role"
230
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white
231
+ focus:outline-none focus:ring-2 focus:ring-blue-500">
232
+ <option value="">Select a role</option>
233
+ <option value="admin">Admin</option>
234
+ <option value="user">User</option>
235
+ </select>
236
+ </div>
237
+
238
+ <!-- Checkbox -->
239
+ <label class="flex items-start gap-3 cursor-pointer">
240
+ <input type="checkbox" class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600
241
+ focus:ring-blue-500" />
242
+ <span class="text-sm text-gray-600">
243
+ I agree to the <a href="/terms" class="text-blue-600 hover:underline">Terms of Service</a>
244
+ </span>
245
+ </label>
246
+
247
+ <!-- Submit button -->
248
+ <button type="submit"
249
+ class="w-full py-3 px-6 bg-gray-900 text-white text-sm font-medium rounded-lg
250
+ hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900
251
+ transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
252
+ Create account
253
+ </button>
254
+ </form>
255
+ ```
256
+
257
+ ### 5. Dark Mode
258
+
259
+ ```html
260
+ <!-- Toggle class="dark" on <html> element -->
261
+ <html lang="en" class="dark">
262
+ <body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
263
+
264
+ <!-- Components with dark variants -->
265
+ <div class="border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 rounded-xl p-6">
266
+ <h2 class="text-gray-900 dark:text-white font-semibold">Title</h2>
267
+ <p class="text-gray-600 dark:text-gray-400">Description</p>
268
+ </div>
269
+ ```
270
+
271
+ ```javascript
272
+ // Dark mode toggle
273
+ const toggle = document.getElementById('theme-toggle');
274
+ const html = document.documentElement;
275
+
276
+ // On load: check saved preference
277
+ if (localStorage.theme === 'dark' ||
278
+ (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
279
+ html.classList.add('dark');
280
+ }
281
+
282
+ toggle.addEventListener('click', () => {
283
+ html.classList.toggle('dark');
284
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
285
+ });
286
+ ```
287
+
288
+ ### 6. Alpine.js Interactivity
289
+
290
+ ```html
291
+ <!-- Install: <script src="//unpkg.com/alpinejs" defer></script> -->
292
+
293
+ <!-- Dropdown -->
294
+ <div x-data="{ open: false }" class="relative">
295
+ <button @click="open = !open" @keydown.escape="open = false"
296
+ class="px-4 py-2 border rounded-lg flex items-center gap-2">
297
+ Options
298
+ <svg class="w-4 h-4 transition-transform" :class="open && 'rotate-180'" ...></svg>
299
+ </button>
300
+ <div x-show="open" x-transition @click.outside="open = false"
301
+ class="absolute top-full mt-2 w-48 bg-white border rounded-lg shadow-lg py-1 z-10">
302
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">Edit</a>
303
+ <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50">Delete</a>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Tabs -->
308
+ <div x-data="{ tab: 'overview' }">
309
+ <div class="flex border-b">
310
+ <button @click="tab = 'overview'"
311
+ :class="tab === 'overview' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'"
312
+ class="px-4 py-2 text-sm font-medium -mb-px">Overview</button>
313
+ <button @click="tab = 'settings'"
314
+ :class="tab === 'settings' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500'"
315
+ class="px-4 py-2 text-sm font-medium -mb-px">Settings</button>
316
+ </div>
317
+ <div x-show="tab === 'overview'" class="py-4">Overview content</div>
318
+ <div x-show="tab === 'settings'" class="py-4">Settings content</div>
319
+ </div>
320
+ ```
321
+
322
+ ### 7. Responsive Layout Patterns
323
+
324
+ ```html
325
+ <!-- Sidebar + content -->
326
+ <div class="flex flex-col md:flex-row min-h-screen">
327
+ <aside class="w-full md:w-64 border-b md:border-b-0 md:border-r bg-gray-50 p-6">
328
+ Sidebar
329
+ </aside>
330
+ <main class="flex-1 p-6">
331
+ Content
332
+ </main>
333
+ </div>
334
+
335
+ <!-- Dashboard grid -->
336
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
337
+ <!-- Stat cards -->
338
+ <div class="bg-white rounded-xl border p-4">...</div>
339
+ </div>
340
+
341
+ <!-- Masonry-like with CSS columns -->
342
+ <div class="columns-1 md:columns-2 lg:columns-3 gap-4">
343
+ <div class="break-inside-avoid mb-4 rounded-xl border p-4">...</div>
344
+ </div>
345
+ ```
346
+
347
+ ---
348
+
349
+ ## Best Practices by Category
350
+
351
+ ### Layout
352
+ - Always design mobile-first: base styles → `md:` → `lg:` → `xl:`
353
+ - Use `max-w-7xl mx-auto px-6` for consistent page-width containers
354
+ - `gap` on flex/grid parents, not `margin` on children
355
+ - Sticky headers: `sticky top-0 z-50 bg-white/80 backdrop-blur-md`
356
+ - Use CSS Grid for 2D layouts, Flexbox for 1D (nav, button groups, cards in a row)
357
+
358
+ ### Typography
359
+ - Body text: `text-base` (16px) minimum, `leading-relaxed` for paragraphs
360
+ - Headings: `tracking-tight` for large display type, `font-bold` or `font-semibold`
361
+ - Muted text: `text-gray-500` or `text-gray-600` — never below 4.5:1 contrast ratio
362
+ - Limit line length: `max-w-prose` (65ch) for reading comfort
363
+ - Use `text-balance` on headlines to prevent orphaned words
364
+
365
+ ### Color & Contrast
366
+ - Primary actions: high-contrast (`bg-gray-900 text-white` or brand color)
367
+ - Destructive actions: `bg-red-600 text-white`
368
+ - Disabled states: `opacity-50 cursor-not-allowed pointer-events-none`
369
+ - Borders: `border-gray-200` (light) / `border-gray-800` (dark) — subtle, not harsh
370
+ - Focus rings: `focus:ring-2 focus:ring-blue-500 focus:outline-none` on all interactive elements
371
+
372
+ ### Spacing
373
+ - Use Tailwind spacing scale consistently: 4 (1rem) = base unit
374
+ - Card padding: `p-6` (desktop) or `p-4` (mobile)
375
+ - Section vertical padding: `py-16` to `py-32`
376
+ - Button padding: `px-4 py-2` (default), `px-6 py-3` (large)
377
+
378
+ ---
379
+
380
+ ## Common Anti-Patterns
381
+
382
+ 1. **Utility string duplication** — repeated `class="px-4 py-2 bg-blue-600 text-white rounded-lg..."` across HTML. Extract with `@layer components { .btn-primary { @apply ... } }` or a template partial.
383
+
384
+ 2. **Arbitrary values everywhere** — `w-[347px]`, `mt-[13px]`, `text-[15px]`. Use the spacing/type scale. Arbitrary values signal a design inconsistency, not a Tailwind limitation.
385
+
386
+ 3. **No responsive prefixes** — never write desktop-only Tailwind. Start with mobile layout, then add `md:` and `lg:` prefixes. Mobile-first is not optional.
387
+
388
+ 4. **Skipping focus styles** — removing `outline` without replacing it (`focus:outline-none` alone) breaks keyboard navigation. Always add `focus:ring-*`.
389
+
390
+ 5. **Tailwind v3 config in v4 projects** — `tailwind.config.js` is not used in Tailwind v4. Use `@theme { }` in CSS for customization.
391
+
392
+ 6. **Dynamic classes from JS that get purged** — Tailwind can't detect `'bg-' + color` string concatenation. Use a full class map: `{ red: 'bg-red-500', blue: 'bg-blue-500' }`.
393
+
394
+ 7. **Fixed pixel widths on containers** — use `max-w-*` with `mx-auto`, not `width: 1200px`. Fixed widths break on unusual viewports.
395
+
396
+ 8. **Missing `width` + `height` on images** — without explicit dimensions, images cause layout shift (CLS). Always specify dimensions or use `aspect-ratio`.
397
+
398
+ 9. **Overusing `absolute` positioning** — most layouts are achievable with Flexbox/Grid. Absolute should be for overlays, badges, and decorative elements only.
399
+
400
+ 10. **No `:hover` feedback on interactive elements** — every clickable element needs a hover state. At minimum: `hover:opacity-80` or `hover:bg-gray-50`.
401
+
402
+ ---
403
+
404
+ ## Performance Checklist
405
+
406
+ - [ ] Production build: unused Tailwind classes removed via tree-shaking (zero config needed in v4)
407
+ - [ ] `@layer components` for repeated patterns (avoids duplication, kept in CSS layer order)
408
+ - [ ] `loading="lazy"` on all below-fold images
409
+ - [ ] `width` + `height` attributes on all `<img>` to prevent layout shift
410
+ - [ ] `fetchpriority="high"` on LCP (Largest Contentful Paint) image
411
+ - [ ] Preconnect to font origins: `<link rel="preconnect" href="https://fonts.gstatic.com">`
412
+ - [ ] Alpine.js via CDN for minimal interactivity (no build step, ~15KB gzipped)
413
+ - [ ] Minimal JavaScript: prefer CSS transitions over JS animations where possible
414
+ - [ ] `font-display: swap` in font CSS for system fallback during load
415
+ - [ ] Audit with Lighthouse — target 90+ Performance on mobile