[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M79PDWHJB2ZGK7F94VYNT64Y":3,"skill-same:01M79PDWHJB2ZGK7F94VYNT64Y":221},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":28,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M79PDWHJB2ZGK7F94VYNT64Y","ui-ux-pro-max",null,"ankaboot-source\u002Fboucle","ankaboot-source","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F88089122?v=4","01M79P4HZGM4NXFWV0SB0HGQ51","ankaboot","01M79P4J0GNNZ7E7F9B0RZNSNX",2,"AGPL-3.0","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: ui-ux-pro-max\ndescription: UI\u002FUX design intelligence with searchable database — 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks. Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.\n---\n\n# ui-ux-pro-max\n\nComprehensive design intelligence for web, mobile, and desktop applications. Contains a searchable database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 technology stacks. Priority-based recommendations with reasoning.\n\n## Prerequisites\n\nThe bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, skip the CLI searches and rely on the Quick Reference sections below.\n\n---\n\n## How to Use This Skill\n\nUse this skill when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**:\n\n| Scenario | Trigger Examples | Start From |\n|----------|-----------------|------------|\n| **New project \u002F page** | \"Build a landing page\", \"Create a dashboard\" | Step 1 → Step 2 (design system) |\n| **New component** | \"Create a pricing card\", \"Add a modal\" | Step 3 (domain search: style, ux) |\n| **Choose style \u002F color \u002F font** | \"What style fits a fintech app?\" | Step 2 (design system) |\n| **Review existing UI** | \"Review this page for UX issues\" | Quick Reference checklist below |\n| **Fix a UI bug** | \"Button hover is broken\", \"Layout shifts on load\" | Quick Reference → relevant section |\n| **Improve \u002F optimize** | \"Make this faster\", \"Improve mobile experience\" | Step 3 (domain search: ux, react) |\n| **Implement dark mode** | \"Add dark mode support\" | Step 3 (domain: style \"dark mode\") |\n| **Add charts \u002F data viz** | \"Add an analytics dashboard chart\" | Step 3 (domain: chart) |\n| **Stack best practices** | \"React performance tips\", \"Astro navigation\" | Step 4 (stack search) |\n\n**Decision rule:** if the task changes how something **looks, feels, moves, or is interacted with**, use this skill.\n\n### Step 1: Analyze User Requirements\n\nExtract key information from the request:\n- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid\n- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)\n- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, brutalist, editorial, etc.\n- **Stack**: whatever the project actually builds with — infer from `package.json`, existing files, or explicit request. Then load its rules with `--stack \u003Cname>`. Do not assume React.\n- **Platform**: web or native app. Several sections below are scoped to App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter) and do not apply to desktop-web work — safe areas, haptics, bottom nav and Dynamic Type are mobile-only concerns.\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cproduct_type> \u003Cindustry> \u003Ckeywords>\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"editorial brutalist dark\" --design-system -p \"My Project\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for hierarchical retrieval across sessions, add `--persist`:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --output-dir \".\"\n```\n\nThis creates:\n- `design-system\u002FMASTER.md` — Global Source of Truth with all design rules\n- `design-system\u002Fpages\u002F` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --output-dir \".\" --page \"dashboard\"\n```\n\n### Step 2c: Design Dials (optional)\n\nThree optional 1-10 sliders that tune `--design-system` output without changing your query:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --variance \u003C1-10> --motion \u003C1-10> --density \u003C1-10>\n```\n\n| Dial | Low (1-3) | Mid (4-7) | High (8-10) |\n|------|-----------|-----------|-------------|\n| `--variance` | Centered \u002F minimal (biases toward Minimalism-style categories) | Balanced \u002F modern | Bold \u002F asymmetric (biases toward Brutalism, Bento Grids) |\n| `--motion` | Subtle micro-interactions | Standard scroll\u002Fstagger motion | Complex choreography (pin, Flip, SplitText) |\n| `--density` | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense\u002Fdashboard (8-32px spacing scale) |\n\n- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do\u002FDon't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle\u002FStandard\u002FComplex).\n- `--density` overrides the `--space-*` CSS variable table in the ASCII\u002Fmarkdown\u002FMASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.\n- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).\n\n**Example:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"internal analytics dashboard\" --design-system --variance 8 --motion 7 --density 8 -p \"Ops Console\"\n```\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| Product type patterns | `product` | `--domain product \"entertainment social\"` |\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Color palettes | `color` | `--domain color \"entertainment vibrant\"` |\n| Font pairings | `typography` | `--domain typography \"playful modern\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |\n| Landing structure | `landing` | `--domain landing \"hero social-proof\"` |\n| React\u002FNext.js perf | `react` | `--domain react \"rerender memo list\"` |\n| App interface a11y | `web` | `--domain web \"accessibilityLabel touch safe-areas\"` |\n| Icon suggestions | `icons` | `--domain icons \"navigation arrows\"` |\n| Individual Google Fonts | `google-fonts` | `--domain google-fonts \"variable sans serif\"` |\n| GSAP animation snippets | `gsap` | `--domain gsap \"scroll reveal stagger\"` |\n\n### Step 4: Stack Guidelines\n\nGet implementation-specific best practices for the project's stack:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack \u003Cstack>\n```\n\n**Available stacks:** `react`, `nextjs`, `vue`, `svelte`, `astro`, `swiftui`, `react-native`, `flutter`, `nuxtjs`, `nuxt-ui`, `html-tailwind`, `shadcn`, `jetpack-compose`, `threejs`, `angular`, `laravel`, `javafx`, `wpf`, `winui`, `avalonia`, `uno`, `uwp`\n\n---\n\n## Search Reference\n\n### Available Domains\n\n| Domain | Use For | Example Keywords |\n|--------|---------|------------------|\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\n| `gsap` | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |\n| `react` | React\u002FNext.js performance | waterfall, bundle, suspense, memo, rerender, cache |\n| `web` | App interface guidelines (iOS\u002FAndroid\u002FReact Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |\n| `icons` | Icon recommendations with import code | arrow, navigation, lucide, phosphor |\n| `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |\n\n---\n\n## Example Workflow\n\n**User request:** \"Make an AI search homepage.\"\n\n### Step 1: Analyze Requirements\n- Product type: Tool (AI search engine)\n- Target audience: C-end users looking for fast, intelligent search\n- Style keywords: modern, minimal, content-first, dark mode\n- Stack: Astro (inferred from project)\n\n### Step 2: Generate Design System (REQUIRED)\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"AI search tool modern minimal\" --design-system -p \"AI Search\"\n```\n\n**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\n```bash\n# Get style options for a modern tool product\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"minimalism dark mode\" --domain style\n\n# Get UX best practices for search interaction and loading\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"search loading animation\" --domain ux\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"list performance navigation\" --stack astro\n```\n\n**Then:** Synthesize design system + detailed searches and implement the design. **Always cross-reference with the project's DESIGN.md charter** — the charter overrides any generic recommendation from this skill.\n\n---\n\n## Output Formats\n\nThe `--design-system` flag supports two output formats:\n\n```bash\n# ASCII box (default) - best for terminal display\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system -f markdown\n```\n\n---\n\n## Tips for Better Results\n\n### Query Strategy\n\n- Use **multi-dimensional keywords** — combine product + industry + tone + density: `\"entertainment social vibrant content-dense\"` not just `\"app\"`\n- Try different keywords for the same need: `\"playful neon\"` → `\"vibrant dark\"` → `\"content-first minimal\"`\n- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about\n- Add `--stack \u003Cstack>` for implementation-specific guidance when the target stack is known\n\n### Common Sticking Points\n\n| Problem | What to Do |\n|---------|------------|\n| Can't decide on style\u002Fcolor | Re-run `--design-system` with different keywords |\n| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |\n| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |\n| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |\n| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |\n| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |\n| Performance \u002F jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |\n\n---\n\n## Pre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\n\n### Visual Quality\n- [ ] No emojis used as icons (use SVG instead)\n- [ ] All icons come from a consistent icon family and style\n- [ ] Official brand assets are used with correct proportions and clear space\n- [ ] Pressed-state visuals do not shift layout bounds or cause jitter\n- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)\n\n### Interaction\n- [ ] All tappable elements provide clear pressed feedback (ripple\u002Fopacity\u002Felevation)\n- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)\n- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing\n- [ ] Disabled states are visually clear and non-interactive\n- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive\n- [ ] Gesture regions avoid nested\u002Fconflicting interactions (tap\u002Fdrag\u002Fback-swipe conflicts)\n\n### Light\u002FDark Mode\n- [ ] Primary text contrast >=4.5:1 in both light and dark mode\n- [ ] Secondary text contrast >=3:1 in both light and dark mode\n- [ ] Dividers\u002Fborders and interaction states are distinguishable in both modes\n- [ ] Modal\u002Fdrawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)\n- [ ] Both themes are tested before delivery (not inferred from a single theme)\n\n### Layout\n- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars (mobile only)\n- [ ] Scroll content is not hidden behind fixed\u002Fsticky bars\n- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)\n- [ ] Horizontal insets\u002Fgutters adapt correctly by device size and orientation\n- [ ] 4\u002F8dp spacing rhythm is maintained across component, section, and page levels\n- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)\n\n### Accessibility\n- [ ] All meaningful images\u002Ficons have accessibility labels\n- [ ] Form fields have labels, hints, and clear error messages\n- [ ] Color is not the only indicator\n- [ ] Reduced motion and dynamic text size are supported without layout breakage\n- [ ] Accessibility traits\u002Froles\u002Fstates (selected, disabled, expanded) are announced correctly\n\n---\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |\n|----------|----------|--------|--------|------------------------|------------------------|\n| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |\n| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44x44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |\n| 3 | Performance | HIGH | `ux` | WebP\u002FAVIF, Lazy loading, Reserve space (CLS \u003C 0.1) | Layout thrashing, Cumulative Layout Shift |\n| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |\n| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |\n| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text \u003C 12px body, Gray-on-gray, Raw hex in components |\n| 7 | Animation | MEDIUM | `ux` | Duration 150-300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width\u002Fheight, No reduced-motion |\n| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |\n| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav \u003C=5, Deep linking | Overloaded nav, Broken back behavior, No deep links |\n| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |\n\n---\n\n## Quick Reference\n\n### 1. Accessibility (CRITICAL)\n\n- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1)\n- `focus-states` - Visible focus rings on interactive elements (2-4px)\n- `alt-text` - Descriptive alt text for meaningful images\n- `aria-labels` - aria-label for icon-only buttons\n- `keyboard-nav` - Tab order matches visual order; full keyboard support\n- `form-labels` - Use label with for attribute\n- `skip-links` - Skip to main content for keyboard users\n- `heading-hierarchy` - Sequential h1→h6, no level skip\n- `color-not-only` - Don't convey info by color alone (add icon\u002Ftext)\n- `reduced-motion` - Respect prefers-reduced-motion; reduce\u002Fdisable animations when requested\n- `escape-routes` - Provide cancel\u002Fback in modals and multi-step flows\n\n### 2. Touch & Interaction (CRITICAL)\n\n- `touch-target-size` - Min 44x44pt (iOS) \u002F 48x48dp (Android); extend hit area beyond visual bounds if needed\n- `touch-spacing` - Minimum 8px\u002F8dp gap between touch targets\n- `hover-vs-tap` - Use click\u002Ftap for primary interactions; don't rely on hover alone\n\n### 3. Performance (HIGH)\n\n- `virtualize-lists` - Virtualize long lists (react-window, FlashList)\n- `main-thread-budget` - Keep main thread work \u003C16ms per frame (60fps)\n- `debounce-throttle` - Debounce search input, throttle scroll\u002Fresize handlers\n- `lazy-loading` - Lazy load images and below-the-fold content\n- `reserve-space` - Reserve space for async content to prevent CLS\n\n### 4. Style Selection (HIGH)\n\n- `match-product-type` - Style should match product type and audience\n- `consistency` - One style language across the app\n- `svg-icons` - Use SVG icons, never emojis as structural icons\n- `stroke-consistency` - Consistent stroke width within the same visual layer\n\n### 5. Layout & Responsive (HIGH)\n\n- `mobile-first` - Start with mobile styles, add breakpoints for larger screens\n- `breakpoint-consistency` - Use consistent breakpoints across the app\n- `no-horizontal-scroll` - Prevent horizontal scroll on any device\n- `viewport-meta` - Always include viewport meta tag\n\n### 6. Typography & Color (MEDIUM)\n\n- `base-16px` - Base font size 16px, never below 12px for body\n- `line-height-1.5` - Line-height 1.5 for body text\n- `semantic-tokens` - Use semantic color tokens, not raw hex in components\n- `color-dark-mode` - Test dark mode contrast independently\n\n### 7. Animation (MEDIUM)\n\n- `duration-150-300ms` - Micro-interactions 150-300ms\n- `motion-conveys-meaning` - Animation should communicate state change or spatial relationship\n- `exit-faster-than-enter` - Exit animations should be faster than enter\n- `reduced-motion` - Always provide reduced-motion fallback\n\n### 8. Forms & Feedback (MEDIUM)\n\n- `visible-labels` - Always use visible labels, not placeholder-only\n- `error-near-field` - Show errors near the field, not at the top\n- `inline-validation` - Validate inline as user types\u002Fblurs, not only on submit\n- `helper-text` - Provide helper text for complex fields\n\n### 9. Navigation Patterns (HIGH)\n\n- `predictable-back` - Back button always goes to the logical parent\n- `bottom-nav-limit` - Bottom navigation max 5 items\n- `deep-linking` - Support deep linking into app content\n\n### 10. Charts & Data (LOW)\n\n- `legends` - Always include legends\n- `tooltips` - Provide tooltips for data points\n- `accessible-colors` - Don't rely on color alone to convey meaning in charts","# ui-ux-pro-max\n\nComprehensive design intelligence for web, mobile, and desktop applications. Contains a searchable database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 technology stacks. Priority-based recommendations with reasoning.\n\n## Prerequisites\n\nThe bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, skip the CLI searches and rely on the Quick Reference sections below.\n\n---\n\n## How to Use This Skill\n\nUse this skill when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**:\n\n| Scenario | Trigger Examples | Start From |\n|----------|-----------------|------------|\n| **New project \u002F page** | \"Build a landing page\", \"Create a dashboard\" | Step 1 → Step 2 (design system) |\n| **New component** | \"Create a pricing card\", \"Add a modal\" | Step 3 (domain search: style, ux) |\n| **Choose style \u002F color \u002F font** | \"What style fits a fintech app?\" | Step 2 (design system) |\n| **Review existing UI** | \"Review this page for UX issues\" | Quick Reference checklist below |\n| **Fix a UI bug** | \"Button hover is broken\", \"Layout shifts on load\" | Quick Reference → relevant section |\n| **Improve \u002F optimize** | \"Make this faster\", \"Improve mobile experience\" | Step 3 (domain search: ux, react) |\n| **Implement dark mode** | \"Add dark mode support\" | Step 3 (domain: style \"dark mode\") |\n| **Add charts \u002F data viz** | \"Add an analytics dashboard chart\" | Step 3 (domain: chart) |\n| **Stack best practices** | \"React performance tips\", \"Astro navigation\" | Step 4 (stack search) |\n\n**Decision rule:** if the task changes how something **looks, feels, moves, or is interacted with**, use this skill.\n\n### Step 1: Analyze User Requirements\n\nExtract key information from the request:\n- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid\n- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)\n- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, brutalist, editorial, etc.\n- **Stack**: whatever the project actually builds with — infer from `package.json`, existing files, or explicit request. Then load its rules with `--stack \u003Cname>`. Do not assume React.\n- **Platform**: web or native app. Several sections below are scoped to App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter) and do not apply to desktop-web work — safe areas, haptics, bottom nav and Dynamic Type are mobile-only concerns.\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cproduct_type> \u003Cindustry> \u003Ckeywords>\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"editorial brutalist dark\" --design-system -p \"My Project\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for hierarchical retrieval across sessions, add `--persist`:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --output-dir \".\"\n```\n\nThis creates:\n- `design-system\u002FMASTER.md` — Global Source of Truth with all design rules\n- `design-system\u002Fpages\u002F` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --output-dir \".\" --page \"dashboard\"\n```\n\n### Step 2c: Design Dials (optional)\n\nThree optional 1-10 sliders that tune `--design-system` output without changing your query:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --variance \u003C1-10> --motion \u003C1-10> --density \u003C1-10>\n```\n\n| Dial | Low (1-3) | Mid (4-7) | High (8-10) |\n|------|-----------|-----------|-------------|\n| `--variance` | Centered \u002F minimal (biases toward Minimalism-style categories) | Balanced \u002F modern | Bold \u002F asymmetric (biases toward Brutalism, Bento Grids) |\n| `--motion` | Subtle micro-interactions | Standard scroll\u002Fstagger motion | Complex choreography (pin, Flip, SplitText) |\n| `--density` | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense\u002Fdashboard (8-32px spacing scale) |\n\n- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do\u002FDon't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle\u002FStandard\u002FComplex).\n- `--density` overrides the `--space-*` CSS variable table in the ASCII\u002Fmarkdown\u002FMASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.\n- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).\n\n**Example:**\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"internal analytics dashboard\" --design-system --variance 8 --motion 7 --density 8 -p \"Ops Console\"\n```\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| Product type patterns | `product` | `--domain product \"entertainment social\"` |\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Color palettes | `color` | `--domain color \"entertainment vibrant\"` |\n| Font pairings | `typography` | `--domain typography \"playful modern\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |\n| Landing structure | `landing` | `--domain landing \"hero social-proof\"` |\n| React\u002FNext.js perf | `react` | `--domain react \"rerender memo list\"` |\n| App interface a11y | `web` | `--domain web \"accessibilityLabel touch safe-areas\"` |\n| Icon suggestions | `icons` | `--domain icons \"navigation arrows\"` |\n| Individual Google Fonts | `google-fonts` | `--domain google-fonts \"variable sans serif\"` |\n| GSAP animation snippets | `gsap` | `--domain gsap \"scroll reveal stagger\"` |\n\n### Step 4: Stack Guidelines\n\nGet implementation-specific best practices for the project's stack:\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack \u003Cstack>\n```\n\n**Available stacks:** `react`, `nextjs`, `vue`, `svelte`, `astro`, `swiftui`, `react-native`, `flutter`, `nuxtjs`, `nuxt-ui`, `html-tailwind`, `shadcn`, `jetpack-compose`, `threejs`, `angular`, `laravel`, `javafx`, `wpf`, `winui`, `avalonia`, `uno`, `uwp`\n\n---\n\n## Search Reference\n\n### Available Domains\n\n| Domain | Use For | Example Keywords |\n|--------|---------|------------------|\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\n| `gsap` | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |\n| `react` | React\u002FNext.js performance | waterfall, bundle, suspense, memo, rerender, cache |\n| `web` | App interface guidelines (iOS\u002FAndroid\u002FReact Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |\n| `icons` | Icon recommendations with import code | arrow, navigation, lucide, phosphor |\n| `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |\n\n---\n\n## Example Workflow\n\n**User request:** \"Make an AI search homepage.\"\n\n### Step 1: Analyze Requirements\n- Product type: Tool (AI search engine)\n- Target audience: C-end users looking for fast, intelligent search\n- Style keywords: modern, minimal, content-first, dark mode\n- Stack: Astro (inferred from project)\n\n### Step 2: Generate Design System (REQUIRED)\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"AI search tool modern minimal\" --design-system -p \"AI Search\"\n```\n\n**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\n```bash\n# Get style options for a modern tool product\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"minimalism dark mode\" --domain style\n\n# Get UX best practices for search interaction and loading\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"search loading animation\" --domain ux\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"list performance navigation\" --stack astro\n```\n\n**Then:** Synthesize design system + detailed searches and implement the design. **Always cross-reference with the project's DESIGN.md charter** — the charter overrides any generic recommendation from this skill.\n\n---\n\n## Output Formats\n\nThe `--design-system` flag supports two output formats:\n\n```bash\n# ASCII box (default) - best for terminal display\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 .jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system -f markdown\n```\n\n---\n\n## Tips for Better Results\n\n### Query Strategy\n\n- Use **multi-dimensional keywords** — combine product + industry + tone + density: `\"entertainment social vibrant content-dense\"` not just `\"app\"`\n- Try different keywords for the same need: `\"playful neon\"` → `\"vibrant dark\"` → `\"content-first minimal\"`\n- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about\n- Add `--stack \u003Cstack>` for implementation-specific guidance when the target stack is known\n\n### Common Sticking Points\n\n| Problem | What to Do |\n|---------|------------|\n| Can't decide on style\u002Fcolor | Re-run `--design-system` with different keywords |\n| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |\n| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |\n| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |\n| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |\n| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |\n| Performance \u002F jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |\n\n---\n\n## Pre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\n\n### Visual Quality\n- [ ] No emojis used as icons (use SVG instead)\n- [ ] All icons come from a consistent icon family and style\n- [ ] Official brand assets are used with correct proportions and clear space\n- [ ] Pressed-state visuals do not shift layout bounds or cause jitter\n- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)\n\n### Interaction\n- [ ] All tappable elements provide clear pressed feedback (ripple\u002Fopacity\u002Felevation)\n- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)\n- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing\n- [ ] Disabled states are visually clear and non-interactive\n- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive\n- [ ] Gesture regions avoid nested\u002Fconflicting interactions (tap\u002Fdrag\u002Fback-swipe conflicts)\n\n### Light\u002FDark Mode\n- [ ] Primary text contrast >=4.5:1 in both light and dark mode\n- [ ] Secondary text contrast >=3:1 in both light and dark mode\n- [ ] Dividers\u002Fborders and interaction states are distinguishable in both modes\n- [ ] Modal\u002Fdrawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)\n- [ ] Both themes are tested before delivery (not inferred from a single theme)\n\n### Layout\n- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars (mobile only)\n- [ ] Scroll content is not hidden behind fixed\u002Fsticky bars\n- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)\n- [ ] Horizontal insets\u002Fgutters adapt correctly by device size and orientation\n- [ ] 4\u002F8dp spacing rhythm is maintained across component, section, and page levels\n- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)\n\n### Accessibility\n- [ ] All meaningful images\u002Ficons have accessibility labels\n- [ ] Form fields have labels, hints, and clear error messages\n- [ ] Color is not the only indicator\n- [ ] Reduced motion and dynamic text size are supported without layout breakage\n- [ ] Accessibility traits\u002Froles\u002Fstates (selected, disabled, expanded) are announced correctly\n\n---\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |\n|----------|----------|--------|--------|------------------------|------------------------|\n| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |\n| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44x44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |\n| 3 | Performance | HIGH | `ux` | WebP\u002FAVIF, Lazy loading, Reserve space (CLS \u003C 0.1) | Layout thrashing, Cumulative Layout Shift |\n| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |\n| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |\n| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text \u003C 12px body, Gray-on-gray, Raw hex in components |\n| 7 | Animation | MEDIUM | `ux` | Duration 150-300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width\u002Fheight, No reduced-motion |\n| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |\n| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav \u003C=5, Deep linking | Overloaded nav, Broken back behavior, No deep links |\n| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |\n\n---\n\n## Quick Reference\n\n### 1. Accessibility (CRITICAL)\n\n- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1)\n- `focus-states` - Visible focus rings on interactive elements (2-4px)\n- `alt-text` - Descriptive alt text for meaningful images\n- `aria-labels` - aria-label for icon-only buttons\n- `keyboard-nav` - Tab order matches visual order; full keyboard support\n- `form-labels` - Use label with for attribute\n- `skip-links` - Skip to main content for keyboard users\n- `heading-hierarchy` - Sequential h1→h6, no level skip\n- `color-not-only` - Don't convey info by color alone (add icon\u002Ftext)\n- `reduced-motion` - Respect prefers-reduced-motion; reduce\u002Fdisable animations when requested\n- `escape-routes` - Provide cancel\u002Fback in modals and multi-step flows\n\n### 2. Touch & Interaction (CRITICAL)\n\n- `touch-target-size` - Min 44x44pt (iOS) \u002F 48x48dp (Android); extend hit area beyond visual bounds if needed\n- `touch-spacing` - Minimum 8px\u002F8dp gap between touch targets\n- `hover-vs-tap` - Use click\u002Ftap for primary interactions; don't rely on hover alone\n\n### 3. Performance (HIGH)\n\n- `virtualize-lists` - Virtualize long lists (react-window, FlashList)\n- `main-thread-budget` - Keep main thread work \u003C16ms per frame (60fps)\n- `debounce-throttle` - Debounce search input, throttle scroll\u002Fresize handlers\n- `lazy-loading` - Lazy load images and below-the-fold content\n- `reserve-space` - Reserve space for async content to prevent CLS\n\n### 4. Style Selection (HIGH)\n\n- `match-product-type` - Style should match product type and audience\n- `consistency` - One style language across the app\n- `svg-icons` - Use SVG icons, never emojis as structural icons\n- `stroke-consistency` - Consistent stroke width within the same visual layer\n\n### 5. Layout & Responsive (HIGH)\n\n- `mobile-first` - Start with mobile styles, add breakpoints for larger screens\n- `breakpoint-consistency` - Use consistent breakpoints across the app\n- `no-horizontal-scroll` - Prevent horizontal scroll on any device\n- `viewport-meta` - Always include viewport meta tag\n\n### 6. Typography & Color (MEDIUM)\n\n- `base-16px` - Base font size 16px, never below 12px for body\n- `line-height-1.5` - Line-height 1.5 for body text\n- `semantic-tokens` - Use semantic color tokens, not raw hex in components\n- `color-dark-mode` - Test dark mode contrast independently\n\n### 7. Animation (MEDIUM)\n\n- `duration-150-300ms` - Micro-interactions 150-300ms\n- `motion-conveys-meaning` - Animation should communicate state change or spatial relationship\n- `exit-faster-than-enter` - Exit animations should be faster than enter\n- `reduced-motion` - Always provide reduced-motion fallback\n\n### 8. Forms & Feedback (MEDIUM)\n\n- `visible-labels` - Always use visible labels, not placeholder-only\n- `error-near-field` - Show errors near the field, not at the top\n- `inline-validation` - Validate inline as user types\u002Fblurs, not only on submit\n- `helper-text` - Provide helper text for complex fields\n\n### 9. Navigation Patterns (HIGH)\n\n- `predictable-back` - Back button always goes to the logical parent\n- `bottom-nav-limit` - Bottom navigation max 5 items\n- `deep-linking` - Support deep linking into app content\n\n### 10. Charts & Data (LOW)\n\n- `legends` - Always include legends\n- `tooltips` - Provide tooltips for data points\n- `accessible-colors` - Don't rely on color alone to convey meaning in charts",{},"main","b1e46a5b01665a6910c6cfc503880b3156429f73",".jcode\u002Fskills\u002Fui-ux-pro-max",0,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle","https:\u002F\u002Fboucle.dev","https:\u002F\u002Fgithub.com\u002Fankaboot-source","https:\u002F\u002Fwww.ankaboot.io\u002F","customer-engagement tech · privacy by design","2026-11-14 05:53:11",{"source":7,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add ankaboot-source\u002Fboucle --skill ui-ux-pro-max",{"tool":39,"command":40},"bunx","bunx skills add ankaboot-source\u002Fboucle --skill ui-ux-pro-max",{"tool":42,"command":43},"pnpm","pnpm dlx skills add ankaboot-source\u002Fboucle --skill ui-ux-pro-max","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002FSKILL.md",true,[47,53,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,201,205,209,213,217],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},".gitignore","OTHER","其他",18,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002F.gitignore",{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"data\u002Fapp-interface.csv","ASSET","资产文件",9743,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fapp-interface.csv",{"path":60,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":61,"sourceHtmlUrl":62},"data\u002Fcharts.csv",19365,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fcharts.csv",{"path":64,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":65,"sourceHtmlUrl":66},"data\u002Fcolors.csv",38668,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fcolors.csv",{"path":68,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":69,"sourceHtmlUrl":70},"data\u002Fgoogle-fonts.csv",743272,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fgoogle-fonts.csv",{"path":72,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":73,"sourceHtmlUrl":74},"data\u002Ficons.csv",20637,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Ficons.csv",{"path":76,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":77,"sourceHtmlUrl":78},"data\u002Flanding.csv",16685,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Flanding.csv",{"path":80,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":81,"sourceHtmlUrl":82},"data\u002Fmotion.csv",10500,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fmotion.csv",{"path":84,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":85,"sourceHtmlUrl":86},"data\u002Fproducts.csv",73485,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fproducts.csv",{"path":88,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":89,"sourceHtmlUrl":90},"data\u002Freact-performance.csv",14822,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Freact-performance.csv",{"path":92,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":93,"sourceHtmlUrl":94},"data\u002Fstacks\u002Fangular.csv",18137,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fangular.csv",{"path":96,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":97,"sourceHtmlUrl":98},"data\u002Fstacks\u002Fastro.csv",11870,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fastro.csv",{"path":100,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":101,"sourceHtmlUrl":102},"data\u002Fstacks\u002Favalonia.csv",25626,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Favalonia.csv",{"path":104,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":105,"sourceHtmlUrl":106},"data\u002Fstacks\u002Fflutter.csv",10416,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fflutter.csv",{"path":108,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":109,"sourceHtmlUrl":110},"data\u002Fstacks\u002Fhtml-tailwind.csv",11305,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fhtml-tailwind.csv",{"path":112,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":113,"sourceHtmlUrl":114},"data\u002Fstacks\u002Fjavafx.csv",30871,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fjavafx.csv",{"path":116,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":117,"sourceHtmlUrl":118},"data\u002Fstacks\u002Fjetpack-compose.csv",8195,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fjetpack-compose.csv",{"path":120,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":121,"sourceHtmlUrl":122},"data\u002Fstacks\u002Flaravel.csv",18519,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Flaravel.csv",{"path":124,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":125,"sourceHtmlUrl":126},"data\u002Fstacks\u002Fnextjs.csv",12493,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnextjs.csv",{"path":128,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":129,"sourceHtmlUrl":130},"data\u002Fstacks\u002Fnuxt-ui.csv",21230,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxt-ui.csv",{"path":132,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":133,"sourceHtmlUrl":134},"data\u002Fstacks\u002Fnuxtjs.csv",16539,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxtjs.csv",{"path":136,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":137,"sourceHtmlUrl":138},"data\u002Fstacks\u002Freact-native.csv",9983,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact-native.csv",{"path":140,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":141,"sourceHtmlUrl":142},"data\u002Fstacks\u002Freact.csv",12962,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact.csv",{"path":144,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":145,"sourceHtmlUrl":146},"data\u002Fstacks\u002Fshadcn.csv",15921,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fshadcn.csv",{"path":148,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":149,"sourceHtmlUrl":150},"data\u002Fstacks\u002Fsvelte.csv",11009,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fsvelte.csv",{"path":152,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":153,"sourceHtmlUrl":154},"data\u002Fstacks\u002Fswiftui.csv",10821,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fswiftui.csv",{"path":156,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":157,"sourceHtmlUrl":158},"data\u002Fstacks\u002Fthreejs.csv",44860,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fthreejs.csv",{"path":160,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":161,"sourceHtmlUrl":162},"data\u002Fstacks\u002Funo.csv",27471,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Funo.csv",{"path":164,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":165,"sourceHtmlUrl":166},"data\u002Fstacks\u002Fuwp.csv",22867,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fuwp.csv",{"path":168,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":169,"sourceHtmlUrl":170},"data\u002Fstacks\u002Fvue.csv",11006,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fvue.csv",{"path":172,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":173,"sourceHtmlUrl":174},"data\u002Fstacks\u002Fwinui.csv",25152,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fwinui.csv",{"path":176,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":177,"sourceHtmlUrl":178},"data\u002Fstacks\u002Fwpf.csv",22538,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fwpf.csv",{"path":180,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":181,"sourceHtmlUrl":182},"data\u002Fstyles.csv",142602,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstyles.csv",{"path":184,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":185,"sourceHtmlUrl":186},"data\u002Ftypography.csv",49830,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Ftypography.csv",{"path":188,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":189,"sourceHtmlUrl":190},"data\u002Fui-reasoning.csv",52908,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fui-reasoning.csv",{"path":192,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":193,"sourceHtmlUrl":194},"data\u002Fux-guidelines.csv",18668,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fux-guidelines.csv",{"path":196,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":199,"sourceHtmlUrl":200},"scripts\u002Fcore.py","SCRIPT","脚本",18801,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fcore.py",{"path":202,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":203,"sourceHtmlUrl":204},"scripts\u002Fdesign_system.py",63694,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fdesign_system.py",{"path":206,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":207,"sourceHtmlUrl":208},"scripts\u002Fsearch.py",8687,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py",{"path":210,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":211,"sourceHtmlUrl":212},"scripts\u002Ftests\u002Ftest_core.py",5901,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Ftests\u002Ftest_core.py",{"path":214,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":215,"sourceHtmlUrl":216},"scripts\u002Ftests\u002Ftest_design_system_mode.py",6345,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Ftests\u002Ftest_design_system_mode.py",{"path":218,"resourceType":197,"resourceTypeDesc":198,"sizeBytes":219,"sourceHtmlUrl":220},"scripts\u002Fvalidate_data.py",4185,"https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fvalidate_data.py",[222,230,237,245,254,261],{"skillNo":223,"name":224,"nameZh":6,"description":225,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":226,"sourceHtmlUrl":227,"categories":228,"keywords":229,"publishedAt":18},"01M79PEWFFK2Z3D0MB2681C6P7","boucle","The boucle protocol — the labels, markers, state machine and handoff rules a\nboucle loop speaks. Use when interacting with a boucle loop on any consumer\nrepository: reading or writing boucle:* labels, emitting or parsing\n\u003C!-- boucle:* --> markers, posting a SHA-anchored verdict, driving an issue\nthrough triage\u002Fworker\u002Freviewer\u002Fe2e, or answering \"what is this loop waiting\non\". Runtime-agnostic and forge-agnostic (GitLab and GitHub).","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002FSKILL.md",[],[],{"skillNo":231,"name":232,"nameZh":6,"description":233,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":234,"categories":235,"keywords":236,"publishedAt":18},"01M79PEN7B3R3TJ19FZFZHTGPW","wrangler","Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fwrangler\u002FSKILL.md",[],[],{"skillNo":238,"name":239,"nameZh":6,"description":240,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":241,"licenseFileUrl":6,"sourceHtmlUrl":242,"categories":243,"keywords":244,"publishedAt":18},"01M79PEE1ZRT65Z4AW0N7X9D3C","web-design-guidelines","Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.","MIT","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[],[],{"skillNo":246,"name":247,"nameZh":6,"description":248,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":249,"licenseFileUrl":250,"sourceHtmlUrl":251,"categories":252,"keywords":253,"publishedAt":18},"01M79PE7NFMZCVF5BQ7CNHP73Y","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fweb-artifacts-builder\u002FSKILL.md",[],[],{"skillNo":255,"name":256,"nameZh":6,"description":257,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":258,"categories":259,"keywords":260,"publishedAt":18},"01M79PE4AYTMSWM8C35RQ780YK","wayfinder","Plan a huge chunk of work — more than one agent session can hold — as a shared map of decision tickets on your issue tracker, and resolve them one at a time until the way to the destination is clear.","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fwayfinder\u002FSKILL.md",[],[],{"skillNo":262,"name":263,"nameZh":6,"description":264,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":265,"categories":266,"keywords":267,"publishedAt":18},"01M79PE17KCVNPPFRDW5BN76PW","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fankaboot-source\u002Fboucle\u002Fblob\u002Fmain\u002F.jcode\u002Fskills\u002Fverification-before-completion\u002FSKILL.md",[],[]]