@stephen-lord/docs 1.0.0

package/dist/claude-code-skills/Detail.md

@@ -0,0 +1,339 @@
+# Agent Skills
+
+Agent Skills 是扩展 Claude 功能的模块化能力。每个 Skill 包含指令、元数据和可选资源（脚本、模板），Claude 在相关时会自动使用这些资源。
+
+---
+
+## 为什么使用 Skills
+
+Skills 是可重用的、基于文件系统的资源，为 Claude 提供特定领域的专业知识：工作流、上下文和最佳实践，将通用代理转变为专家。与提示不同（提示是对话级别的一次性任务指令），Skills 按需加载，无需在多个对话中重复提供相同的指导。
+
+**主要优势**：
+- **专业化 Claude**：为特定领域的任务定制功能
+- **减少重复**：创建一次，自动使用
+- **组合功能**：结合 Skills 构建复杂工作流
+
+<Note>
+有关 Agent Skills 的架构和实际应用的深入讨论，请阅读我们的工程博客：[使用 Agent Skills 为真实世界装备代理](https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills)。
+</Note>
+
+## 使用 Skills
+
+Anthropic 为常见文档任务（PowerPoint、Excel、Word、PDF）提供预构建的 Agent Skills，您也可以创建自己的自定义 Skills。两者的工作方式相同。Claude 在与您的请求相关时会自动使用它们。
+
+**预构建的 Agent Skills** 可供 claude.ai 上的所有用户和通过 Claude API 使用。请参阅下面的[可用 Skills](#available-skills) 部分了解完整列表。
+
+**自定义 Skills** 让您打包领域专业知识和组织知识。它们在 Claude 的所有产品中都可用：在 Claude Code 中创建它们、通过 API 上传它们，或在 claude.ai 设置中添加它们。
+
+<Note>
+**开始使用：**
+- 对于预构建的 Agent Skills：请参阅[快速入门教程](/docs/zh-CN/agents-and-tools/agent-skills/quickstart)，开始在 API 中使用 PowerPoint、Excel、Word 和 PDF skills
+- 对于自定义 Skills：请参阅 [Agent Skills 食谱](https://github.com/anthropics/claude-cookbooks/tree/main/skills)，了解如何创建您自己的 Skills
+</Note>
+
+## Skills 如何工作
+
+Skills 利用 Claude 的虚拟机环境提供超越仅使用提示可能实现的功能。Claude 在具有文件系统访问权限的虚拟机中运行，允许 Skills 作为包含指令、可执行代码和参考资料的目录存在，组织方式就像您为新团队成员创建的入职指南。
+
+这种基于文件系统的架构支持**渐进式披露**：Claude 按需分阶段加载信息，而不是预先消耗上下文。
+
+### 三种 Skill 内容类型，三个加载级别
+
+Skills 可以包含三种类型的内容，每种在不同时间加载：
+
+### 第 1 级：元数据（始终加载）
+
+**内容类型：指令**。Skill 的 YAML 前置数据提供发现信息：
+
+```yaml
+---
+name: pdf-processing
+description: 从 PDF 文件中提取文本和表格、填充表单、合并文档。在处理 PDF 文件或用户提及 PDF、表单或文档提取时使用。
+---
+```
+
+Claude 在启动时加载此元数据并将其包含在系统提示中。这种轻量级方法意味着您可以安装许多 Skills 而不会产生上下文成本；Claude 只知道每个 Skill 的存在以及何时使用它。
+
+### 第 2 级：指令（触发时加载）
+
+**内容类型：指令**。SKILL.md 的主体包含程序知识：工作流、最佳实践和指导：
+
+````markdown
+# PDF 处理
+
+## 快速入门
+
+使用 pdfplumber 从 PDF 中提取文本：
+
+```python
+import pdfplumber
+
+with pdfplumber.open("document.pdf") as pdf:
+    text = pdf.pages[0].extract_text()
+```
+
+有关高级表单填充，请参阅 [FORMS.md](FORMS.md)。
+````
+
+当您请求与 Skill 描述匹配的内容时，Claude 通过 bash 从文件系统读取 SKILL.md。只有这样，此内容才会进入上下文窗口。
+
+### 第 3 级：资源和代码（按需加载）
+
+**内容类型：指令、代码和资源**。Skills 可以捆绑其他材料：
+
+```
+pdf-skill/
+├── SKILL.md (主要指令)
+├── FORMS.md (表单填充指南)
+├── REFERENCE.md (详细 API 参考)
+└── scripts/
+    └── fill_form.py (实用脚本)
+```
+
+**指令**：包含专业指导和工作流的其他 markdown 文件（FORMS.md、REFERENCE.md）
+
+**代码**：Claude 通过 bash 运行的可执行脚本（fill_form.py、validate.py）；脚本提供确定性操作而不消耗上下文
+
+**资源**：参考资料，如数据库架构、API 文档、模板或示例
+
+Claude 仅在引用时访问这些文件。文件系统模型意味着每种内容类型都有不同的优势：指令用于灵活指导，代码用于可靠性，资源用于事实查询。
+
+| 级别 | 加载时间 | 令牌成本 | 内容 |
+|---|---|---|---|
+| **第 1 级：元数据** | 始终（启动时） | 每个 Skill 约 100 个令牌 | YAML 前置数据中的 `name` 和 `description` |
+| **第 2 级：指令** | 触发 Skill 时 | 不到 5k 个令牌 | 包含指令和指导的 SKILL.md 主体 |
+| **第 3 级+：资源** | 按需 | 实际上无限制 | 通过 bash 执行的捆绑文件，不将内容加载到上下文中 |
+
+渐进式披露确保任何给定时间只有相关内容占据上下文窗口。
+
+### Skills 架构
+
+Skills 在代码执行环境中运行，Claude 具有文件系统访问、bash 命令和代码执行功能。可以这样想：Skills 作为虚拟机上的目录存在，Claude 使用与您在计算机上导航文件相同的 bash 命令与它们交互。
+
+![Agent Skills 架构 - 显示 Skills 如何与代理的配置和虚拟机集成](/docs/images/agent-skills-architecture.png)
+
+**Claude 如何访问 Skill 内容：**
+
+触发 Skill 时，Claude 使用 bash 从文件系统读取 SKILL.md，将其指令带入上下文窗口。如果这些指令引用其他文件（如 FORMS.md 或数据库架构），Claude 也会使用其他 bash 命令读取这些文件。当指令提及可执行脚本时，Claude 通过 bash 运行它们并仅接收输出（脚本代码本身永远不会进入上下文）。
+
+**此架构支持的功能：**
+
+**按需文件访问**：Claude 仅读取每个特定任务所需的文件。Skill 可以包含数十个参考文件，但如果您的任务只需要销售架构，Claude 仅加载该文件。其余文件保留在文件系统上，消耗零令牌。
+
+**高效的脚本执行**：当 Claude 运行 `validate_form.py` 时，脚本的代码永远不会加载到上下文窗口中。仅脚本的输出（如"验证通过"或特定错误消息）消耗令牌。这使脚本比让 Claude 即时生成等效代码要高效得多。
+
+**捆绑内容没有实际限制**：因为文件在访问前不消耗上下文，Skills 可以包含全面的 API 文档、大型数据集、广泛的示例或任何您需要的参考资料。对于未使用的捆绑内容没有上下文成本。
+
+这种基于文件系统的模型是使渐进式披露工作的原因。Claude 导航您的 Skill 就像您参考入职指南的特定部分一样，访问每个任务所需的确切内容。
+
+### 示例：加载 PDF 处理 skill
+
+以下是 Claude 如何加载和使用 PDF 处理 skill 的方式：
+
+1. **启动**：系统提示包括：`PDF 处理 - 从 PDF 文件中提取文本和表格、填充表单、合并文档`
+2. **用户请求**：「从此 PDF 中提取文本并总结」
+3. **Claude 调用**：`bash: read pdf-skill/SKILL.md` → 指令加载到上下文中
+4. **Claude 确定**：不需要表单填充，因此不读取 FORMS.md
+5. **Claude 执行**：使用 SKILL.md 中的指令完成任务
+
+![Skills 加载到上下文窗口 - 显示 skill 元数据和内容的渐进式加载](/docs/images/agent-skills-context-window.png)
+
+该图表显示：
+1. 预加载系统提示和 skill 元数据的默认状态
+2. Claude 通过 bash 读取 SKILL.md 触发 skill
+3. Claude 根据需要可选地读取其他捆绑文件，如 FORMS.md
+4. Claude 继续执行任务
+
+这种动态加载确保只有相关的 skill 内容占据上下文窗口。
+
+## Skills 工作的地方
+
+Skills 在 Claude 的代理产品中可用：
+
+### Claude API
+
+Claude API 支持预构建的 Agent Skills 和自定义 Skills。两者的工作方式相同：在 `container` 参数中指定相关的 `skill_id` 以及代码执行工具。
+
+**前提条件**：通过 API 使用 Skills 需要三个 beta 标头：
+- `code-execution-2025-08-25` - Skills 在代码执行容器中运行
+- `skills-2025-10-02` - 启用 Skills 功能
+- `files-api-2025-04-14` - 上传/下载文件到/从容器所需
+
+通过引用其 `skill_id`（例如 `pptx`、`xlsx`）使用预构建的 Agent Skills，或通过 Skills API（`/v1/skills` 端点）创建和上传您自己的。自定义 Skills 在组织范围内共享。
+
+要了解更多信息，请参阅[使用 Claude API 的 Skills](/docs/zh-CN/build-with-claude/skills-guide)。
+
+### Claude Code
+
+[Claude Code](https://code.claude.com/docs/overview) 仅支持自定义 Skills。
+
+**自定义 Skills**：创建包含 SKILL.md 文件的目录形式的 Skills。Claude 自动发现并使用它们。
+
+Claude Code 中的自定义 Skills 基于文件系统，不需要 API 上传。
+
+要了解更多信息，请参阅[在 Claude Code 中使用 Skills](https://code.claude.com/docs/skills)。
+
+### Claude Agent SDK
+
+[Claude Agent SDK](/docs/zh-CN/agent-sdk/overview) 通过基于文件系统的配置支持自定义 Skills。
+
+**自定义 Skills**：在 `.claude/skills/` 中创建包含 SKILL.md 文件的目录形式的 Skills。通过在 `allowed_tools` 配置中包含 `"Skill"` 来启用 Skills。
+
+SDK 运行时会自动发现 Skills 中的 Skills。
+
+要了解更多信息，请参阅 [SDK 中的 Agent Skills](/docs/zh-CN/agent-sdk/skills)。
+
+### Claude.ai
+
+[Claude.ai](https://claude.ai) 支持预构建的 Agent Skills 和自定义 Skills。
+
+**预构建的 Agent Skills**：这些 Skills 在您创建文档时已在后台工作。Claude 使用它们而不需要任何设置。
+
+**自定义 Skills**：通过设置 > 功能将您自己的 Skills 作为 zip 文件上传。在启用代码执行的 Pro、Max、Team 和 Enterprise 计划上可用。自定义 Skills 对每个用户是个人的；它们不在组织范围内共享，管理员无法集中管理。
+
+要了解更多关于在 Claude.ai 中使用 Skills 的信息，请参阅 Claude 帮助中心中的以下资源：
+- [什么是 Skills？](https://support.claude.com/en/articles/12512176-what-are-skills)
+- [在 Claude 中使用 Skills](https://support.claude.com/en/articles/12512180-using-skills-in-claude)
+- [如何创建自定义 Skills](https://support.claude.com/en/articles/12512198-creating-custom-skills)
+- [使用 Skills 教 Claude 您的工作方式](https://support.claude.com/en/articles/12580051-teach-claude-your-way-of-working-using-skills)
+
+## Skill 结构
+
+每个 Skill 都需要一个带有 YAML 前置数据的 `SKILL.md` 文件：
+
+```yaml
+---
+name: your-skill-name
+description: 简要描述此 Skill 的功能以及何时使用它
+---
+
+# 您的 Skill 名称
+
+## 指令
+[Claude 要遵循的清晰、分步指导]
+
+## 示例
+[使用此 Skill 的具体示例]
+```
+
+**必需字段**：`name` 和 `description`
+
+**字段要求**：
+
+`name`：
+- 最多 64 个字符
+- 只能包含小写字母、数字和连字符
+- 不能包含 XML 标签
+- 不能包含保留字：「anthropic」、「claude」
+
+`description`：
+- 必须非空
+- 最多 1024 个字符
+- 不能包含 XML 标签
+
+`description` 应包括 Skill 的功能以及 Claude 何时应使用它。有关完整的创作指导，请参阅[最佳实践指南](/docs/zh-CN/agents-and-tools/agent-skills/best-practices)。
+
+## 安全考虑
+
+我们强烈建议仅从受信任的来源使用 Skills：您自己创建的或从 Anthropic 获得的。Skills 通过指令和代码为 Claude 提供新功能，虽然这使它们功能强大，但也意味着恶意 Skill 可以指导 Claude 以与 Skill 声称的目的不匹配的方式调用工具或执行代码。
+
+<Warning>
+如果您必须使用来自不受信任或未知来源的 Skill，请格外谨慎并在使用前彻底审计它。根据 Claude 在执行 Skill 时拥有的访问权限，恶意 Skills 可能导致数据泄露、未授权系统访问或其他安全风险。
+</Warning>
+
+**关键安全考虑**：
+- **彻底审计**：查看 Skill 中捆绑的所有文件：SKILL.md、脚本、图像和其他资源。寻找异常模式，如意外的网络调用、文件访问模式或与 Skill 声称的目的不匹配的操作
+- **外部来源有风险**：从外部 URL 获取数据的 Skills 特别有风险，因为获取的内容可能包含恶意指令。即使是可信的 Skills 如果其外部依赖项随时间变化也可能被破坏
+- **工具滥用**：恶意 Skills 可以以有害方式调用工具（文件操作、bash 命令、代码执行）
+- **数据泄露**：具有敏感数据访问权限的 Skills 可能被设计为向外部系统泄露信息
+- **像安装软件一样对待**：仅从受信任的来源使用 Skills。在将 Skills 集成到具有敏感数据或关键操作访问权限的生产系统时要特别小心
+
+## 可用 Skills
+
+### 预构建的 Agent Skills
+
+以下预构建的 Agent Skills 可立即使用：
+
+- **PowerPoint (pptx)**：创建演示文稿、编辑幻灯片、分析演示文稿内容
+- **Excel (xlsx)**：创建电子表格、分析数据、生成带图表的报告
+- **Word (docx)**：创建文档、编辑内容、格式化文本
+- **PDF (pdf)**：生成格式化的 PDF 文档和报告
+
+这些 Skills 在 Claude API 和 claude.ai 上可用。请参阅[快速入门教程](/docs/zh-CN/agents-and-tools/agent-skills/quickstart)开始在 API 中使用它们。
+
+### 自定义 Skills 示例
+
+有关自定义 Skills 的完整示例，请参阅 [Skills 食谱](https://github.com/anthropics/claude-cookbooks/tree/main/skills)。
+
+## 限制和约束
+
+了解这些限制有助于您有效规划 Skills 部署。
+
+### 跨平台可用性
+
+**自定义 Skills 不会跨平台同步**。上传到一个平台的 Skills 不会自动在其他平台上可用：
+
+- 上传到 Claude.ai 的 Skills 必须单独上传到 API
+- 通过 API 上传的 Skills 在 Claude.ai 上不可用
+- Claude Code Skills 基于文件系统，与 Claude.ai 和 API 分离
+
+您需要为要使用 Skills 的每个平台单独管理和上传 Skills。
+
+### 共享范围
+
+Skills 根据使用位置有不同的共享模型：
+- **Claude.ai**：仅限个人用户；每个团队成员必须单独上传
+- **Claude API**：工作区范围；所有工作区成员可以访问上传的 Skills
+- **Claude Code**：个人（`~/.claude/skills/`）或基于项目（`.claude/skills/`）
+
+Claude.ai 目前不支持自定义 Skills 的集中管理员管理或组织范围分发。
+
+### 运行时环境约束
+
+Skills 在代码执行容器中运行，具有以下限制：
+
+- **无网络访问**：Skills 无法进行外部 API 调用或访问互联网
+- **无运行时包安装**：仅预安装的包可用。您无法在执行期间安装新包。
+- **仅预配置的依赖项**：检查[代码执行工具文档](/docs/zh-CN/agents-and-tools/tool-use/code-execution-tool)了解可用包的列表
+
+规划您的 Skills 在这些约束范围内工作。
+
+## 后续步骤
+
+<CardGroup cols={2}>
+  <Card
+    title="开始使用 Agent Skills"
+    icon="graduation-cap"
+    href="/docs/zh-CN/agents-and-tools/agent-skills/quickstart"
+  >
+    创建您的第一个 Skill
+  </Card>
+  <Card
+    title="API 指南"
+    icon="code"
+    href="/docs/zh-CN/build-with-claude/skills-guide"
+  >
+    使用 Claude API 的 Skills
+  </Card>
+  <Card
+    title="在 Claude Code 中使用 Skills"
+    icon="terminal"
+    href="https://code.claude.com/docs/skills"
+  >
+    在 Claude Code 中创建和管理自定义 Skills
+  </Card>
+  <Card
+    title="在 Agent SDK 中使用 Skills"
+    icon="cube"
+    href="/docs/zh-CN/agent-sdk/skills"
+  >
+    在 TypeScript 和 Python 中以编程方式使用 Skills
+  </Card>
+  <Card
+    title="创作最佳实践"
+    icon="lightbulb"
+    href="/docs/zh-CN/agents-and-tools/agent-skills/best-practices"
+  >
+    编写 Claude 可以有效使用的 Skills
+  </Card>
+</CardGroup>

package/dist/ui-ux-pro-max-skill/.agent/workflows/ui-ux-pro-max.md

@@ -0,0 +1,288 @@
+# ui-ux-pro-max
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use This Workflow
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches 5 domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for hierarchical retrieval across sessions, add `--persist`:
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+
+### Step 4: Stack Guidelines (Default: html-tailwind)
+
+Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
+, `jetpack-compose`
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react` | State, hooks, performance, patterns |
+| `nextjs` | SSR, routing, images, API routes |
+| `vue` | Composition API, Pinia, Vue Router |
+| `svelte` | Runes, stores, SvelteKit |
+| `swiftui` | Views, State, Navigation, Animation |
+| `react-native` | Components, Navigation, Lists |
+| `flutter` | Widgets, State, Layout, Theming |
+| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+### Step 1: Analyze Requirements
+- Product type: Beauty/Spa service
+- Style keywords: elegant, professional, soft
+- Industry: Beauty/Wellness
+- Stack: html-tailwind (default)
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get UX guidelines for animation and accessibility
+python3 .shared/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
+
+# Get alternative typography options if needed
+python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 .shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 .shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
+| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+
+### Interaction & Cursor
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
+| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
+| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected