first commit
This commit is contained in:
136
文档润色流和知识库构建流/claude-scholar/skills/ui-ux-pro-max/SKILL.md
Normal file
136
文档润色流和知识库构建流/claude-scholar/skills/ui-ux-pro-max/SKILL.md
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
name: ui-ux-pro-max
|
||||
description: This skill should be used when the user asks to design or review a UI, create a landing page or dashboard, choose colors or typography, improve accessibility, or implement polished frontend interfaces with a clear design system.
|
||||
version: 0.2.0
|
||||
---
|
||||
|
||||
# UI/UX Pro Max
|
||||
|
||||
Use this skill to turn a vague UI request into a **concrete design system plus implementation guidance**.
|
||||
|
||||
## Role
|
||||
|
||||
This skill is for:
|
||||
- design-system selection,
|
||||
- palette and typography choices,
|
||||
- UX review and remediation,
|
||||
- stack-aware frontend implementation guidance,
|
||||
- lightweight design-system persistence for multi-page work.
|
||||
|
||||
It is **not** a replacement for product strategy or user research. Use it to make execution sharper after the product direction is already roughly known.
|
||||
|
||||
## Core workflow
|
||||
|
||||
### 1. Infer the request shape
|
||||
|
||||
Extract the minimum design signals first:
|
||||
- product type,
|
||||
- industry,
|
||||
- style keywords,
|
||||
- target platform,
|
||||
- implementation stack.
|
||||
|
||||
If the user does not specify a stack, default to `html-tailwind`.
|
||||
|
||||
### 2. Generate the design system first
|
||||
|
||||
Use the helper script to produce a compact design recommendation:
|
||||
|
||||
```bash
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"
|
||||
```
|
||||
|
||||
This produces:
|
||||
- recommended style direction,
|
||||
- palette family,
|
||||
- typography direction,
|
||||
- interaction / visual effects,
|
||||
- landing or layout bias,
|
||||
- anti-patterns to avoid.
|
||||
|
||||
If the work spans multiple turns or pages, persist the design system:
|
||||
|
||||
```bash
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name"
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard"
|
||||
```
|
||||
|
||||
This creates:
|
||||
- `design-system/MASTER.md`
|
||||
- optional page-level override notes under `design-system/pages/`
|
||||
|
||||
### 3. Pull targeted guidance only when needed
|
||||
|
||||
Use a focused search instead of loading everything at once:
|
||||
|
||||
```bash
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "real-time dashboard" --domain chart
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury serif" --domain typography
|
||||
```
|
||||
|
||||
Supported domains:
|
||||
- `product`
|
||||
- `style`
|
||||
- `color`
|
||||
- `typography`
|
||||
- `landing`
|
||||
- `chart`
|
||||
- `ux`
|
||||
|
||||
### 4. Add stack-specific guidance before coding
|
||||
|
||||
```bash
|
||||
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
Supported stacks:
|
||||
- `html-tailwind`
|
||||
- `react`
|
||||
- `nextjs`
|
||||
- `vue`
|
||||
- `svelte`
|
||||
- `swiftui`
|
||||
- `react-native`
|
||||
- `flutter`
|
||||
- `shadcn`
|
||||
- `jetpack-compose`
|
||||
|
||||
### 5. Synthesize before implementation
|
||||
|
||||
After gathering the design system, convert it into:
|
||||
- layout structure,
|
||||
- component rules,
|
||||
- visual tokens,
|
||||
- interaction rules,
|
||||
- accessibility constraints,
|
||||
- implementation notes for the chosen stack.
|
||||
|
||||
Do not dump raw search output into the final answer. Use it to justify a coherent design direction.
|
||||
|
||||
## Default output shape
|
||||
|
||||
A good response should usually include:
|
||||
1. product and UI framing,
|
||||
2. recommended style system,
|
||||
3. palette and typography,
|
||||
4. component and layout rules,
|
||||
5. accessibility and interaction checks,
|
||||
6. stack-aware implementation notes.
|
||||
|
||||
## Safety rules
|
||||
|
||||
- Do not hardcode a design language without connecting it to the product type.
|
||||
- Do not use emoji as primary UI iconography.
|
||||
- Do not weaken text contrast for visual flair.
|
||||
- Do not scale interactive cards on hover if it destabilizes layout.
|
||||
- Do not use animation that violates `prefers-reduced-motion`.
|
||||
- Do not invent unsupported helper scripts or datasets; use the bundled `search.py` and `data/ui-reasoning.csv` only.
|
||||
|
||||
## References
|
||||
|
||||
Load only what is needed:
|
||||
- `references/USAGE.md` - recommended command patterns and retrieval flow
|
||||
- `data/ui-reasoning.csv` - compact product-to-design heuristics used by the helper script
|
||||
- `scripts/search.py` - deterministic helper for design-system, domain, and stack lookup
|
||||
Reference in New Issue
Block a user