@pzy560117/codex-harness 0.1.0 → 0.1.1

package/package-source/docs/codex-harness-engineering/templates/package-assets/skills/better-icons/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: better-icons
+description: 'Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands include better-icons search and better-icons get. Also available as MCP server for AI agents.'
+---
+
+# Better Icons
+
+Search and retrieve icons from 200+ libraries via Iconify.
+
+## Installation
+
+Before using any `better-icons` commands, ensure the tool is available in the environment.
+
+**Option 1 — Install globally (recommended, matches all examples below):**
+
+```bash
+# Using npm
+npm install -g better-icons
+
+# Using Bun (faster)
+bun add -g better-icons
+```
+
+**Option 2 — Run without installing (prefix every command with `npx` or `bunx`):**
+
+```bash
+# Using npx (npm)
+npx better-icons search arrow --limit 10
+npx better-icons get lucide:home > icon.svg
+
+# Using bunx (Bun — faster)
+bunx better-icons search arrow --limit 10
+bunx better-icons get lucide:home > icon.svg
+```
+
+> **For AI agents:** Prefer the global install so that `better-icons` is on `$PATH` and the commands below work as-is. Run the install step once during environment setup, then use the commands without `npx`/`bunx`.
+
+## CLI
+
+```bash
+# Search icons
+better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]
+
+# Search and download all found icons as SVG files
+better-icons search <query> -d [dir] [--color <color>] [--size <px>]
+
+# Get icon SVG (outputs to stdout)
+better-icons get <icon-id> [--color <color>] [--size <px>] [--json]
+
+# Setup MCP server for AI agents
+better-icons setup [-a cursor,claude-code] [-s global|project]
+```
+
+## Examples
+
+```bash
+better-icons search arrow --limit 10
+better-icons search home --json | jq '.icons[0]'
+better-icons get lucide:home > icon.svg
+better-icons get mdi:home --color '#333' --json
+
+# Batch download all search results
+better-icons search arrow -d              # saves to ./icons/
+better-icons search check -d ./my-icons   # saves to ./my-icons/
+better-icons search star -d -c '#000' -s 24 --limit 64
+```
+
+## Icon ID Format
+
+`prefix:name` - e.g., `lucide:home`, `mdi:arrow-right`, `heroicons:check`
+
+## Popular Collections
+
+`lucide`, `mdi`, `heroicons`, `tabler`, `ph`, `ri`, `solar`, `iconamoon`
+
+---
+
+## MCP Tools (for AI agents)
+
+| Tool | Description |
+|------|-------------|
+| `search_icons` | Search across all libraries |
+| `get_icon` | Get single icon SVG |
+| `get_icons` | Batch retrieve multiple icons |
+| `list_collections` | Browse available icon sets |
+| `recommend_icons` | Smart recommendations for use cases |
+| `find_similar_icons` | Find variations across collections |
+| `sync_icon` | Add icon to project file |
+| `scan_project_icons` | List icons in project |
+
+## TypeScript Interfaces
+
+```typescript
+interface SearchIcons {
+  query: string
+  limit?: number        // 1-999, default 32
+  prefix?: string       // e.g., 'mdi', 'lucide'
+  category?: string     // e.g., 'General', 'Emoji'
+}
+
+interface GetIcon {
+  icon_id: string       // 'prefix:name' format
+  color?: string        // e.g., '#ff0000', 'currentColor'
+  size?: number         // pixels
+}
+
+interface GetIcons {
+  icon_ids: string[]    // max 20
+  color?: string
+  size?: number
+}
+
+interface RecommendIcons {
+  use_case: string      // e.g., 'navigation menu'
+  style?: 'solid' | 'outline' | 'any'
+  limit?: number        // default 10
+}
+
+interface SyncIcon {
+  icons_file: string    // absolute path
+  framework: 'react' | 'vue' | 'svelte' | 'solid' | 'svg'
+  icon_id: string
+  component_name?: string
+}
+```
+
+## API
+
+All icons from `https://api.iconify.design`

package/package-source/docs/codex-harness-engineering/templates/package-assets/skills/brand-design-md/README.md

