@pzy560117/codex-harness 0.1.2 → 0.1.4

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

@@ -1,129 +0,0 @@
----
-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

@@ -1,215 +0,0 @@
-# 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

@@ -1,191 +0,0 @@
----
-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    → 深色电影感 + 荧光绿 + 超细字重
-```