ui-ux-pro-max-cli 2.8.8

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 (160) hide show
  1. package/README.md +99 -0
  2. package/assets/data/_sync_all.py +414 -0
  3. package/assets/data/app-interface.csv +31 -0
  4. package/assets/data/charts.csv +26 -0
  5. package/assets/data/colors.csv +162 -0
  6. package/assets/data/design.csv +1776 -0
  7. package/assets/data/draft.csv +1779 -0
  8. package/assets/data/google-fonts.csv +1924 -0
  9. package/assets/data/icons.csv +106 -0
  10. package/assets/data/landing.csv +35 -0
  11. package/assets/data/products.csv +162 -0
  12. package/assets/data/react-performance.csv +45 -0
  13. package/assets/data/stacks/angular.csv +51 -0
  14. package/assets/data/stacks/astro.csv +54 -0
  15. package/assets/data/stacks/flutter.csv +53 -0
  16. package/assets/data/stacks/html-tailwind.csv +56 -0
  17. package/assets/data/stacks/javafx.csv +76 -0
  18. package/assets/data/stacks/jetpack-compose.csv +53 -0
  19. package/assets/data/stacks/laravel.csv +51 -0
  20. package/assets/data/stacks/nextjs.csv +53 -0
  21. package/assets/data/stacks/nuxt-ui.csv +71 -0
  22. package/assets/data/stacks/nuxtjs.csv +59 -0
  23. package/assets/data/stacks/react-native.csv +52 -0
  24. package/assets/data/stacks/react.csv +54 -0
  25. package/assets/data/stacks/shadcn.csv +61 -0
  26. package/assets/data/stacks/svelte.csv +54 -0
  27. package/assets/data/stacks/swiftui.csv +51 -0
  28. package/assets/data/stacks/threejs.csv +54 -0
  29. package/assets/data/stacks/vue.csv +50 -0
  30. package/assets/data/styles.csv +85 -0
  31. package/assets/data/typography.csv +74 -0
  32. package/assets/data/ui-reasoning.csv +162 -0
  33. package/assets/data/ux-guidelines.csv +100 -0
  34. package/assets/scripts/core.py +263 -0
  35. package/assets/scripts/design_system.py +1157 -0
  36. package/assets/scripts/search.py +114 -0
  37. package/assets/skills/banner-design/SKILL.md +196 -0
  38. package/assets/skills/banner-design/references/banner-sizes-and-styles.md +118 -0
  39. package/assets/skills/brand/SKILL.md +97 -0
  40. package/assets/skills/brand/references/approval-checklist.md +169 -0
  41. package/assets/skills/brand/references/asset-organization.md +157 -0
  42. package/assets/skills/brand/references/brand-guideline-template.md +140 -0
  43. package/assets/skills/brand/references/color-palette-management.md +186 -0
  44. package/assets/skills/brand/references/consistency-checklist.md +94 -0
  45. package/assets/skills/brand/references/logo-usage-rules.md +185 -0
  46. package/assets/skills/brand/references/messaging-framework.md +85 -0
  47. package/assets/skills/brand/references/typography-specifications.md +214 -0
  48. package/assets/skills/brand/references/update.md +118 -0
  49. package/assets/skills/brand/references/visual-identity.md +96 -0
  50. package/assets/skills/brand/references/voice-framework.md +88 -0
  51. package/assets/skills/brand/scripts/extract-colors.cjs +341 -0
  52. package/assets/skills/brand/scripts/inject-brand-context.cjs +349 -0
  53. package/assets/skills/brand/scripts/sync-brand-to-tokens.cjs +266 -0
  54. package/assets/skills/brand/scripts/validate-asset.cjs +387 -0
  55. package/assets/skills/brand/templates/brand-guidelines-starter.md +275 -0
  56. package/assets/skills/design/SKILL.md +313 -0
  57. package/assets/skills/design/data/cip/deliverables.csv +51 -0
  58. package/assets/skills/design/data/cip/industries.csv +21 -0
  59. package/assets/skills/design/data/cip/mockup-contexts.csv +21 -0
  60. package/assets/skills/design/data/cip/styles.csv +21 -0
  61. package/assets/skills/design/data/icon/styles.csv +16 -0
  62. package/assets/skills/design/data/logo/colors.csv +56 -0
  63. package/assets/skills/design/data/logo/industries.csv +56 -0
  64. package/assets/skills/design/data/logo/styles.csv +56 -0
  65. package/assets/skills/design/references/banner-sizes-and-styles.md +118 -0
  66. package/assets/skills/design/references/cip-deliverable-guide.md +95 -0
  67. package/assets/skills/design/references/cip-design.md +121 -0
  68. package/assets/skills/design/references/cip-prompt-engineering.md +84 -0
  69. package/assets/skills/design/references/cip-style-guide.md +68 -0
  70. package/assets/skills/design/references/design-routing.md +207 -0
  71. package/assets/skills/design/references/icon-design.md +122 -0
  72. package/assets/skills/design/references/logo-color-psychology.md +101 -0
  73. package/assets/skills/design/references/logo-design.md +92 -0
  74. package/assets/skills/design/references/logo-prompt-engineering.md +158 -0
  75. package/assets/skills/design/references/logo-style-guide.md +109 -0
  76. package/assets/skills/design/references/slides-copywriting-formulas.md +84 -0
  77. package/assets/skills/design/references/slides-create.md +4 -0
  78. package/assets/skills/design/references/slides-html-template.md +295 -0
  79. package/assets/skills/design/references/slides-layout-patterns.md +137 -0
  80. package/assets/skills/design/references/slides-strategies.md +94 -0
  81. package/assets/skills/design/references/slides.md +42 -0
  82. package/assets/skills/design/references/social-photos-design.md +329 -0
  83. package/assets/skills/design/scripts/cip/core.py +215 -0
  84. package/assets/skills/design/scripts/cip/generate.py +484 -0
  85. package/assets/skills/design/scripts/cip/render-html.py +424 -0
  86. package/assets/skills/design/scripts/cip/search.py +127 -0
  87. package/assets/skills/design/scripts/icon/generate.py +487 -0
  88. package/assets/skills/design/scripts/logo/core.py +175 -0
  89. package/assets/skills/design/scripts/logo/generate.py +362 -0
  90. package/assets/skills/design/scripts/logo/search.py +114 -0
  91. package/assets/skills/design-system/SKILL.md +244 -0
  92. package/assets/skills/design-system/data/slide-backgrounds.csv +11 -0
  93. package/assets/skills/design-system/data/slide-charts.csv +26 -0
  94. package/assets/skills/design-system/data/slide-color-logic.csv +14 -0
  95. package/assets/skills/design-system/data/slide-copy.csv +26 -0
  96. package/assets/skills/design-system/data/slide-layout-logic.csv +16 -0
  97. package/assets/skills/design-system/data/slide-layouts.csv +26 -0
  98. package/assets/skills/design-system/data/slide-strategies.csv +16 -0
  99. package/assets/skills/design-system/data/slide-typography.csv +15 -0
  100. package/assets/skills/design-system/references/component-specs.md +236 -0
  101. package/assets/skills/design-system/references/component-tokens.md +214 -0
  102. package/assets/skills/design-system/references/primitive-tokens.md +203 -0
  103. package/assets/skills/design-system/references/semantic-tokens.md +215 -0
  104. package/assets/skills/design-system/references/states-and-variants.md +241 -0
  105. package/assets/skills/design-system/references/tailwind-integration.md +251 -0
  106. package/assets/skills/design-system/references/token-architecture.md +224 -0
  107. package/assets/skills/design-system/scripts/embed-tokens.cjs +99 -0
  108. package/assets/skills/design-system/scripts/fetch-background.py +317 -0
  109. package/assets/skills/design-system/scripts/generate-slide.py +770 -0
  110. package/assets/skills/design-system/scripts/generate-tokens.cjs +205 -0
  111. package/assets/skills/design-system/scripts/html-token-validator.py +327 -0
  112. package/assets/skills/design-system/scripts/search-slides.py +218 -0
  113. package/assets/skills/design-system/scripts/slide-token-validator.py +35 -0
  114. package/assets/skills/design-system/scripts/slide_search_core.py +453 -0
  115. package/assets/skills/design-system/scripts/validate-tokens.cjs +251 -0
  116. package/assets/skills/design-system/templates/design-tokens-starter.json +143 -0
  117. package/assets/skills/slides/SKILL.md +40 -0
  118. package/assets/skills/slides/references/copywriting-formulas.md +84 -0
  119. package/assets/skills/slides/references/create.md +4 -0
  120. package/assets/skills/slides/references/html-template.md +295 -0
  121. package/assets/skills/slides/references/layout-patterns.md +137 -0
  122. package/assets/skills/slides/references/slide-strategies.md +94 -0
  123. package/assets/skills/ui-styling/LICENSE.txt +202 -0
  124. package/assets/skills/ui-styling/SKILL.md +324 -0
  125. package/assets/skills/ui-styling/references/canvas-design-system.md +320 -0
  126. package/assets/skills/ui-styling/references/shadcn-accessibility.md +471 -0
  127. package/assets/skills/ui-styling/references/shadcn-components.md +424 -0
  128. package/assets/skills/ui-styling/references/shadcn-theming.md +373 -0
  129. package/assets/skills/ui-styling/references/tailwind-customization.md +483 -0
  130. package/assets/skills/ui-styling/references/tailwind-responsive.md +382 -0
  131. package/assets/skills/ui-styling/references/tailwind-utilities.md +455 -0
  132. package/assets/skills/ui-styling/scripts/requirements.txt +17 -0
  133. package/assets/skills/ui-styling/scripts/shadcn_add.py +308 -0
  134. package/assets/skills/ui-styling/scripts/tailwind_config_gen.py +473 -0
  135. package/assets/skills/ui-styling/scripts/tests/coverage-ui.json +1 -0
  136. package/assets/skills/ui-styling/scripts/tests/requirements.txt +3 -0
  137. package/assets/skills/ui-styling/scripts/tests/test_shadcn_add.py +266 -0
  138. package/assets/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py +336 -0
  139. package/assets/templates/base/quick-reference.md +297 -0
  140. package/assets/templates/base/skill-content.md +368 -0
  141. package/assets/templates/platforms/agent.json +21 -0
  142. package/assets/templates/platforms/augment.json +18 -0
  143. package/assets/templates/platforms/claude.json +21 -0
  144. package/assets/templates/platforms/codebuddy.json +21 -0
  145. package/assets/templates/platforms/codex.json +21 -0
  146. package/assets/templates/platforms/continue.json +21 -0
  147. package/assets/templates/platforms/copilot.json +21 -0
  148. package/assets/templates/platforms/cursor.json +21 -0
  149. package/assets/templates/platforms/droid.json +21 -0
  150. package/assets/templates/platforms/gemini.json +21 -0
  151. package/assets/templates/platforms/kilocode.json +21 -0
  152. package/assets/templates/platforms/kiro.json +21 -0
  153. package/assets/templates/platforms/opencode.json +21 -0
  154. package/assets/templates/platforms/qoder.json +21 -0
  155. package/assets/templates/platforms/roocode.json +21 -0
  156. package/assets/templates/platforms/trae.json +21 -0
  157. package/assets/templates/platforms/warp.json +18 -0
  158. package/assets/templates/platforms/windsurf.json +21 -0
  159. package/dist/index.js +10630 -0
  160. package/package.json +51 -0
@@ -0,0 +1,368 @@
1
+ # {{TITLE}}
2
+
3
+ {{DESCRIPTION}}
4
+ {{QUICK_REFERENCE}}
5
+ # Prerequisites
6
+
7
+ Check if Python is installed:
8
+
9
+ ```bash
10
+ python3 --version || python --version
11
+ ```
12
+
13
+ If Python is not installed, install it based on user's OS:
14
+
15
+ **macOS:**
16
+ ```bash
17
+ brew install python3
18
+ ```
19
+
20
+ **Ubuntu/Debian:**
21
+ ```bash
22
+ sudo apt update && sudo apt install python3
23
+ ```
24
+
25
+ **Windows:**
26
+ ```powershell
27
+ winget install Python.Python.3.12
28
+ ```
29
+
30
+ > **Note:** On Windows, use `python` instead of `python3` to run scripts (e.g., `python scripts/search.py` instead of `python3 scripts/search.py`).
31
+
32
+ ---
33
+
34
+ ## How to Use This Skill
35
+
36
+ Use this skill when the user requests any of the following:
37
+
38
+ | Scenario | Trigger Examples | Start From |
39
+ |----------|-----------------|------------|
40
+ | **New project / page** | "做一个 landing page"、"Build a dashboard" | Step 1 → Step 2 (design system) |
41
+ | **New component** | "Create a pricing card"、"Add a modal" | Step 3 (domain search: style, ux) |
42
+ | **Choose style / color / font** | "What style fits a fintech app?"、"推荐配色" | Step 2 (design system) |
43
+ | **Review existing UI** | "Review this page for UX issues"、"检查无障碍" | Quick Reference checklist above |
44
+ | **Fix a UI bug** | "Button hover is broken"、"Layout shifts on load" | Quick Reference → relevant section |
45
+ | **Improve / optimize** | "Make this faster"、"Improve mobile experience" | Step 3 (domain search: ux, react) |
46
+ | **Implement dark mode** | "Add dark mode support" | Step 3 (domain: style "dark mode") |
47
+ | **Add charts / data viz** | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
48
+ | **Stack best practices** | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
49
+
50
+ Follow this workflow:
51
+
52
+ ### Step 1: Analyze User Requirements
53
+
54
+ Extract key information from user request:
55
+ - **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
56
+ - **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
57
+ - **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
58
+ - **Stack**: React Native (this project's only tech stack)
59
+
60
+ ### Step 2: Generate Design System (REQUIRED)
61
+
62
+ **Always start with `--design-system`** to get comprehensive recommendations with reasoning:
63
+
64
+ ```bash
65
+ python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
66
+ ```
67
+
68
+ This command:
69
+ 1. Searches domains in parallel (product, style, color, landing, typography)
70
+ 2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
71
+ 3. Returns complete design system: pattern, style, colors, typography, effects
72
+ 4. Includes anti-patterns to avoid
73
+
74
+ **Example:**
75
+ ```bash
76
+ python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
77
+ ```
78
+
79
+ ### Step 2b: Persist Design System (Master + Overrides Pattern)
80
+
81
+ To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
82
+
83
+ ```bash
84
+ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
85
+ ```
86
+
87
+ This creates:
88
+ - `design-system/MASTER.md` — Global Source of Truth with all design rules
89
+ - `design-system/pages/` — Folder for page-specific overrides
90
+
91
+ **With page-specific override:**
92
+ ```bash
93
+ python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
94
+ ```
95
+
96
+ This also creates:
97
+ - `design-system/pages/dashboard.md` — Page-specific deviations from Master
98
+
99
+ **How hierarchical retrieval works:**
100
+ 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
101
+ 2. If the page file exists, its rules **override** the Master file
102
+ 3. If not, use `design-system/MASTER.md` exclusively
103
+
104
+ **Context-aware retrieval prompt:**
105
+ ```
106
+ I am building the [Page Name] page. Please read design-system/MASTER.md.
107
+ Also check if design-system/pages/[page-name].md exists.
108
+ If the page file exists, prioritize its rules.
109
+ If not, use the Master rules exclusively.
110
+ Now, generate the code...
111
+ ```
112
+
113
+ ### Step 3: Supplement with Detailed Searches (as needed)
114
+
115
+ After getting the design system, use domain searches to get additional details:
116
+
117
+ ```bash
118
+ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
119
+ ```
120
+
121
+ **When to use detailed searches:**
122
+
123
+ | Need | Domain | Example |
124
+ |------|--------|---------|
125
+ | Product type patterns | `product` | `--domain product "entertainment social"` |
126
+ | More style options | `style` | `--domain style "glassmorphism dark"` |
127
+ | Color palettes | `color` | `--domain color "entertainment vibrant"` |
128
+ | Font pairings | `typography` | `--domain typography "playful modern"` |
129
+ | Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
130
+ | UX best practices | `ux` | `--domain ux "animation accessibility"` |
131
+ | Landing structure | `landing` | `--domain landing "hero social-proof"` |
132
+ | React Native perf | `react` | `--domain react "rerender memo list"` |
133
+ | App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` |
134
+ | AI prompt / CSS keywords | `prompt` | `--domain prompt "minimalism"` |
135
+
136
+ ### Step 4: Stack Guidelines
137
+
138
+ Get implementation-specific best practices for the user's stack:
139
+
140
+ ```bash
141
+ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>
142
+ ```
143
+
144
+ ---
145
+
146
+ ## Search Reference
147
+
148
+ ### Available Domains
149
+
150
+ | Domain | Use For | Example Keywords |
151
+ |--------|---------|------------------|
152
+ | `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
153
+ | `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
154
+ | `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
155
+ | `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
156
+ | `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
157
+ | `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
158
+ | `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
159
+ | `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
160
+ | `web` | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
161
+ | `prompt` | AI prompts, CSS keywords | (style name) |
162
+
163
+ ### Available Stacks
164
+
165
+ | Stack | Focus |
166
+ |-------|-------|
167
+ | `react-native` | Components, Navigation, Lists |
168
+ | `javafx` | Enterprise desktop apps, AtlantaFX themes, FXML, CSS, Controls, Binding, Threading, Packaging |
169
+
170
+ **JavaFX enterprise examples:**
171
+
172
+ ```bash
173
+ python3 skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
174
+ python3 skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
175
+ ```
176
+
177
+ ---
178
+
179
+ ## Example Workflow
180
+
181
+ **User request:** "Make an AI search homepage。"
182
+
183
+ ### Step 1: Analyze Requirements
184
+ - Product type: Tool (AI search engine)
185
+ - Target audience: C-end users looking for fast, intelligent search
186
+ - Style keywords: modern, minimal, content-first, dark mode
187
+ - Stack: React Native
188
+
189
+ ### Step 2: Generate Design System (REQUIRED)
190
+
191
+ ```bash
192
+ python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
193
+ ```
194
+
195
+ **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
196
+
197
+ ### Step 3: Supplement with Detailed Searches (as needed)
198
+
199
+ ```bash
200
+ # Get style options for a modern tool product
201
+ python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
202
+
203
+ # Get UX best practices for search interaction and loading
204
+ python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
205
+ ```
206
+
207
+ ### Step 4: Stack Guidelines
208
+
209
+ ```bash
210
+ python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
211
+ ```
212
+
213
+ **Then:** Synthesize design system + detailed searches and implement the design.
214
+
215
+ ---
216
+
217
+ ## Output Formats
218
+
219
+ The `--design-system` flag supports two output formats:
220
+
221
+ ```bash
222
+ # ASCII box (default) - best for terminal display
223
+ python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
224
+
225
+ # Markdown - best for documentation
226
+ python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
227
+ ```
228
+
229
+ ---
230
+
231
+ ## Tips for Better Results
232
+
233
+ ### Query Strategy
234
+
235
+ - Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"`
236
+ - Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
237
+ - Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
238
+ - Add `--stack <stack>` for implementation-specific guidance when the target stack is known
239
+
240
+ ### Common Sticking Points
241
+
242
+ | Problem | What to Do |
243
+ |---------|------------|
244
+ | Can't decide on style/color | Re-run `--design-system` with different keywords |
245
+ | Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |
246
+ | Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |
247
+ | Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |
248
+ | Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |
249
+ | Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |
250
+ | Performance / jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |
251
+
252
+ ### Pre-Delivery Checklist
253
+
254
+ - Run `--domain ux "animation accessibility z-index loading"` as a UX validation pass before implementation
255
+ - Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review
256
+ - Test on 375px (small phone) and landscape orientation
257
+ - Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size
258
+ - Check dark mode contrast independently (don't assume light mode values work)
259
+ - Confirm all touch targets ≥44pt and no content hidden behind safe areas
260
+
261
+ ---
262
+
263
+ ## Common Rules for Professional UI
264
+
265
+ These are frequently overlooked issues that make UI look unprofessional:
266
+ Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
267
+
268
+ ### Icons & Visual Elements
269
+
270
+ - 默认图标库使用 **Phosphor (`@phosphor-icons/react`)**。`src/ui-ux-pro-max/data/icons.csv` 中列出的只是常用推荐图标,不是完整集合。
271
+ - 当推荐表中找不到合适的图标时:
272
+ - **优先继续从 Phosphor 的完整图标集中选择任何语义更贴切的图标**;
273
+ - 如果 Phosphor 也没有理想选项,可以使用 **Heroicons (`@heroicons/react`)** 作为备选,注意保持风格一致(线性/填充、笔画粗细、圆角风格)。
274
+
275
+ | Rule | Standard | Avoid | Why It Matters |
276
+ |------|----------|--------|----------------|
277
+ | **No Emoji as Structural Icons** | Use vector-based icons (e.g., Phosphor `@phosphor-icons/react`, Heroicons `@heroicons/react`, react-native-vector-icons, @expo/vector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |
278
+ | **Vector-Only Assets** | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark/light mode adaptability. |
279
+ | **Stable Interaction States** | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion/perceived quality on mobile. |
280
+ | **Correct Brand Logos** | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal/platform compliance. |
281
+ | **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt / 24pt / 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |
282
+ | **Stroke Consistency** | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |
283
+ | **Filled vs Outline Discipline** | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |
284
+ | **Touch Target Minimum** | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |
285
+ | **Icon Alignment** | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |
286
+ | **Icon Contrast** | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |
287
+
288
+
289
+ ### Interaction (App)
290
+
291
+ | Rule | Do | Don't |
292
+ |------|----|----- |
293
+ | **Tap feedback** | Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms | No visual response on tap |
294
+ | **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |
295
+ | **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |
296
+ | **Disabled state clarity** | Use disabled semantics (`disabled`/native disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |
297
+ | **Touch target minimum** | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |
298
+ | **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap/drag conflicts | Overlapping gestures causing accidental actions |
299
+ | **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |
300
+
301
+ ### Light/Dark Mode Contrast
302
+
303
+ | Rule | Do | Don't |
304
+ |------|----|----- |
305
+ | **Surface readability (light)** | Keep cards/surfaces clearly separated from background with sufficient opacity/elevation | Overly transparent surfaces that blur hierarchy |
306
+ | **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |
307
+ | **Text contrast (dark)** | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |
308
+ | **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |
309
+ | **State contrast parity** | Keep pressed/focused/disabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |
310
+ | **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces/text/icons | Hardcoded per-screen hex values |
311
+ | **Scrim and modal legibility** | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |
312
+
313
+ ### Layout & Spacing
314
+
315
+ | Rule | Do | Don't |
316
+ |------|----|----- |
317
+ | **Safe-area compliance** | Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |
318
+ | **System bar clearance** | Add spacing for status/navigation bars and gesture home indicator | Let tappable content collide with OS chrome |
319
+ | **Consistent content width** | Keep predictable content width per device class (phone/tablet) | Mixing arbitrary widths between screens |
320
+ | **8dp spacing rhythm** | Use a consistent 4/8dp spacing system for padding/gaps/section spacing | Random spacing increments with no rhythm |
321
+ | **Readable text measure** | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |
322
+ | **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy | Similar UI levels with inconsistent spacing |
323
+ | **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes/orientations |
324
+ | **Scroll and fixed element coexistence** | Add bottom/top content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers/footers |
325
+
326
+ ---
327
+
328
+ ## Pre-Delivery Checklist
329
+
330
+ Before delivering UI code, verify these items:
331
+ Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).
332
+
333
+ ### Visual Quality
334
+ - [ ] No emojis used as icons (use SVG instead)
335
+ - [ ] All icons come from a consistent icon family and style
336
+ - [ ] Official brand assets are used with correct proportions and clear space
337
+ - [ ] Pressed-state visuals do not shift layout bounds or cause jitter
338
+ - [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)
339
+
340
+ ### Interaction
341
+ - [ ] All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
342
+ - [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
343
+ - [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing
344
+ - [ ] Disabled states are visually clear and non-interactive
345
+ - [ ] Screen reader focus order matches visual order, and interactive labels are descriptive
346
+ - [ ] Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)
347
+
348
+ ### Light/Dark Mode
349
+ - [ ] Primary text contrast >=4.5:1 in both light and dark mode
350
+ - [ ] Secondary text contrast >=3:1 in both light and dark mode
351
+ - [ ] Dividers/borders and interaction states are distinguishable in both modes
352
+ - [ ] Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
353
+ - [ ] Both themes are tested before delivery (not inferred from a single theme)
354
+
355
+ ### Layout
356
+ - [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars
357
+ - [ ] Scroll content is not hidden behind fixed/sticky bars
358
+ - [ ] Verified on small phone, large phone, and tablet (portrait + landscape)
359
+ - [ ] Horizontal insets/gutters adapt correctly by device size and orientation
360
+ - [ ] 4/8dp spacing rhythm is maintained across component, section, and page levels
361
+ - [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)
362
+
363
+ ### Accessibility
364
+ - [ ] All meaningful images/icons have accessibility labels
365
+ - [ ] Form fields have labels, hints, and clear error messages
366
+ - [ ] Color is not the only indicator
367
+ - [ ] Reduced motion and dynamic text size are supported without layout breakage
368
+ - [ ] Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "antigravity",
3
+ "displayName": "Antigravity / Generic Agent",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".agents",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,18 @@
1
+ {
2
+ "platform": "augment",
3
+ "displayName": "Augment",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".augment",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": null,
12
+ "sections": {
13
+ "quickReference": false
14
+ },
15
+ "title": "ui-ux-pro-max",
16
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
17
+ "skillOrWorkflow": "Skill"
18
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "claude",
3
+ "displayName": "Claude Code",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".claude",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 16 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Nuxt, Nuxt UI, Tailwind, shadcn/ui, Jetpack Compose, Three.js, Angular, Laravel). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
14
+ },
15
+ "sections": {
16
+ "quickReference": true
17
+ },
18
+ "title": "UI/UX Pro Max - Design Intelligence",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "codebuddy",
3
+ "displayName": "CodeBuddy",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".codebuddy",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence with searchable database"
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "codex",
3
+ "displayName": "Codex",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".codex",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence with searchable database"
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "continue",
3
+ "displayName": "Continue",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".continue",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence with searchable database"
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "copilot",
3
+ "displayName": "GitHub Copilot",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".github",
7
+ "skillPath": "prompts/ui-ux-pro-max",
8
+ "filename": "PROMPT.md"
9
+ },
10
+ "scriptPath": "prompts/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Workflow"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "cursor",
3
+ "displayName": "Cursor",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".cursor",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "droid",
3
+ "displayName": "Droid (Factory)",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".factory",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 16 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "UI/UX Pro Max - Design Intelligence",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "gemini",
3
+ "displayName": "Gemini CLI",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".gemini",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence with searchable database"
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "kilocode",
3
+ "displayName": "KiloCode",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".kilocode",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "kiro",
3
+ "displayName": "Kiro",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".kiro",
7
+ "skillPath": "steering/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "steering/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks."
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Workflow"
21
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "platform": "opencode",
3
+ "displayName": "OpenCode",
4
+ "installType": "full",
5
+ "folderStructure": {
6
+ "root": ".opencode",
7
+ "skillPath": "skills/ui-ux-pro-max",
8
+ "filename": "SKILL.md"
9
+ },
10
+ "scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
11
+ "frontmatter": {
12
+ "name": "ui-ux-pro-max",
13
+ "description": "UI/UX design intelligence with searchable database"
14
+ },
15
+ "sections": {
16
+ "quickReference": false
17
+ },
18
+ "title": "ui-ux-pro-max",
19
+ "description": "Comprehensive design guide for web and mobile applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 16 technology stacks. Searchable database with priority-based recommendations.",
20
+ "skillOrWorkflow": "Skill"
21
+ }