@@ -0,0 +1,215 @@
+# brand-design-md
+
+> A Claude Code Skill powered by [getdesign.md](https://getdesign.md) — give your AI agent the design language of world-class brands, on demand.
+
+![Brands](https://img.shields.io/badge/brands-62-533afd?style=flat-square)
+![Claude Code](https://img.shields.io/badge/Claude_Code-Skill-d97757?style=flat-square)
+![Last Update](https://img.shields.io/github/last-commit/zephyrwang6/brand-design-md?style=flat-square&label=last%20update)
+![License](https://img.shields.io/github/license/zephyrwang6/brand-design-md?style=flat-square)
+
+[English](#english) · [中文](#中文)
+
+---
+
+<a name="english"></a>
+
+## The Problem
+
+Vibecoding has a style problem.
+
+You can ask AI to build a landing page in minutes. But the result looks like... AI built it. Random primary colors. System fonts. Buttons that could belong to any company on earth.
+
+The fix isn't better prompting — it's better context. Design systems like Apple's, Notion's, and Stripe's aren't "minimalist" or "clean" in the abstract. They're defined by exact values: `letter-spacing: -2.125px`, `font-weight: 300`, `rgba(50,50,93,0.25) 0px 30px 45px -30px`. That precision is what makes them recognizable.
+
+This skill gives Claude Code access to all of it.
+
+---
+
+## What It Does
+
+This Claude Code Skill wraps [getdesign.md](https://getdesign.md) — a project that distills 62 top brand design systems into structured `DESIGN.md` files — and makes it available as a conversational interface.
+
+**Say this:**
+> "Build a login page in Stripe style"
+> "Make it look like Linear"
+> "Notion warm colors + Linear minimal layout, build a card component"
+
+**The skill will:**
+1. Recognize the brand name (Chinese or English)
+2. Run `npx getdesign@latest add <slug>` to fetch the latest design spec
+3. Extract exact color tokens, typography rules, spacing systems, shadow formulas
+4. Generate UI code that strictly follows the spec — no approximations
+
+Because it calls `npx` at runtime, it always fetches the **latest version** of the design spec. If getdesign.md updates a brand's rules, you get the update automatically.
+
+---
+
+## Supported Brands (62 total)
+
+### Tech / AI
+Apple · Claude · Cursor · ElevenLabs · Figma · Framer · Lovable · Meta · MiniMax · Mintlify · Mistral · Notion · Ollama · OpenCode · PostHog · Raycast · Replicate · Resend · Runway · Sanity · Sentry · Supabase · Superhuman · Together AI · Vercel · VoltAgent · Warp · Webflow · X.AI · Zapier
+
+### Dev Tools / Infrastructure
+Airtable · Cal.com · Clay · ClickHouse · Cohere · Composio · Expo · HashiCorp · IBM · Intercom · Linear · Miro · MongoDB · NVIDIA · Pinterest · Stripe
+
+### Fintech / Crypto
+Binance · Coinbase · Kraken · Revolut · Wise
+
+### Consumer / Automotive
+Airbnb · BMW · Ferrari · Lamborghini · Nike · Renault · Shopify · SpaceX · Spotify · Tesla · Uber
+
+---
+
+## Quick Reference
+
+```
+apple      → extreme whitespace + SF Pro + cinematic quality
+notion     → warm minimal + serif headings + soft surfaces
+claude     → terracotta accent + editorial layout + warm intellect
+stripe     → purple + weight-300 elegance + refined detail
+linear     → ultra minimal + precise + purple accent
+vercel     → black & white precision + Geist font + pure minimal
+cursor     → dark + gradient accent + AI-native
+spotify    → dark base + neon green + album-art driven
+tesla      → radical reduction + full-bleed photography + near-zero UI
+ferrari    → cinematic black + Ferrari red + luxury typography
+airbnb     → coral warmth + photography-first + rounded UI
+```
+
+---
+
+## Installation
+
+### Prerequisites
+- [Claude Code](https://claude.ai/code) installed
+- Node.js (for `npx`)
+
+### Install the Skill
+
+```bash
+# Clone this repo
+git clone https://github.com/zephyrwang6/brand-design-md.git
+
+# Create the skill directory and copy the file
+mkdir -p ~/.claude/skills/brand-design-md
+cp brand-design-md/SKILL.md ~/.claude/skills/brand-design-md/SKILL.md
+```
+
+Restart Claude Code and the skill is live.
+
+---
+
+## Usage
+
+### Single brand
+```
+Build a Hero section in Apple style
+Make a pricing page that looks like Stripe
+Create a Notion-style card component
+```
+
+### Multi-brand mix
+```
+Notion warm colors + Linear minimal layout, build a Feature section
+Apple whitespace system + Claude terracotta accent
+```
+
+### Output formats
+- Default: single-file HTML with inline CSS
+- Specify React, Vue, or Tailwind if needed
+- Code includes comments showing which brand each token comes from
+
+---
+
+## How It Works
+
+The skill runs `npx getdesign@latest add <slug>` in a temp directory, reads the generated `DESIGN.md`, and uses its contents as the design context for code generation.
+
+This means:
+- **No stale specs** — fetches from getdesign.md at runtime
+- **No manual file management** — nothing gets committed to your project
+- **Exact fidelity** — the spec contains precise CSS values, not vague descriptions
+
+---
+
+## Demo
+
+The following pages were generated using this skill + [getdesign.md](https://getdesign.md):
+
+| Style | Characteristics |
+|-------|----------------|
+| Apple | 80px hero type, full-bleed Cinematic Band, pill buttons in `#0071e3` |
+| Notion | Warm `#fffdf9` background, Georgia serif headings, numbered feature list |
+| Claude | `#faf8f5` base, terracotta `#d97757` accent, 720px editorial column |
+| Stripe | `sohne-var` font, weight 300, `#533afd` purple, layered blue shadows |
+
+---
+
+## Credits
+
+Design specs sourced from [getdesign.md](https://getdesign.md) by [VoltAgent](https://github.com/VoltAgent/awesome-design-md). This skill is a Claude Code wrapper — all design system content belongs to the respective brand owners.
+
+---
+
+## License
+
+MIT
+
+---
+
+<a name="中文"></a>
+
+## 中文说明
+
+**一个 Claude Code Skill，让你的 AI 直接调用 62 个顶级品牌的设计规范。**
+
+不再是"AI 默认风格"。告诉 Claude Code "用 Stripe 风格做一个登录页"，它会自动拉取真实设计规范，提取精确的设计 Token，生成高度还原的 UI 代码。
+
+### 背景
+
+Vibecoding 有个通病：AI 做出来的 UI 没有风格。
+
+不是写错了，是没有参照物。苹果、Notion、Stripe 的设计系统不是什么"简约"或"精致"的抽象概念，而是一堆精确的数值：`letter-spacing: -2.125px`、`font-weight: 300`、`rgba(50,50,93,0.25) 0px 30px 45px -30px`。正是这些精确值让它们一眼可辨。
+
+这个 Skill 把这些精确值全部交给 Claude Code。
+
+### 工作原理
+
+Skill 在运行时调用 `npx getdesign@latest add <slug>`，实时拉取指定品牌的 `DESIGN.md`，提取颜色、字体、间距、阴影等设计 Token，作为上下文生成 UI。
+
+**因为是实时调用，所以永远获取最新版本的设计规范。**
+
+### 安装
+
+```bash
+git clone https://github.com/zephyrwang6/brand-design-md.git
+mkdir -p ~/.claude/skills/brand-design-md
+cp brand-design-md/SKILL.md ~/.claude/skills/brand-design-md/SKILL.md
+```
+
+重启 Claude Code 即可使用。
+
+### 使用示例
+
+**单品牌**
+```
+用 Apple 风格帮我做一个 Hero 区块
+做一个 Stripe 风格的定价页
+Notion 风格的卡片组件
+```
+
+**多品牌混搭**
+```
+Notion 的暖色调 + Linear 的极简排版，做个 Feature 区
+用 Apple 的留白系统 + Claude 的橙赭强调色
+```
+
+支持中英文品牌名，均可正确识别。
+
+### 支持品牌
+
+共 62 个，覆盖科技、AI、开发工具、金融、消费品、汽车等品类。完整列表及一句话风格描述见上方英文部分。
+
+---
+
+设计规范来源：[getdesign.md](https://getdesign.md) · [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)

package/package-source/docs/codex-harness-engineering/templates/package-assets/skills/brand-design-md/SKILL.md

@@ -0,0 +1,191 @@
+---
+name: brand-design-md
+description: 根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
+---
+
+# Brand Design MD Skill
+
+当用户提到某个品牌的设计风格，你需要：
+
+1. 识别品牌名称并映射到正确的 slug
+2. 通过 `npx getdesign@latest add <slug>` 获取完整的 DESIGN.md 规范
+3. 读取内容，作为设计上下文生成 UI 代码
+
+## 品牌 Slug 注册表
+
+### 科技 / AI 产品
+
+| 用户可能说的 | Slug |
+|---|---|
+| 苹果、Apple | `apple` |
+| Claude、Anthropic、Claude AI | `claude` |
+| Cursor、AI编辑器 | `cursor` |
+| ElevenLabs、11Labs、语音AI | `elevenlabs` |
+| Figma、设计工具 | `figma` |
+| Framer、建站工具 | `framer` |
+| Lovable | `lovable` |
+| Meta、Facebook | `meta` |
+| MiniMax | `minimax` |
+| Mintlify、文档平台 | `mintlify` |
+| Mistral、Mistral AI | `mistral.ai` |
+| Notion、笔记工具 | `notion` |
+| Ollama | `ollama` |
+| OpenCode | `opencode.ai` |
+| PostHog | `posthog` |
+| Raycast | `raycast` |
+| Replicate | `replicate` |
+| Resend | `resend` |
+| Runway、RunwayML、AI视频 | `runwayml` |
+| Sanity、CMS | `sanity` |
+| Sentry | `sentry` |
+| Supabase | `supabase` |
+| Superhuman、邮件客户端 | `superhuman` |
+| Together AI、together | `together.ai` |
+| Vercel | `vercel` |
+| VoltAgent | `voltagent` |
+| Warp、终端 | `warp` |
+| Webflow | `webflow` |
+| X.AI、Grok | `x.ai` |
+| Zapier | `zapier` |
+
+### 开发者工具 / 基础设施
+
+| 用户可能说的 | Slug |
+|---|---|
+| Airtable | `airtable` |
+| Cal.com、Cal | `cal` |
+| Clay | `clay` |
+| ClickHouse | `clickhouse` |
+| Cohere | `cohere` |
+| Composio | `composio` |
+| Expo | `expo` |
+| HashiCorp | `hashicorp` |
+| IBM | `ibm` |
+| Intercom | `intercom` |
+| Linear、项目管理 | `linear.app` |
+| Miro、在线白板 | `miro` |
+| MongoDB | `mongodb` |
+| NVIDIA、英伟达 | `nvidia` |
+| Pinterest | `pinterest` |
+| Stripe、支付 | `stripe` |
+
+### 金融 / 加密
+
+| 用户可能说的 | Slug |
+|---|---|
+| Binance、币安 | `binance` |
+| Coinbase | `coinbase` |
+| Kraken | `kraken` |
+| Revolut | `revolut` |
+| Wise | `wise` |
+
+### 消费品 / 汽车
+
+| 用户可能说的 | Slug |
+|---|---|
+| Airbnb、爱彼迎 | `airbnb` |
+| BMW、宝马 | `bmw` |
+| Ferrari、法拉利 | `ferrari` |
+| Lamborghini、兰博基尼 | `lamborghini` |
+| Nike、耐克 | `nike` |
+| Renault、雷诺 | `renault` |
+| Shopify | `shopify` |
+| SpaceX | `spacex` |
+| Spotify | `spotify` |
+| Tesla、特斯拉 | `tesla` |
+| Uber | `uber` |
+
+## 操作步骤
+
+### Step 1：识别品牌
+
+从用户的输入中识别品牌名称，对照上方注册表找到对应的 slug。
+
+- 用户说「苹果风格」→ slug = `apple`
+- 用户说「Notion 那种感觉」→ slug = `notion`
+- 用户说「做成 Stripe 的极简风」→ slug = `stripe`
+- 用户说「BMW + Linear 混搭」→ slugs = `bmw`, `linear.app`（多品牌混搭）
+
+如果品牌名无法识别，直接告知用户并列出可用品牌列表。
+
+### Step 2：获取 DESIGN.md
+
+在终端运行以下命令（在临时目录中执行，避免污染用户项目）：
+
+```bash
+cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1
+```
+
+然后读取生成的 DESIGN.md 文件：
+
+```bash
+cat /tmp/design-md-tmp/DESIGN.md
+```
+
+如果是多品牌混搭，依次获取每个品牌的 DESIGN.md，合并关键设计 token。
+
+### Step 3：解析设计规范
+
+从 DESIGN.md 中提取关键信息：
+
+- **颜色系统**：背景色、文字色、强调色、边框色
+- **字体规范**：字体家族、字号层级、字重、行高、字间距
+- **组件样式**：按钮、卡片、导航、输入框的具体 CSS 值
+- **间距系统**：基础单位和比例
+- **圆角体系**：各组件的 border-radius 值
+- **阴影系统**：各层级的 box-shadow 值
+
+### Step 4：生成 UI
+
+根据提取的设计规范，生成用户请求的 UI 代码（HTML/CSS/React/Vue 等）。
+
+**严格执行规范中的具体数值**，不要自由发挥或用近似值替代。如果规范中写的是 `rgba(0,0,0,0.95)` 就不要用 `#000000`，如果字间距是 `-2.125px` 就不要四舍五入。
+
+## 混搭风格指南
+
+当用户要求混搭多个品牌风格时：
+
+1. 分别获取各品牌的 DESIGN.md
+2. 以用户指定的主品牌为基础
+3. 从副品牌中提取指定维度（颜色/排版/布局/组件）进行融合
+4. 在生成代码中注释说明哪部分来自哪个品牌
+
+示例混搭逻辑：
+- "Notion 暖色 + Linear 极简排版" → 用 Notion 的颜色 token + Linear 的字体排版规则
+- "Apple 留白 + Claude 暖橙强调色" → 用 Apple 的间距系统 + Claude 的 `#d97757` 强调色
+
+## 输出格式
+
+- 默认输出完整的单文件 HTML（含内联 CSS）
+- 用户明确指定 React/Vue 时输出对应格式
+- 代码顶部注释品牌来源和关键设计 token，方便后续维护
+- 可选：是否将 DESIGN.md 保存到用户的项目目录（询问用户）
+
+## 错误处理
+
+- **npx 命令失败**：提示用户确认 Node.js 环境，或手动访问 https://getdesign.md 查看规范
+- **品牌不存在**：列出所有可用品牌，建议最相近的替代方案
+- **网络问题**：使用品牌注册表中的简要描述作为降级设计方向
+
+## 快速参考：各品牌风格一句话描述
+
+```
+apple      → 极致留白 + SF Pro + 电影质感
+notion     → 暖色极简 + 衬线标题 + 柔和表面
+claude     → 赭石强调色 + 编辑排版 + 温暖智识感
+stripe     → 紫色渐变 + 300 字重优雅 + 精致细节
+linear     → 超级极简 + 精准 + 紫色强调
+figma      → 多彩活泼 + 专业 + 协作感
+cursor     → 深色 + 渐变强调 + AI原生
+spotify    → 深色底 + 荧光绿 + 音乐封面驱动
+tesla      → 激进减法 + 全屏摄影 + 近零UI
+ferrari    → 黑底电影感 + Ferrari红 + 奢华排版
+vercel     → 黑白精准 + Geist字体 + 极简
+supabase   → 深色翠绿 + 代码优先 + 开发者感
+raycast    → 深色铬面 + 渐变强调 + 效率感
+airbnb     → 珊瑚暖色 + 摄影驱动 + 圆润UI
+stripe     → 紫色渐变 + 精致 + 金融质感
+nike       → 单色 + 大写字体 + 全出血摄影
+bmw        → 深色溢价面 + 精准德式美学
+shopify    → 深色电影感 + 荧光绿 + 超细字重
+```