From e3a7f270ff22b135863321fc72e4dc157a8543a7 Mon Sep 17 00:00:00 2001 From: Crocodile Forest Date: Fri, 26 Jun 2026 17:17:56 +1000 Subject: [PATCH] docs: make SKILL.md stack-neutral instead of React Native-only (#372) The skill body claimed "React Native (this project's only tech stack)" and listed only `react-native` under Available Stacks. That contradicts: - the SKILL.md frontmatter description ("web and mobile", multi-stack) - plugin.json, which advertises 15 stacks - the shipped data/stacks/ engine data (16 stack CSVs) So `--stack nextjs`/`react`/`shadcn`/`vue`/etc. have always worked; the docs just never said so, steering every project toward React Native. Make the guidance framework-agnostic: - Step 1 "Stack" bullet: match the project's framework, not RN - Step 4 heading/command: generic `--stack ` - Available Stacks table: list all shipped stacks - Example workflow (a homepage) uses a web stack - Tips line generalized --- .claude/skills/ui-ux-pro-max/SKILL.md | 33 +++++++++++++++++++++------ 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md index 75d2e1b..08a354b 100644 --- a/.claude/skills/ui-ux-pro-max/SKILL.md +++ b/.claude/skills/ui-ux-pro-max/SKILL.md @@ -358,7 +358,7 @@ Extract key information from user request: - **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid - **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work) - **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc. -- **Stack**: React Native (this project's only tech stack) +- **Stack**: Match the project's framework. The engine ships guidance for many stacks (see [Available Stacks](#available-stacks) below) — pass the matching `--stack` (e.g. `nextjs`, `react`, `shadcn`, `vue`, `svelte`, `astro`, `swiftui`, `flutter`, `react-native`). ### Step 2: Generate Design System (REQUIRED) @@ -438,12 +438,14 @@ python3 skills/ui-ux-pro-max/scripts/search.py "" --domain [-n | App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` | | AI prompt / CSS keywords | `prompt` | `--domain prompt "minimalism"` | -### Step 4: Stack Guidelines (React Native) +### Step 4: Stack Guidelines (match your framework) -Get React Native implementation-specific best practices: +Get implementation-specific best practices for the stack you're building in. +Pass the `--stack` that matches the project's framework: ```bash -python3 skills/ui-ux-pro-max/scripts/search.py "" --stack react-native +python3 skills/ui-ux-pro-max/scripts/search.py "" --stack +# e.g. --stack nextjs | react | shadcn | vue | svelte | astro | swiftui | flutter | react-native ``` --- @@ -468,9 +470,26 @@ python3 skills/ui-ux-pro-max/scripts/search.py "" --stack react-native ### Available Stacks +Run `ls /data/stacks/` to see the live set. Shipped stacks: + | Stack | Focus | |-------|-------| +| `react` | Components, hooks, render performance | +| `nextjs` | App Router, RSC, Server Actions, rendering | +| `vue` | Components, Composition API, reactivity | +| `nuxtjs` | Nuxt app patterns, SSR data fetching | +| `nuxt-ui` | Nuxt UI component patterns | +| `svelte` | Components, stores, transitions | +| `astro` | Islands, content, partial hydration | +| `shadcn` | shadcn/ui primitives, composition | +| `html-tailwind` | Tailwind utility patterns | +| `angular` | Components, signals, services | +| `laravel` | Blade / server-rendered UI patterns | +| `swiftui` | Views, state, navigation (iOS/macOS) | +| `flutter` | Widgets, state, navigation | +| `jetpack-compose` | Composables, state, navigation (Android) | | `react-native` | Components, Navigation, Lists | +| `threejs` | 3D scenes, materials, performance | --- @@ -482,7 +501,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "" --stack react-native - Product type: Tool (AI search engine) - Target audience: C-end users looking for fast, intelligent search - Style keywords: modern, minimal, content-first, dark mode -- Stack: React Native +- Stack: Next.js (a homepage is a web surface; use a web `--stack`) ### Step 2: Generate Design System (REQUIRED) @@ -505,7 +524,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --doma ### Step 4: Stack Guidelines ```bash -python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native +python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack nextjs ``` **Then:** Synthesize design system + detailed searches and implement the design. @@ -533,7 +552,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system - Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"` - Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"` - Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about -- Always add `--stack react-native` for implementation-specific guidance +- Add the `--stack` that matches the project's framework for implementation-specific guidance ### Common Sticking Points