{
  "canonical_name": "heilcheng/awesome-agent-skills",
  "compilation_id": "pack_b57e43af8f1b4546890beafd88512266",
  "created_at": "2026-05-19T05:36:55.306220+00:00",
  "created_by": "project-pack-compiler",
  "feedback": {
    "carrier_selection_notes": [
      "viable_asset_types=skill, recipe, host_instruction, eval, preflight",
      "recommended_asset_types=skill, recipe, host_instruction, eval, preflight"
    ],
    "evidence_delta": {
      "confirmed_claims": [
        "identity_anchor_present",
        "capability_and_host_targets_present",
        "install_path_declared_or_better"
      ],
      "missing_required_fields": [],
      "must_verify_forwarded": [
        "Run or inspect `npx skills` in an isolated environment.",
        "Confirm the project exposes the claimed capability to at least one target host."
      ],
      "quickstart_execution_scope": "allowlisted_sandbox_smoke",
      "sandbox_command": "npx skills",
      "sandbox_container_image": "node:22-slim",
      "sandbox_execution_backend": "docker",
      "sandbox_planner_decision": "deterministic_isolated_install",
      "sandbox_validation_id": "sbx_99c3b617ad4c443185b0b0a761d0591d"
    },
    "feedback_event_type": "project_pack_compilation_feedback",
    "learning_candidate_reasons": [],
    "template_gaps": []
  },
  "identity": {
    "canonical_id": "project_06bd66350a0fedaae34f119e3df28fc8",
    "canonical_name": "heilcheng/awesome-agent-skills",
    "homepage_url": null,
    "license": "unknown",
    "repo_url": "https://github.com/heilcheng/awesome-agent-skills",
    "slug": "awesome-agent-skills",
    "source_packet_id": "phit_c30472d60a604792a7ddaf8f87cde3f6",
    "source_validation_id": "dval_e7849b22030c458ea2d2e6c83b3bd1f6"
  },
  "merchandising": {
    "best_for": "需要软件开发与交付能力，并使用 claude的用户",
    "github_forks": 436,
    "github_stars": 4716,
    "one_liner_en": "Tutorials, Guides and Agent Skills Directories",
    "one_liner_zh": "Tutorials, Guides and Agent Skills Directories",
    "primary_category": {
      "category_id": "software-development",
      "confidence": "medium",
      "name_en": "Software Development",
      "name_zh": "软件开发与交付",
      "reason": "matched_keywords:git"
    },
    "target_user": "使用 claude 等宿主 AI 的用户",
    "title_en": "awesome-agent-skills",
    "title_zh": "awesome-agent-skills 能力包",
    "visible_tags": [
      {
        "label_en": "Browser Agents",
        "label_zh": "浏览器 Agent",
        "source": "repo_evidence_project_characteristics",
        "tag_id": "product_domain-browser-agents",
        "type": "product_domain"
      },
      {
        "label_en": "Web Task Automation",
        "label_zh": "网页任务自动化",
        "source": "repo_evidence_project_characteristics",
        "tag_id": "user_job-web-task-automation",
        "type": "user_job"
      },
      {
        "label_en": "Browser Automation",
        "label_zh": "浏览器自动化",
        "source": "repo_evidence_project_characteristics",
        "tag_id": "core_capability-browser-automation",
        "type": "core_capability"
      },
      {
        "label_en": "Page Observation and Action Planning",
        "label_zh": "页面观察与动作规划",
        "source": "repo_evidence_project_characteristics",
        "tag_id": "workflow_pattern-page-observation-and-action-planning",
        "type": "workflow_pattern"
      },
      {
        "label_en": "Evaluation Suite",
        "label_zh": "评测体系",
        "source": "repo_evidence_project_characteristics",
        "tag_id": "selection_signal-evaluation-suite",
        "type": "selection_signal"
      }
    ]
  },
  "packet_id": "phit_c30472d60a604792a7ddaf8f87cde3f6",
  "page_model": {
    "artifacts": {
      "artifact_slug": "awesome-agent-skills",
      "files": [
        "PROJECT_PACK.json",
        "QUICK_START.md",
        "PROMPT_PREVIEW.md",
        "HUMAN_MANUAL.md",
        "AI_CONTEXT_PACK.md",
        "BOUNDARY_RISK_CARD.md",
        "PITFALL_LOG.md",
        "REPO_INSPECTION.json",
        "REPO_INSPECTION.md",
        "CAPABILITY_CONTRACT.json",
        "EVIDENCE_INDEX.json",
        "CLAIM_GRAPH.json"
      ],
      "required_files": [
        "PROJECT_PACK.json",
        "QUICK_START.md",
        "PROMPT_PREVIEW.md",
        "HUMAN_MANUAL.md",
        "AI_CONTEXT_PACK.md",
        "BOUNDARY_RISK_CARD.md",
        "PITFALL_LOG.md",
        "REPO_INSPECTION.json"
      ]
    },
    "detail": {
      "capability_source": "Project Hit Packet + DownstreamValidationResult",
      "commands": [
        {
          "command": "npx skills",
          "label": "Node.js / npx · 官方安装入口",
          "source": "https://github.com/heilcheng/awesome-agent-skills#readme",
          "verified": true
        }
      ],
      "display_tags": [
        "浏览器 Agent",
        "网页任务自动化",
        "浏览器自动化",
        "页面观察与动作规划",
        "评测体系"
      ],
      "eyebrow": "软件开发与交付",
      "glance": [
        {
          "body": "判断自己是不是目标用户。",
          "label": "最适合谁",
          "value": "需要软件开发与交付能力，并使用 claude的用户"
        },
        {
          "body": "先理解能力边界，再决定是否继续。",
          "label": "核心价值",
          "value": "Tutorials, Guides and Agent Skills Directories"
        },
        {
          "body": "未完成验证前保持审慎。",
          "label": "继续前",
          "value": "publish to Doramagic.ai project surfaces"
        }
      ],
      "guardrail_source": "Boundary & Risk Card",
      "guardrails": [
        {
          "body": "Prompt Preview 只展示流程，不证明项目已安装或运行。",
          "label": "Check 1",
          "value": "不要把试用当真实运行"
        },
        {
          "body": "claude",
          "label": "Check 2",
          "value": "确认宿主兼容"
        },
        {
          "body": "publish to Doramagic.ai project surfaces",
          "label": "Check 3",
          "value": "先隔离验证"
        }
      ],
      "mode": "skill, recipe, host_instruction, eval, preflight",
      "pitfall_log": {
        "items": [
          {
            "body": "仓库名 `awesome-agent-skills` 与安装入口 `skills` 不完全一致。",
            "category": "身份坑",
            "evidence": [
              "identity.distribution | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | repo=awesome-agent-skills; install=skills"
            ],
            "severity": "medium",
            "suggested_check": "在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。",
            "title": "仓库名和安装名不一致",
            "user_impact": "用户照着仓库名搜索包或照着包名找仓库时容易走错入口。"
          },
          {
            "body": "项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。",
            "category": "配置坑",
            "evidence": [
              "capability.host_targets | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | host_targets=claude"
            ],
            "severity": "medium",
            "suggested_check": "列出会写入的配置文件、目录和卸载/回滚步骤。",
            "title": "可能修改宿主 AI 配置",
            "user_impact": "安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。"
          },
          {
            "body": "README/documentation is current enough for a first validation pass.",
            "category": "能力坑",
            "evidence": [
              "capability.assumptions | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | README/documentation is current enough for a first validation pass."
            ],
            "severity": "medium",
            "suggested_check": "将假设转成下游验证清单。",
            "title": "能力判断依赖假设",
            "user_impact": "假设不成立时，用户拿不到承诺的能力。"
          },
          {
            "body": "未记录 last_activity_observed。",
            "category": "维护坑",
            "evidence": [
              "evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | last_activity_observed missing"
            ],
            "severity": "medium",
            "suggested_check": "补 GitHub 最近 commit、release、issue/PR 响应信号。",
            "title": "维护活跃度未知",
            "user_impact": "新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。"
          },
          {
            "body": "no_demo",
            "category": "安全/权限坑",
            "evidence": [
              "downstream_validation.risk_items | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium"
            ],
            "severity": "medium",
            "suggested_check": "进入安全/权限治理复核队列。",
            "title": "下游验证发现风险项",
            "user_impact": "下游已经要求复核，不能在页面中弱化。"
          },
          {
            "body": "no_demo",
            "category": "安全/权限坑",
            "evidence": [
              "risks.scoring_risks | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium"
            ],
            "severity": "medium",
            "suggested_check": "把风险写入边界卡，并确认是否需要人工复核。",
            "title": "存在评分风险",
            "user_impact": "风险会影响是否适合普通用户安装。"
          },
          {
            "body": "GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)",
            "category": "安全/权限坑",
            "evidence": [
              "community_evidence:github | cevd_dc99192b4a9b4b8089f4f6696f332a7d | https://github.com/heilcheng/awesome-agent-skills/issues/218 | 来源讨论提到 api key 相关条件，需在安装/试用前复核。"
            ],
            "severity": "medium",
            "suggested_check": "来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。",
            "title": "来源证据：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)",
            "user_impact": "可能影响授权、密钥配置或安全边界。"
          },
          {
            "body": "GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)",
            "category": "安全/权限坑",
            "evidence": [
              "community_evidence:github | cevd_0703404b82014fe3baddd3eaab1100bd | https://github.com/heilcheng/awesome-agent-skills/issues/226 | 来源讨论提到 npm 相关条件，需在安装/试用前复核。"
            ],
            "severity": "medium",
            "suggested_check": "来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。",
            "title": "来源证据：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)",
            "user_impact": "可能影响授权、密钥配置或安全边界。"
          },
          {
            "body": "issue_or_pr_quality=unknown。",
            "category": "维护坑",
            "evidence": [
              "evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | issue_or_pr_quality=unknown"
            ],
            "severity": "low",
            "suggested_check": "抽样最近 issue/PR，判断是否长期无人处理。",
            "title": "issue/PR 响应质量未知",
            "user_impact": "用户无法判断遇到问题后是否有人维护。"
          },
          {
            "body": "release_recency=unknown。",
            "category": "维护坑",
            "evidence": [
              "evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | release_recency=unknown"
            ],
            "severity": "low",
            "suggested_check": "确认最近 release/tag 和 README 安装命令是否一致。",
            "title": "发布节奏不明确",
            "user_impact": "安装命令和文档可能落后于代码，用户踩坑概率升高。"
          }
        ],
        "source": "ProjectPitfallLog + ProjectHitPacket + validation + community signals",
        "summary": "发现 10 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：身份坑 - 仓库名和安装名不一致。",
        "title": "踩坑日志"
      },
      "snapshot": {
        "contributors": 39,
        "forks": 436,
        "license": "unknown",
        "note": "站点快照，非实时质量证明；用于开工前背景判断。",
        "stars": 4716
      },
      "source_url": "https://github.com/heilcheng/awesome-agent-skills",
      "steps": [
        {
          "body": "不安装项目，先体验能力节奏。",
          "code": "preview",
          "title": "先试 Prompt"
        },
        {
          "body": "理解输入、输出、失败模式和边界。",
          "code": "manual",
          "title": "读说明书"
        },
        {
          "body": "把上下文交给宿主 AI 继续工作。",
          "code": "context",
          "title": "带给 AI"
        },
        {
          "body": "进入主力环境前先完成安装入口与风险边界验证。",
          "code": "verify",
          "title": "沙箱验证"
        }
      ],
      "subtitle": "Tutorials, Guides and Agent Skills Directories",
      "title": "awesome-agent-skills 能力包",
      "trial_prompt": "# awesome-agent-skills - Prompt Preview\n\n> Copy the prompt below into your AI host before installing anything.\n> Its purpose is to let you safely feel the project's workflow, not to claim the project has already run.\n\n## Copy this prompt\n\n```text\nYou are using an independent Doramagic capability pack for heilcheng/awesome-agent-skills.\n\nProject:\n- Name: awesome-agent-skills\n- Repository: https://github.com/heilcheng/awesome-agent-skills\n- Summary: Tutorials, Guides and Agent Skills Directories\n- Host target: claude\n\nGoal:\nHelp me evaluate this project for the following task without installing it yet: Tutorials, Guides and Agent Skills Directories\n\nBefore taking action:\n1. Restate my task, success standard, and boundary.\n2. Identify whether the next step requires tools, browser access, network access, filesystem access, credentials, package installation, or host configuration.\n3. Use only the Doramagic Project Pack, the upstream repository, and the source-linked evidence listed below.\n4. If a real command, install step, API call, file write, or host integration is required, mark it as \"requires post-install verification\" and ask for approval first.\n5. If evidence is missing, say \"evidence is missing\" instead of filling the gap.\n\nPreviewable capabilities:\n- Capability 1: Tutorials, Guides and Agent Skills Directories\n\nCapabilities that require post-install verification:\n- Capability 1: Use the source-backed project context to guide one small, checkable workflow step.\n\nCore service flow:\n1. project-introduction: Project Introduction. Produce one small intermediate artifact and wait for confirmation.\n2. quick-start-guide: Quick Start Guide. Produce one small intermediate artifact and wait for confirmation.\n3. compatible-agents: Compatible Agents. Produce one small intermediate artifact and wait for confirmation.\n4. nextjs-structure: Next.js Website Structure. Produce one small intermediate artifact and wait for confirmation.\n5. skill-directories: Skill Directories. Produce one small intermediate artifact and wait for confirmation.\n\nSource-backed evidence to keep in mind:\n- https://github.com/heilcheng/awesome-agent-skills\n- https://github.com/heilcheng/awesome-agent-skills#readme\n- README.md\n- CONTRIBUTING.md\n- website/src/components/sections/HowItWorks.tsx\n- website/src/components/sections/CompatibleAgents.tsx\n- website/next.config.ts\n- website/tsconfig.json\n- website/src/app/layout.tsx\n- website/src/app/page.tsx\n\nFirst response rules:\n1. Start Step 1 only.\n2. Explain the one service action you will perform first.\n3. Ask exactly three questions about my target workflow, success standard, and sandbox boundary.\n4. Stop and wait for my answers.\n\nStep 1 follow-up protocol:\n- After I answer the first three questions, stay in Step 1.\n- Produce six parts only: clarified task, success standard, boundary conditions, two or three options, tradeoffs for each option, and one recommendation.\n- End by asking whether I confirm the recommendation.\n- Do not move to Step 2 until I explicitly confirm.\n\nConversation rules:\n- Advance one step at a time and wait for confirmation after each small artifact.\n- Write outputs as recommendations or planned checks, not as completed execution.\n- Do not claim tests passed, files changed, commands ran, APIs were called, or the project was installed.\n- If the user asks for execution, first provide the sandbox setup, expected output, rollback, and approval checkpoint.\n```\n",
      "voices": [
        {
          "body": "来源平台：github。github/github_issue: ⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (（https://github.com/heilcheng/awesome-agent-skills/issues/226）；github/github_issue: Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x（https://github.com/heilcheng/awesome-agent-skills/issues/218）。这些是项目级外部声音，不作为单独质量证明。",
          "items": [
            {
              "kind": "github_issue",
              "source": "github",
              "title": "⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (",
              "url": "https://github.com/heilcheng/awesome-agent-skills/issues/226"
            },
            {
              "kind": "github_issue",
              "source": "github",
              "title": "Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x",
              "url": "https://github.com/heilcheng/awesome-agent-skills/issues/218"
            }
          ],
          "status": "已收录 2 条来源",
          "title": "社区讨论"
        }
      ]
    },
    "homepage_card": {
      "category": "软件开发与交付",
      "desc": "Tutorials, Guides and Agent Skills Directories",
      "effort": "安装已验证",
      "forks": 436,
      "icon": "code",
      "name": "awesome-agent-skills 能力包",
      "risk": "需复核",
      "slug": "awesome-agent-skills",
      "stars": 4716,
      "tags": [
        "浏览器 Agent",
        "网页任务自动化",
        "浏览器自动化",
        "页面观察与动作规划",
        "评测体系"
      ],
      "thumb": "gray",
      "type": "Skill Pack"
    },
    "manual": {
      "markdown": "# https://github.com/heilcheng/awesome-agent-skills 项目说明书\n\n生成时间：2026-05-15 16:29:49 UTC\n\n## 目录\n\n- [Project Introduction](#project-introduction)\n- [Quick Start Guide](#quick-start-guide)\n- [Compatible Agents](#compatible-agents)\n- [Next.js Website Structure](#nextjs-structure)\n- [Component Architecture](#component-architecture)\n- [Skill Directories](#skill-directories)\n- [Skill Quality Standards](#skill-quality-standards)\n- [Using and Creating Skills](#using-creating-skills)\n- [Internationalization (i18n)](#internationalization)\n- [Deployment Configuration](#deployment-config)\n\n<a id='project-introduction'></a>\n\n## Project Introduction\n\n### 相关页面\n\n相关主题：[Quick Start Guide](#quick-start-guide), [Compatible Agents](#compatible-agents)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [CONTRIBUTING.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n</details>\n\n# Project Introduction\n\n## Overview\n\n**awesome-agent-skills** is a curated, community-maintained collection of AI agent skills designed to extend the capabilities of AI assistants across multiple platforms. The repository serves as a central directory where developers and users can discover, share, and deploy reusable skill packages for various AI agent implementations.\n\n资料来源：[website/index.html]()\n\n### What Are Agent Skills?\n\nAgent Skills are portable instruction files that teach AI assistants how to perform specific tasks. Think of them as **loadable expertise**: domain knowledge, team conventions, and repeatable workflows that your agent can access exactly when needed.\n\nThe skill format was originally developed by Anthropic and released as an open standard. It has since been adopted by over 30 agent products, making skills a truly cross-platform solution for extending AI capabilities.\n\n资料来源：[website/index.html]()\n\n---\n\n## Project Purpose and Scope\n\n### Primary Objectives\n\n| Objective | Description |\n|-----------|-------------|\n| **Discovery** | Provide a searchable directory of high-quality agent skills |\n| **Sharing** | Enable easy distribution of skills via GitHub repositories |\n| **Compatibility** | Support 30+ agent platforms without modification |\n| **Quality** | Establish standards for skill authorship and documentation |\n\n资料来源：[README.ko.md]()\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n### Target Audiences\n\nThe project serves three distinct user groups:\n\n1. **Complete Newcomers** — Users who simply want to add capabilities to their AI assistant by copying a GitHub URL\n2. **Teams and Enterprises** — Organizations capturing institutional knowledge in version-controlled, portable packages\n3. **Skill Authors** — Developers building reusable capabilities to deploy across multiple agents\n\n资料来源：[website/index.html]()\n\n---\n\n## Architecture Overview\n\n### Skill Package Structure\n\nEach skill is a folder containing a `SKILL.md` file with YAML frontmatter metadata and Markdown body instructions.\n\n```\nmy-skill/\n├── SKILL.md          # Required: metadata + instructions\n└── scripts/          # Optional: executable helper scripts\n    └── run.sh\n```\n\n资料来源：[website/index.html]()\n\n### Progressive Disclosure Model\n\nAgent Skills utilize a two-stage loading mechanism to maintain performance:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Discovery Phase]\n    B --> C[Load name + description<br/>~50-100 tokens per skill]\n    C --> D[Lightweight scan complete<br/>No instructions loaded]\n    D --> E[User Task Request]\n    E --> F{Task matches<br/>skill description?}\n    F -->|Yes| G[Activation Phase]\n    F -->|No| H[Standard Response]\n    G --> I[Load full SKILL.md<br/>+ scripts into context]\n    I --> J[Execute Skill Instructions]\n```\n\nThis design ensures agents remain fast while having access to extensive knowledge on demand.\n\n资料来源：[website/index.html]()\n\n---\n\n## Core Components\n\n### 1. The SKILL.md Format\n\nThe `SKILL.md` file is the fundamental building block of the agent skills ecosystem. It combines metadata (in YAML frontmatter) with instructional content (in Markdown body).\n\n#### Frontmatter Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `name` | Yes | Lowercase alphanumeric + hyphens, 1-64 characters |\n| `description` | Yes | 1-1024 characters; triggers skill activation |\n| `license` | No | License name or reference to bundled file |\n| `compatibility` | No | 1-500 characters describing requirements |\n| `allowed-tools` | No | Space-delimited list of pre-approved tools |\n| `metadata` | No | Arbitrary key-value pairs for additional info |\n\n资料来源：[website/index.html]()\n\n#### Minimal SKILL.md Example\n\n```yaml\n---\nname: roll-dice\ndescription: Roll dice using a random number generator. Use when asked to roll a die (d6, d20, etc.).\n---\n\nTo roll a die, run:\n```bash\necho $((RANDOM % <sides> + 1))\n```\n```\n\n资料来源：[website/index.html]()\n\n### 2. Complete SKILL.md Example\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py)\n- Password-protected files need scripts/unlock.py\n```\n\n资料来源：[website/index.html]()\n\n### 3. Website Directory\n\nThe [website/](https://github.com/heilcheng/awesome-agent-skills/tree/main/website) directory contains a Next.js application that provides:\n\n- Interactive skill directory with search functionality\n- SKILL.md format reference documentation\n- Quality standards guidelines\n- \"How to use skills\" tutorials\n- Compatible agents listing\n\nThe website dynamically renders skills from the repository into searchable cards for easy discovery.\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n### 4. CLI Tool Integration\n\nThe project supports the `npx skills` CLI tool (from [vercel-labs/skills](https://github.com/vercel-labs/skills)) for managing skills locally:\n\n| Command | Description |\n|---------|-------------|\n| `npx skills find [query]` | Search for relevant skills |\n| `npx skills add <owner/repo>` | Add a skill from GitHub |\n| `npx skills list` | List installed skills |\n| `npx skills check` | Check for updates |\n| `npx skills update` | Upgrade all skills |\n| `npx skills remove [name]` | Remove a skill |\n\n资料来源：[README.ko.md]()\n\n---\n\n## Compatible Agent Platforms\n\nAgent Skills is an open standard adopted by leading AI development tools. Skills created for this ecosystem work across all supported platforms without modification.\n\n| Platform | Status |\n|----------|--------|\n| Claude Code | Fully supported |\n| Claude.ai | Fully supported |\n| OpenAI Codex | Fully supported |\n| GitHub Copilot | Fully supported |\n| Cursor | Fully supported |\n| Gemini CLI | Fully supported |\n\n资料来源：[website/index.html]()\n资料来源：[README.ko.md]()\n\n---\n\n## Skill Storage Locations\n\nSkills can be placed in multiple directories depending on your agent platform:\n\n```mermaid\ngraph LR\n    A[User Home] --> B[~/.claude/skills/]\n    A --> C[~/.agents/skills/]\n    D[Project Root] --> E[.github/skills/]\n    D --> F[.agents/skills/]\n    \n    B --> G[Claude-specific]\n    C --> H[Generic agents]\n    E --> I[GitHub-integrated]\n    F --> H\n```\n\n| Location | Typical Use |\n|----------|-------------|\n| `~/.claude/skills/` | Claude Code/Claude.ai skills |\n| `~/.agents/skills/` | Generic agent tools |\n| `.github/skills/` | Repository-specific skills (Cursor, Claude Code) |\n| `.agents/skills/` | Project-local skills |\n\n资料来源：[website/index.html]()\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n---\n\n## Quality Standards\n\nThe project maintains quality standards for contributed skills:\n\n### Recommended Skill Structure\n\n| Section | Purpose |\n|---------|---------|\n| **When to use this skill** | Trigger conditions, scope, and limitations |\n| **Instructions** | Step-by-step procedure; be explicit |\n| **Gotchas** | Environment-specific facts that defy expectations |\n| **Examples** | Concrete input → output pairs |\n| **Validation** | How to verify the output is correct |\n\n### Best Practices\n\n| # | Guideline | Description |\n|---|-----------|-------------|\n| 01 | Be concrete, not conceptual | Use specific names, paths, and commands |\n| 02 | Design coherent scope | Aim for under 500 lines, under 5,000 tokens |\n| 03 | Add what agents lack | Focus on project conventions and edge cases |\n| 04 | Be prescriptive when needed | Strict for fragile or irreversible operations |\n| 05 | Make scripts agent-friendly | Non-interactive, structured output, meaningful exit codes |\n| 06 | Build validation loops | Have the agent verify its own work before returning |\n\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n资料来源：[website/index.html]()\n\n---\n\n## Workflow: Using a Skill\n\n```mermaid\nsequenceDiagram\n    participant U as User\n    participant A as AI Agent\n    participant G as GitHub\n    participant S as Skill Directory\n    \n    U->>A: Find desired skill in directory\n    U->>G: Copy skill GitHub URL\n    U->>A: Paste URL or use /skills add command\n    A->>G: Fetch SKILL.md content\n    G-->>A: Return skill file\n    A->>S: Store skill in local skills directory\n    U->>A: Request task matching skill\n    A->>S: Load skill (activation)\n    A->>U: Execute skill instructions\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n---\n\n## Contributing\n\nThe project welcomes contributions from the community. Contributors should:\n\n1. Follow the SKILL.md format specification\n2. Ensure skills work across multiple agent platforms\n3. Include clear instructions and validation steps\n4. Test skills before submitting\n\n资料来源：[CONTRIBUTING.md]()\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n---\n\n## Summary\n\n**awesome-agent-skills** is more than just a list — it's a gateway to extending AI agent capabilities through a standardized, portable, and community-driven approach. By understanding the core concepts of:\n\n- **SKILL.md format** with its YAML frontmatter and Markdown body\n- **Progressive disclosure** for performance optimization\n- **Multi-platform compatibility** across 30+ agents\n- **Quality standards** for reliable skill authorship\n\n...you can effectively leverage and contribute to this growing ecosystem of AI agent capabilities.\n\n资料来源：[website/index.html]()\n资料来源：[README.ko.md]()\n\n---\n\n<a id='quick-start-guide'></a>\n\n## Quick Start Guide\n\n### 相关页面\n\n相关主题：[Project Introduction](#project-introduction), [Using and Creating Skills](#using-creating-skills)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n</details>\n\n# Quick Start Guide\n\n## Overview\n\nThe **Agent Skill Index** is a curated collection of AI agent skills—portable instruction files that teach AI assistants how to perform specific tasks. Skills are designed as `SKILL.md` files containing YAML frontmatter and plain-English instructions that agents can load on demand.\n\nThe repository serves three primary audiences:\n\n| Audience | Use Case |\n|----------|----------|\n| **Complete newcomers** | Find a skill, copy its GitHub URL, paste it into an AI chat |\n| **Teams and enterprises** | Capture organizational knowledge in portable, version-controlled packages |\n| **Skill authors** | Build capabilities once and deploy across any skills-compatible agent |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Three-Step Workflow\n\nGetting started with Agent Skills follows a simple three-step process:\n\n```mermaid\ngraph TD\n    A[Find a Skill] --> B[Load into AI]\n    B --> C[Ask in Plain English]\n```\n\n### Step 1: Find a Skill\n\nBrowse the skills directory on the website. Skills are organized by category including development, data, automation, and security. Each card links directly to the skill on GitHub.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### Step 2: Load It Into Your AI\n\nCopy the GitHub URL and add it to your AI agent. Each platform supports different methods:\n\n| Platform | Command / Method |\n|----------|------------------|\n| **Claude Code** | `/skills add <github-url>` |\n| **Claude.ai** | Paste raw SKILL.md URL in chat |\n| **Other CLI tools** | `npx skills add anthropics/skills/docx` |\n\nAlternatively, you can manually place skill folders into supported directories:\n\n```\n.github/skills/skill-name/\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n\n### Step 3: Ask in Plain English\n\nSimply tell your AI what you want. The agent reads the skill instructions automatically and executes accordingly. No commands to memorize, no configuration required.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## SKILL.md Format\n\nEvery skill is a folder containing a `SKILL.md` file. The file uses YAML frontmatter followed by plain Markdown content.\n\n### Required Frontmatter Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `name` | Required | Lowercase alphanumeric + hyphens only, 1–64 characters, must match parent directory |\n| `description` | Required | 1–256 characters describing when to use the skill |\n\n### Optional Frontmatter Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `license` | Optional | License identifier (e.g., Apache-2.0) |\n| `compatibility` | Optional | Environment requirements |\n| `version` | Optional | Semantic version string |\n| `allowed-tools` | Optional · Experimental | Space-delimited list of pre-approved tools (e.g., `Bash(git:*) Read Write`) |\n\n### Recommended Body Structure\n\nThe Markdown body is free-form, but the documentation recommends these sections:\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### Minimal Example\n\n```yaml\n---\nname: roll-dice\ndescription: Roll dice using a random number generator. Use when asked to roll a die (d6, d20, etc.).\n---\n\nTo roll a die, run:\n```bash\necho $((RANDOM % <sides> + 1))\n```\n```\n\n### Complete Example\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py, not scripts/extract.py)\n- Password-protected PDFs need decryption first\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## How Skills Load\n\nThe system uses **progressive disclosure** for efficiency:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Lightweight Scan]\n    B --> C[Load name + description only]\n    C --> D[~50-100 tokens per skill]\n    D --> E[Task Matches Description?]\n    E -->|Yes| F[Load Full SKILL.md]\n    E -->|No| G[Stay Unloaded]\n    F --> H[Execute Instructions]\n```\n\nAt startup, agents load only the `name` and `description` of every available skill. Full instructions are loaded only when a task matches a skill's description.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Compatible Platforms\n\nAgent Skills is an open standard adopted by 30+ platforms:\n\n| Category | Platforms |\n|----------|-----------|\n| Anthropic | Claude Code, Claude.ai |\n| OpenAI | Codex |\n| Microsoft | GitHub Copilot |\n| Others | Cursor, Gemini CLI, and more |\n\nSkills you create work across all these platforms without modification.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Creating Your First Skill\n\nTo create a skill:\n\n1. **Create a folder** named after your skill (lowercase, hyphens only)\n2. **Add `SKILL.md`** inside with required frontmatter\n3. **Write instructions** in plain English below\n4. **Place the folder** in `.claude/skills/` or `.github/skills/` depending on your AI tool\n\nFor detailed guidelines, refer to the [Creating Custom Skills documentation](https://support.claude.com/en/articles/12512198-creating-custom-skills).\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Quality Standards\n\nHigh-quality skills follow these patterns:\n\n| Pattern | Example |\n|---------|---------|\n| **Good** | \"Before committing, run tests and confirm green. If tests fail, fix then re-run.\" |\n| **Bad** | Vague or incomplete instructions without validation steps |\n\nScripts within skills should be designed to be agent-friendly:\n\n- Avoid interactive prompts\n- Use structured output (JSON/CSV)\n- Write errors to stderr\n- Exit with meaningful codes\n\n资料来源：[website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n\n## Adding Optional Scripts\n\nPlace executable files in a `scripts/` subdirectory. Scripts can use PEP 723 inline dependencies:\n\n```bash\n#!/usr/bin/env -S uv run\n# /// script\n# requires-python = \">= 3.11\"\n# dependencies = [\"requests\", \"rich\"]\n# ///\nimport sys, json\nprint(json.dumps({\"result\": \"ok\"}))\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Learning Resources\n\nThe repository provides tutorials for different experience levels:\n\n| Tutorial | Platform | Description |\n|----------|----------|-------------|\n| Building your first MCP server | Model Context Protocol | Step-by-step guide to creating MCP servers |\n\nAdditional resources are available through the [Tutorials section](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx).\n\n资料来源：[website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n\n## Contributing\n\nTo contribute new skills or improve existing ones:\n\n1. Read the [Contributing Guide](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n2. Review quality standards before submission\n3. Use GitHub Discussions for questions and ideas\n\n资料来源：[website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n\n## Quick Reference\n\n| Item | Command / Path |\n|------|----------------|\n| Skills directory | `.claude/skills/` or `.github/skills/` |\n| Add via CLI | `npx skills add <github-url>` |\n| Add via Claude Code | `/skills add <github-url>` |\n| Manual path | `.github/skills/skill-name/` |\n| Required files | `SKILL.md` with `name` and `description` |\n| Optional directory | `scripts/` for executable files |\n\n资料来源：[website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n---\n\n<a id='compatible-agents'></a>\n\n## Compatible Agents\n\n### 相关页面\n\n相关主题：[Project Introduction](#project-introduction), [Skill Directories](#skill-directories)\n\n<details>\n<summary>Relevant Source Files</summary>\n\nThe following source files were used to generate this page:\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n</details>\n\n# Compatible Agents\n\nAgent Skills is an open standard that has been adopted by leading AI development tools and platforms. This document provides a comprehensive overview of the compatible agents ecosystem, explaining how skills work across different platforms, the supported agent list, and how to leverage cross-platform compatibility.\n\n## Overview\n\nAgent Skills were originally developed by Anthropic as an open standard for packaging and distributing reusable instructions for AI assistants. The format was designed with portability as a core principle — skills created for one agent platform can work seamlessly on any other platform that implements the specification.\n\nThe ecosystem now includes **30+ agent products** that support the SKILL.md format. This widespread adoption means that skill authors can write instructions once and deploy them across multiple platforms without modification, while users can share and discover skills that work with their preferred AI tools.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## How Skills Work Across Platforms\n\nThe Agent Skills system uses a lightweight discovery mechanism that enables cross-platform compatibility. At startup, agents scan configured directories and load only the `name` and `description` fields from each skill's SKILL.md file — approximately 50–100 tokens per skill. This keeps startup performance fast while allowing the agent to know what capabilities are available.\n\nWhen a user's task matches a skill's description, the agent loads the complete SKILL.md file into context, executing the instructions and using any provided scripts. This on-demand loading pattern ensures that skills are only consumed when relevant, maintaining efficient resource usage.\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Scan Skills Directories]\n    B --> C[Load name + description only]\n    C --> D[Skill Discovery Complete]\n    D --> E[User Request]\n    E --> F{Does request match skill?}\n    F -->|Yes| G[Load Full SKILL.md]\n    F -->|No| H[Process without skill]\n    G --> I[Execute Instructions]\n    H --> J[Return Response]\n    I --> J\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Supported Agent Platforms\n\nThe following table lists the major agent platforms that support the Agent Skills standard:\n\n| Platform | Documentation |\n|----------|---------------|\n| Claude Code | [code.claude.com/docs/en/skills](https://code.claude.com/docs/en/skills) |\n| Claude.ai | [support.claude.com](https://support.claude.com/en/articles/12512180-using-skills-in-claude) |\n| OpenAI Codex | [developers.openai.com](https://developers.openai.com/docs/agents) |\n| GitHub Copilot | [github.com/features/copilot](https://github.com/features/copilot) |\n| Cursor | [cursor.com](https://cursor.com) |\n| Gemini CLI | [google.github.io](https://google.github.io/gemini-cli/) |\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n### Complete Platform List\n\nThe ecosystem includes over 30 platforms that have adopted the Agent Skills standard. Based on the website documentation, the full list of supported platforms includes:\n\n| Category | Platforms |\n|----------|-----------|\n| Anthropic | Claude Code, Claude.ai |\n| OpenAI | Codex |\n| Microsoft | GitHub Copilot |\n| General AI | Cursor, Gemini CLI |\n| Development Tools | Multiple integrated development environments |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skills Installation Methods by Platform\n\nDifferent agent platforms support various methods for adding and managing skills. Understanding these installation methods is essential for effectively using the skill ecosystem.\n\n### Claude Code CLI\n\nFor Claude Code users, skills can be added directly through the command-line interface:\n\n```bash\n/claude/skills add <github-url>\n```\n\n### Claude.ai Web Interface\n\nClaude.ai users can paste the raw SKILL.md URL directly into their chat. The agent automatically detects and loads skill instructions when relevant context is provided.\n\n### Manual File Placement\n\nFor development workflows and offline scenarios, skills can be manually placed in platform-specific directories:\n\n| Platform | Directory Path |\n|----------|---------------|\n| Claude | `.claude/skills/` |\n| GitHub | `.github/skills/` |\n| General Agents | `.agents/skills/` |\n| User Home | `~/.agents/skills/` |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### npx skills CLI Tool\n\nThe `npx skills` command-line tool provides a unified interface for skill discovery, addition, and management across supported platforms:\n\n| Command | Description |\n|---------|-------------|\n| `npx skills find [query]` | Search for relevant skills |\n| `npx skills add <owner/repo>` | Add a skill from GitHub |\n| `npx skills list` | List installed skills |\n| `npx skills check` | Check for updates |\n| `npx skills update` | Update all skills |\n| `npx skills remove [skill-name]` | Remove a skill |\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\nThe tool supports multiple input formats:\n- **GitHub shorthand**: `owner/repo`\n- **Full URLs**: `https://github.com/owner/repo`\n- **Local paths**: Relative or absolute file paths\n\n## Cross-Platform Compatibility Architecture\n\nThe Agent Skills specification defines a standard format that ensures compatibility across all implementing platforms. This architecture consists of several layers:\n\n```mermaid\ngraph TD\n    A[SKILL.md File] --> B[Frontmatter Metadata]\n    A --> C[Markdown Body]\n    B --> D[name field]\n    B --> E[description field]\n    B --> F[optional fields]\n    C --> G[Instructions]\n    C --> H[Examples]\n    C --> I[Gotchas]\n    C --> J[Validation steps]\n    F --> K[license]\n    F --> L[compatibility]\n    F --> M[allowed-tools]\n```\n\n### Required Frontmatter Fields\n\nEvery SKILL.md file must include the following YAML frontmatter:\n\n| Field | Type | Description | Constraints |\n|-------|------|-------------|-------------|\n| `name` | string | Skill identifier | Lowercase alphanumeric + hyphens, 1–64 characters, must match directory name |\n| `description` | string | Human-readable description | 1–512 characters, used for skill discovery |\n\n### Optional Frontmatter Fields\n\n| Field | Description |\n|-------|-------------|\n| `license` | License identifier (e.g., Apache-2.0) |\n| `compatibility` | Platform-specific requirements or dependencies |\n| `metadata` | Custom metadata including author and version |\n| `allowed-tools` | Pre-approved tools for the skill to use |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Directory Structure\n\nAgent platforms scan specific directories to discover available skills. The standard directory structure ensures consistent behavior across all supported platforms:\n\n```\n.claude/skills/          # Claude Code and Claude.ai\n.github/skills/          # GitHub-integrated agents\n.agents/skills/          # General agent platforms\n~/.agents/skills/        # User-level skills (user home directory)\n```\n\nWithin each skills directory, skills are organized in subdirectories with the following structure:\n\n```\n<skill-name>/\n└── SKILL.md            # Required: Contains frontmatter + instructions\nscripts/                # Optional: Executable scripts the skill can run\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Platform-Specific Considerations\n\n### Claude Code\n\nClaude Code provides native support for skills through the `/skills` command:\n\n```bash\n/claude/skills add <github-url>\n```\n\nSkills installed via Claude Code are automatically scanned at startup and loaded when relevant.\n\n### Claude.ai Web\n\nClaude.ai users can utilize skills by:\n1. Copying a skill's GitHub URL\n2. Pasting the raw SKILL.md URL into the chat\n\nThe web interface automatically detects skill format and applies instructions as needed.\n\n### Third-Party Platforms\n\nFor platforms like Codex, Copilot, Cursor, and Gemini CLI, the specific skill loading mechanisms may vary. Users should consult individual platform documentation for detailed instructions on skill installation and usage.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Discovery and Management\n\nThe skill ecosystem supports multiple discovery mechanisms to help users find relevant skills:\n\n### Direct URL Addition\n\nUsers can directly add skills by providing GitHub repository URLs or shorthand notation. The agent resolves the URL, fetches the SKILL.md file, and installs it in the appropriate skills directory.\n\n### CLI-Based Discovery\n\nThe `npx skills find [query]` command enables keyword-based search across registered skills. This is particularly useful for discovering skills that address specific use cases or domains.\n\n### Manual Installation\n\nFor offline environments or custom workflows, users can manually download skill folders and place them in the appropriate directory:\n\n```bash\n# Example: Manual skill installation\ncp -r /path/to/downloaded-skill \\\n  ~/.agents/skills/my-skill-name\n```\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n## Verification and Validation\n\nThe Agent Skills ecosystem includes validation mechanisms to ensure skill quality and compatibility:\n\n| Validation Type | Purpose |\n|-----------------|---------|\n| Directory structure check | Verify SKILL.md exists in expected location |\n| Frontmatter validation | Ensure required fields are present and valid |\n| Update checking | `npx skills check` verifies skill versions |\n\nUsers can verify that a skill is correctly installed by checking for the presence of its SKILL.md file:\n\n```bash\nls ~/.agents/skills/my-skill/SKILL.md\n```\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n## Related Resources\n\nFor more information about compatible agents and the Agent Skills ecosystem, refer to:\n\n- [Official Specification](https://agentskills.io/specification) — Complete SKILL.md format specification\n- [Creating Skills Guide](https://support.claude.com/en/articles/12512198-creating-custom-skills) — Tutorial for skill authors\n- [Using Skills in Claude](https://support.claude.com/en/articles/12512180-using-skills-in-claude) — Claude.ai user guide\n\n---\n\n<a id='nextjs-structure'></a>\n\n## Next.js Website Structure\n\n### 相关页面\n\n相关主题：[Component Architecture](#component-architecture), [Deployment Configuration](#deployment-config)\n\n<details>\n<summary>Related Source Files</summary>\n\nThe following source files were used to generate this documentation:\n\n- [website/src/lib/i18n.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/lib/i18n.tsx)\n- [website/src/components/sections/HowItWorks.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/HowItWorks.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/sections/CompatibleAgents.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/CompatibleAgents.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n</details>\n\n# Next.js Website Structure\n\n## Overview\n\nThe `awesome-agent-skills` repository includes a Next.js-based website (`/website`) that serves as the public-facing documentation and showcase for agent skills. This web application is built using Next.js 14+ with the App Router paradigm, TypeScript for type safety, and Tailwind CSS for styling. The site provides an interactive interface for exploring agent skills, understanding how they work, and navigating through comprehensive documentation.\n\nThe website architecture follows a component-based modular design where reusable UI sections are organized in `/src/components/sections/`, while shared utilities like internationalization (i18n) live in `/src/lib/`. The application uses the Next.js App Router for routing and leverages server-side rendering capabilities for optimal performance and SEO. 资料来源：[website/src/lib/i18n.tsx]()\n\n## Project Architecture\n\n### Directory Structure\n\nThe website follows a standard Next.js App Router structure:\n\n```\nwebsite/\n├── src/\n│   ├── app/                    # App Router pages and layouts\n│   ├── components/            # Reusable React components\n│   │   ├── sections/          # Page section components\n│   │   ├── Footer.tsx         # Global footer component\n│   │   └── WikiSidebar.tsx    # Navigation sidebar\n│   └── lib/                   # Utility functions\n│       └── i18n.tsx           # Internationalization setup\n├── public/                    # Static assets\n├── next.config.ts             # Next.js configuration\n└── tsconfig.json              # TypeScript configuration\n```\n\n### Technology Stack\n\n| Technology | Purpose | Version |\n|------------|---------|---------|\n| Next.js | React framework with App Router | 14+ |\n| TypeScript | Type-safe JavaScript | Latest |\n| Tailwind CSS | Utility-first CSS framework | Latest |\n| framer-motion | Animation library for React | Latest |\n\nThe project utilizes CSS variables for theming, supporting both light and dark modes through Tailwind's dark mode variants. The application uses `next/font` for automatic font optimization, loading Geist font family for consistent typography across the site. 资料来源：[website/README.md]()\n\n## Component Architecture\n\n### Section Components\n\nThe website is composed of modular section components located in `/src/components/sections/`. Each section represents a distinct portion of the page content:\n\n| Component | Purpose | Key Features |\n|-----------|---------|---------------|\n| `HowItWorks.tsx` | Explains the three-step process | Grid layout with step cards |\n| `QualityStandards.tsx` | Defines skill quality criteria | Good vs bad pattern comparison |\n| `CompatibleAgents.tsx` | Lists supported agent platforms | Responsive table layout |\n| `FindingSkills.tsx` | Guides on discovering skills | CLI commands display |\n| `UsingSkills.tsx` | Demonstrates skill usage | Copy-enabled code panels |\n| `SkillDirectory.tsx` | Interactive skills catalog | Animated filtering grid |\n| `CreatingSkills.tsx` | SKILL.md creation guide | Blueprint documentation |\n| `Tutorials.tsx` | Learning resources | Card-based layout |\n| `Contributing.tsx` | Contribution guidelines | CTA buttons and links |\n\n#### Section Component Pattern\n\nEach section component follows a consistent pattern using the `\"use client\"` directive for client-side interactivity:\n\n```typescript\n\"use client\";\n\nimport { useTranslations } from \"@/lib/i18n\";\n\nexport default function SectionName() {\n  const t = useTranslations();\n  \n  return (\n    <section id=\"section-id\" className=\"scroll-mt-20 py-16 border-b ...\">\n      <h2 className=\"...\">{t.section.title}</h2>\n      {/* Section content */}\n    </section>\n  );\n}\n```\n\n资料来源：[website/src/components/sections/HowItWorks.tsx]()\n\n### Navigation Components\n\n#### WikiSidebar.tsx\n\nThe `WikiSidebar` component provides hierarchical navigation within the documentation. It renders a collapsible sidebar with grouped navigation items and supports visual indicators for new content.\n\nKey features include:\n- Hierarchical category grouping\n- \"New\" badge support for recent additions\n- External link indicators\n- Dark mode compatible styling\n- Animated transitions using framer-motion\n\nThe sidebar fetches navigation data from the i18n configuration and renders links with appropriate styling based on their type (internal or external). 资料来源：[website/src/components/WikiSidebar.tsx]()\n\n#### Footer.tsx\n\nThe global footer component provides site-wide information and external links:\n\n- Site branding and copyright information\n- Social media links (GitHub, X/Twitter)\n- Contact email link\n- BibTeX citation format for academic references\n- Call-to-action buttons for main resources\n\n```typescript\nexport default function Footer() {\n  return (\n    <footer className=\"...\">\n      {/* BibTeX citation block */}\n      {/* Social links: GitHub, Twitter, Email */}\n      {/* External resource buttons */}\n    </footer>\n  );\n}\n```\n\n资料来源：[website/src/components/Footer.tsx]()\n\n## Internationalization (i18n)\n\n### i18n Implementation\n\nThe website implements internationalization using a custom i18n solution defined in `/src/lib/i18n.tsx`. The system provides translations for multiple languages including English, Japanese, and presumably Chinese based on the repository's focus.\n\n#### Translation Structure\n\nTranslations are organized hierarchically:\n\n```typescript\nexport const translations = {\n  nav: {\n    title: \"Navigation\",\n    items: [\"Skills\", \"Directory\", \"Standards\", \"Guide\", \"Trends\", \"FAQ\"]\n  },\n  resources: {\n    title: \"Resources\",\n    items: [\n      { label: \"agent-skill.co\", href: \"https://agent-skill.co\" },\n      { label: \"GitHub Repository\", href: \"...\" }\n    ]\n  },\n  how: {\n    title: \"How it works\",\n    subtitle: \"...\",\n    steps: [\n      { step: \"01\", title: \"...\", desc: \"...\" }\n    ]\n  }\n  // Additional translation keys...\n};\n```\n\n#### Translation Hook\n\nComponents access translations through the `useTranslations()` hook:\n\n```typescript\nconst t = useTranslations();\n// Access nested properties\nt.nav.title        // Returns \"Navigation\"\nt.how.steps        // Returns array of step objects\n```\n\n资料来源：[website/src/lib/i18n.tsx]()\n\n### Supported Languages\n\nBased on the i18n file content, the website supports:\n\n| Language | Key Indicators |\n|----------|----------------|\n| English | Default language |\n| Japanese | `ナビゲーション`, `引用` labels |\n| Chinese (implied) | Repository focus on Chinese-speaking developers |\n\n## Styling and Theming\n\n### Tailwind CSS Integration\n\nThe website uses Tailwind CSS with the following configuration:\n\n- Dark mode support via `dark:` class variants\n- Custom color palette using neutral grays\n- Responsive design breakpoints (md, lg)\n- Custom scroll margin for anchor navigation (`scroll-mt-20`)\n\n### Color System\n\nThe styling uses a neutral color system defined through Tailwind classes:\n\n| Element | Light Mode | Dark Mode |\n|---------|------------|-----------|\n| Background | `white` | `neutral-900` |\n| Text Primary | `neutral-900` | `white` |\n| Text Secondary | `neutral-500` | `neutral-400` |\n| Borders | `neutral-200` | `neutral-800` |\n\n### Component Styling Patterns\n\n#### Card Components\n\nSection cards use consistent styling patterns:\n\n```typescript\n<div className=\"p-6 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900\">\n  <h3 className=\"text-base font-semibold ...\">{title}</h3>\n  <p className=\"text-sm text-neutral-500 ...\">{description}</p>\n</div>\n```\n\n#### Table Components\n\nData tables follow a consistent structure:\n\n```typescript\n<table className=\"w-full text-sm\">\n  <thead>\n    <tr className=\"bg-neutral-50 dark:bg-neutral-800 border-b ...\">\n      <th className=\"text-left px-5 py-3 text-xs ...\">Column</th>\n    </tr>\n  </thead>\n  <tbody className=\"divide-y divide-neutral-100 ...\">\n    {/* Rows */}\n  </tbody>\n</table>\n```\n\n资料来源：[website/src/components/sections/QualityStandards.tsx](), [website/src/components/sections/CompatibleAgents.tsx]()\n\n## Page Sections and Content Flow\n\n### Main Page Structure\n\nThe primary page (`/app/page.tsx`) renders sections in a specific order:\n\n```mermaid\ngraph TD\n    A[Hero Section] --> B[How It Works]\n    B --> C[Quality Standards]\n    C --> D[Compatible Agents]\n    D --> E[Finding Skills]\n    E --> F[Using Skills]\n    F --> G[Creating Skills]\n    G --> H[Skill Directory]\n    H --> I[Tutorials]\n    I --> J[Contributing]\n    J --> K[FAQ]\n    K --> L[Footer]\n```\n\n### Section Details\n\n#### How It Works Section\n\nExplains the three-step process for agent skills:\n\n1. **Find** - Discover skills in the directory\n2. **Add** - Add skills to your AI tool\n3. **Use** - Agent automatically applies the skill\n\nEach step is displayed in a card with a large step number, title, and description. 资料来源：[website/src/components/sections/HowItWorks.tsx]()\n\n#### Quality Standards Section\n\nDefines what makes a good agent skill:\n\n- **Good vs Bad Pattern Comparison**: Side-by-side code examples\n- **Pattern Validation**: Shows recommended vs discouraged practices\n- **Icon Indicators**: CheckCircle2 for good, XCircle for bad\n\n```typescript\n// Good pattern\n<p className=\"text-xs font-mono text-neutral-600 ...\">\n  {t.quality.goodPattern}\n</p>\n\n// Bad pattern  \n<p className=\"text-xs font-mono text-neutral-400 ... opacity-70\">\n  {t.quality.badPattern}\n</p>\n```\n\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n#### Skill Directory Section\n\nThe interactive skills catalog features:\n\n- **Framer Motion Integration**: Animated grid with layout animations\n- **Filtering**: Client-side filtering by skill category\n- **Card Design**: Each skill displays name, icon, and external link\n- **Responsive Grid**: `grid-cols-1 md:grid-cols-2` for mobile to desktop\n\n```typescript\n<motion.div layout className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n  <AnimatePresence mode=\"popLayout\">\n    {filtered.map((skill) => (\n      <motion.a\n        layout\n        key={skill.id}\n        initial={{ opacity: 0, scale: 0.98 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.98 }}\n        transition={{ duration: 0.15 }}\n      >\n        {/* Skill card content */}\n      </motion.a>\n    ))}\n  </AnimatePresence>\n</motion.div>\n```\n\n资料来源：[website/src/components/sections/SkillDirectory.tsx]()\n\n## Interactive Features\n\n### Code Copy Functionality\n\nThe `UsingSkills.tsx` component includes copy-to-clipboard functionality:\n\n```typescript\nconst [copied, setCopied] = useState(false);\n\nconst copyCode = async () => {\n  await navigator.clipboard.writeText(code);\n  setCopied(true);\n  setTimeout(() => setCopied(false), 2000);\n};\n\nreturn (\n  <button onClick={copyCode}>\n    {copied ? <Check className=\"...\" /> : <Copy className=\"...\" />}\n  </button>\n);\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n### Active Navigation Highlighting\n\nThe website implements scroll-based active navigation using the Intersection Observer API:\n\n```typescript\nconst navLinks = document.querySelectorAll('.nav-link');\nconst sections = ['newcomer', 'tutorial', 'reference', 'dir-section', 'agents', 'resources'];\n\nconst observer = new IntersectionObserver(entries => {\n  for (const e of entries) {\n    if (e.isIntersecting) {\n      const id = e.target.id;\n      navLinks.forEach(l => {\n        l.classList.toggle('active', l.getAttribute('href') === `#${id}`);\n      });\n    }\n  }\n}, { threshold: 0.2, rootMargin: '-52px 0px 0px 0px' });\n```\n\nThis provides visual feedback as users scroll through different page sections. 资料来源：[website/index.html]()\n\n## Build and Deployment\n\n### Development Workflow\n\n```bash\nnpm run dev    # Start development server\nyarn dev       # Alternative with Yarn\npnpm dev       # Alternative with pnpm\nbun dev        # Alternative with Bun\n```\n\n### Font Optimization\n\nThe project uses `next/font` for automatic font optimization:\n\n```typescript\n// In layout.tsx\nimport { Geist } from \"next/font/google\";\n\n// Font configuration is handled automatically\n```\n\nThis loads the Geist font family and optimizes it for performance, reducing layout shift during page loads.\n\n### Production Build\n\nThe Next.js application can be deployed to Vercel or any Node.js-compatible hosting platform. The standard build process:\n\n```bash\nnpm run build   # Create production build\nnpm start       # Start production server\n```\n\n资料来源：[website/README.md]()\n\n## Summary\n\nThe Next.js website structure for `awesome-agent-skills` demonstrates a well-organized, component-based architecture suitable for documentation and showcase sites. Key architectural decisions include:\n\n- **Modular Sections**: Each page section is a self-contained component\n- **i18n System**: Custom translation hook with hierarchical structure\n- **Theming**: Dark mode support through Tailwind CSS\n- **Animations**: Framer Motion for smooth transitions\n- **Accessibility**: Semantic HTML with proper ARIA attributes\n- **Performance**: Next.js App Router with automatic font optimization\n\nThe architecture prioritizes maintainability and extensibility, making it straightforward to add new sections or modify existing ones. The separation of concerns between presentation components and utility functions (i18n) ensures clean code organization as the project scales.\n\n---\n\n<a id='component-architecture'></a>\n\n## Component Architecture\n\n### 相关页面\n\n相关主题：[Next.js Website Structure](#nextjs-structure), [Internationalization (i18n)](#internationalization)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n- [website/src/components/Navbar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/sections/SkillDirectory.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/SkillDirectory.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/CreatingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/CreatingSkills.tsx)\n- [website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/FindingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/FindingSkills.tsx)\n- [website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n</details>\n\n# Component Architecture\n\n## Overview\n\nThe awesome-agent-skills website is a Next.js-based documentation and showcase platform built with React and TypeScript. The component architecture follows a modular, section-driven design pattern where reusable UI components are composed into distinct page sections. The project uses Tailwind CSS for styling with dark mode support and framer-motion for animations. 资料来源：[website/src/components/sections/SkillDirectory.tsx:1-50]()\n\n## Directory Structure\n\n```\nwebsite/src/components/\n├── LayoutShell.tsx        # Main layout wrapper\n├── Navbar.tsx             # Top navigation bar\n├── Footer.tsx             # Page footer\n├── WikiSidebar.tsx        # Documentation sidebar navigation\n└── sections/\n    ├── Hero.tsx            # Hero banner section\n    ├── WhatIsIt.tsx        # Project introduction\n    ├── SkillDirectory.tsx # Skills catalog grid\n    ├── UsingSkills.tsx     # Usage instructions\n    ├── CreatingSkills.tsx  # Skill creation guide\n    ├── FindingSkills.tsx   # Skill discovery resources\n    ├── QualityStandards.tsx # Good vs bad patterns\n    ├── Tutorials.tsx        # Interactive tutorials\n    └── Contributing.tsx    # Contribution guide\n```\n\n## Component Hierarchy\n\n```mermaid\ngraph TD\n    A[LayoutShell] --> B[Navbar]\n    A --> C[WikiSidebar]\n    A --> D[Section Components]\n    A --> E[Footer]\n    \n    D --> D1[WhatIsIt]\n    D --> D2[SkillDirectory]\n    D --> D3[UsingSkills]\n    D --> D4[CreatingSkills]\n    D --> D5[FindingSkills]\n    D --> D6[QualityStandards]\n    D --> D7[Tutorials]\n    D --> D8[Contributing]\n    \n    B --> B1[LanguageSelector]\n    B --> B2[ThemeToggle]\n    B --> B3[GitHubStars]\n```\n\n## Core Layout Components\n\n### LayoutShell\n\nThe `LayoutShell` component serves as the main application wrapper that orchestrates all other components. It integrates the `Navbar`, `WikiSidebar`, page sections, and `Footer` into a cohesive layout structure.\n\n### Navbar\n\nThe `Navbar` component provides top-level navigation and global controls. Key features include:\n\n| Feature | Implementation |\n|---------|----------------|\n| GitHub Stars Display | Parses and formats star count (e.g., \"1.2k\") |\n| Language Selector | Dropdown with flag icons using `LANGUAGES` array |\n| Theme Toggle | Dark/light mode switching |\n\n资料来源：[website/src/components/Navbar.tsx:1-40]()\n\nThe language selector uses framer-motion for smooth dropdown animations with the following states:\n\n```typescript\n{langOpen && (\n  <motion.div\n    initial={{ opacity: 0, y: -4, scale: 0.97 }}\n    animate={{ opacity: 1, y: 0, scale: 1 }}\n    exit={{ opacity: 0, y: -4, scale: 0.97 }}\n    transition={{ duration: 0.15 }}\n    className=\"absolute right-0 top-10 w-44...\"\n  >\n    {LANGUAGES.map((l) => (...))}\n  </motion.div>\n)}\n```\n\n### WikiSidebar\n\nThe `WikiSidebar` component provides documentation navigation with hierarchical menu items. It supports:\n\n- Collapsible menu sections with `AnimatePresence`\n- \"New\" badge indicators using the `Sparkles` icon for newly added items\n- External links to agent-skill.co and GitHub repository\n- Smooth fade animations for menu state changes\n\n资料来源：[website/src/components/WikiSidebar.tsx:1-60]()\n\n### Footer\n\nThe `Footer` component displays project metadata and social links:\n\n```typescript\n<a href=\"https://agent-skill.co\" ...>agent-skill.co</a>\n<a href=\"https://github.com/heilcheng/awesome-agent-skills\" ...><Github /></a>\n<a href=\"https://x.com/haileyhmt\" ...><Twitter /></a>\n<a href=\"mailto:haileycheng@proton.me\" ...><Mail /></a>\n```\n\nIncludes BibTeX citation format for academic references. 资料来源：[website/src/components/Footer.tsx:1-30]()\n\n## Section Components\n\n### WhatIsIt\n\nIntroduces the project concept using icon-based cards. Each card displays a title, description, and corresponding icon in a responsive grid layout.\n\n### SkillDirectory\n\nThe `SkillDirectory` component renders a filterable grid of skills with the following structure:\n\n| Element | Purpose |\n|---------|---------|\n| Search/Filter Bar | Filter skills by name or category |\n| Motion Grid | Animated grid using `framer-motion` layout |\n| Skill Cards | Each card shows icon, name, and description |\n\n```typescript\n<motion.a\n  layout\n  key={skill.id}\n  href={`https://github.com/heilcheng/awesome-agent-skills`}\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n  className=\"group flex items-start gap-4 p-4 border...\"\n>\n  <div className=\"p-2 rounded-lg bg-neutral-100 dark:bg-neutral-800\">\n    <skill.Icon className=\"w-4 h-4\" />\n  </div>\n  <div className=\"flex-1 min-w-0\">\n    <h3 className=\"text-sm font-semibold\">{skill.name}</h3>\n    <p className=\"text-xs text-neutral-500\">{skill.description}</p>\n  </div>\n  <ExternalLink className=\"w-3.5 h-3.5\" />\n</motion.a>\n```\n\n资料来源：[website/src/components/sections/SkillDirectory.tsx:1-50]()\n\n### UsingSkills\n\nDemonstrates how to add skills to an agent with code examples:\n\n| Panel Type | Description |\n|------------|-------------|\n| CLI | Shows `npx skills add` command |\n| Manual Drop-in | Shows `.github/skills/skill-name/` path |\n\nIncludes a copy-to-clipboard button that uses `Check` and `Copy` icons from Lucide React. 资料来源：[website/src/components/sections/UsingSkills.tsx:1-40]()\n\n### CreatingSkills\n\nDisplays the `SKILL.md` blueprint structure for creating new skills. Shows section-by-section breakdown with descriptions in a card format.\n\n```typescript\n{t.creating.blueprint.map((section, i) => (\n  <div key={i} className=\"px-4 py-3\">\n    <div className=\"text-xs font-mono font-bold\">{section.section}</div>\n    <p className=\"text-xs text-neutral-500 italic\">{section.desc}</p>\n  </div>\n))}\n```\n\n资料来源：[website/src/components/sections/CreatingSkills.tsx:1-30]()\n\n### QualityStandards\n\nShows good vs bad code patterns side-by-side with visual indicators:\n\n| Pattern Type | Visual Treatment |\n|--------------|------------------|\n| Good | Green `CheckCircle2` icon, full opacity |\n| Bad | Gray `XCircle` icon, 70% opacity |\n\nUses dark mode compatible styling with Tailwind's `dark:` modifier. 资料来源：[website/src/components/sections/QualityStandards.tsx:1-50]()\n\n### FindingSkills\n\nLists external resources for discovering agent skills including marketplaces and CLI commands:\n\n```typescript\n{cliCommands.map(({ cmd, desc }) => (\n  <div className=\"flex items-center gap-4 px-4 py-2.5...\">\n    <code className=\"text-xs font-mono text-neutral-700\">{cmd}</code>\n    <span className=\"text-xs text-neutral-400\">{desc}</span>\n  </div>\n))}\n```\n\nSupports conditional image rendering for marketplace and leaderboard sections. 资料来源：[website/src/components/sections/FindingSkills.tsx:1-40]()\n\n### Tutorials\n\nImplements chat-style tutorial dialogues with:\n\n- Character avatars (emoji-based)\n- Quest/step indicators with icons\n- External links to documentation resources\n\nUses `ArrowUpRight` icon for external link indicators. 资料来源：[website/src/components/sections/Tutorials.tsx:1-50]()\n\n### Contributing\n\nSimple section with call-to-action buttons linking to:\n\n- Contributing Guide (`/CONTRIBUTING.md`)\n- GitHub Repository\n\n资料来源：[website/src/components/sections/Contributing.tsx:1-30]()\n\n## Data Flow Architecture\n\n```mermaid\ngraph LR\n    A[i18n Translations] --> B[Section Components]\n    C[Props/State] --> D[UI Rendering]\n    B --> D\n    E[External APIs] --> F[SkillDirectory Data]\n    F --> D\n```\n\n## Animation Strategy\n\nThe project uses framer-motion consistently across components:\n\n| Animation | Usage |\n|-----------|-------|\n| `motion.div` | Fade and scale transitions |\n| `AnimatePresence` | Conditional rendering with exit animations |\n| `layout` prop | Automatic grid reordering |\n\nExample from SkillDirectory:\n\n```typescript\n<motion.a\n  initial={{ opacity: 0, scale: 0.98 }}\n  animate={{ opacity: 1, scale: 1 }}\n  exit={{ opacity: 0, scale: 0.98 }}\n  transition={{ duration: 0.15 }}\n>\n```\n\n## Dark Mode Support\n\nAll components implement dark mode using Tailwind's `dark:` modifier:\n\n| Element | Light Mode | Dark Mode |\n|---------|------------|-----------|\n| Background | `bg-white` | `dark:bg-neutral-900` |\n| Border | `border-neutral-200` | `dark:border-neutral-800` |\n| Text | `text-neutral-700` | `dark:text-neutral-300` |\n\n## Dependencies\n\nKey external dependencies for the component architecture:\n\n| Package | Purpose |\n|---------|---------|\n| `framer-motion` | Animation and layout transitions |\n| `lucide-react` | Icon library |\n| `next` | React framework |\n\n## State Management Pattern\n\nComponents receive data via props and manage local state using React hooks. No global state management library is used; instead, props drilling and localized state is preferred for simplicity.\n\n---\n\n<a id='skill-directories'></a>\n\n## Skill Directories\n\n### 相关页面\n\n相关主题：[Compatible Agents](#compatible-agents), [Skill Quality Standards](#skill-quality-standards)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/src/components/sections/SkillDirectory.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/SkillDirectory.tsx)\n</details>\n\n# Skill Directories\n\n## Overview\n\nA **Skill Directory** is the organizational structure that stores, categorizes, and makes AI agent skills discoverable. This repository serves as a curated collection of reusable skills compatible with 30+ agent platforms including Claude Code, Claude.ai, OpenAI Codex, GitHub Copilot, Cursor, and more.\n\nThe directory enables:\n\n- **Discovery**: Browse and search skills by category\n- **Installation**: Copy skills directly into your agent's skill folder\n- **Portability**: Skills work across different agents without modification\n- **Version Control**: Track changes and contributions via Git\n\n资料来源：[website/index.html:1-50]()\n\n## Directory Structure\n\nSkills in this repository follow a standardized folder structure. Each skill is contained within its own directory containing a mandatory `SKILL.md` file.\n\n```\nawesome-agent-skills/\n├── .claude/skills/          # Skills compatible with Claude Code\n├── .github/skills/          # Skills compatible with GitHub-based agents\n└── website/\n    └── src/components/\n        └── sections/\n            └── SkillDirectory.tsx  # Frontend component for browsing\n```\n\n### Skill Package Structure\n\n```\nmy-skill/\n├── SKILL.md           # Required: skill metadata and instructions\n├── LICENSE            # Optional: license file\n└── scripts/           # Optional: executable helper scripts\n    └── *.py\n    └── *.sh\n```\n\n资料来源：[website/index.html:85-120]()\n\n## SKILL.md Format Specification\n\nEvery skill must contain a `SKILL.md` file with YAML frontmatter. Only `name` and `description` are required.\n\n### Required Fields\n\n| Field | Type | Constraints | Description |\n|-------|------|-------------|-------------|\n| `name` | string | 1-64 chars, lowercase alphanumeric + hyphens | Must match parent directory name. No consecutive hyphens or leading/trailing hyphens. |\n| `description` | string | 1-1024 chars | Most important field. Describes what the skill does AND when to activate it. Include specific keywords agents would encounter. |\n\n### Optional Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `license` | string | License name (e.g., \"MIT\", \"Apache-2.0\") or reference to bundled LICENSE file |\n| `compatibility` | string | 1-500 chars describing environment requirements (e.g., \"Requires Python 3.11+ and uv\") |\n| `metadata` | object | Author, version, and other metadata |\n| `allowed-tools` | string | Space-delimited list of pre-approved tools (experimental, support varies) |\n\n资料来源：[website/index.html:180-220]()\n\n### Example SKILL.md\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py, not scripts/extract.py)\n- Password-protected PDFs need decryption first\n```\n\n资料来源：[website/index.html:220-260]()\n\n## Progressive Disclosure Architecture\n\nSkills implement a two-phase loading strategy to optimize performance:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Lightweight Scan]\n    B --> C[Load name + description<br/>~50-100 tokens per skill]\n    C --> D[Agent Receives User Task]\n    D --> E{Match skill description?}\n    E -->|Yes| F[Load Full SKILL.md]\n    E -->|No| G[Execute without skill]\n    F --> H[Execute with skill context]\n    G --> H\n    \n    style B fill:#e1f5fe\n    style F fill:#fff3e0\n```\n\n### Discovery Phase\n\nAt startup, the agent scans configured skill directories and loads only the `name` and `description` fields (~50-100 tokens per skill). Full instructions are not loaded yet.\n\nSupported directory locations:\n\n| Platform | Default Location |\n|----------|-----------------|\n| Claude Code | `~/.claude/skills/` |\n| Claude.ai | Imported via URL paste |\n| Generic | `~/.agents/skills/` |\n| Project-level | `.agents/skills/` |\n\n资料来源：[website/index.html:280-310]()\n\n### Activation Phase\n\nWhen a user's task matches a skill's description, the agent reads the full `SKILL.md` into context. This is when instructions, examples, and scripts are loaded and executed.\n\n## Installation Methods\n\n### Method 1: Direct Folder Placement\n\nCopy the skill folder into the agent's skills directory:\n\n```bash\n# For Claude Code\ncp -r my-downloaded-skill ~/.claude/skills/my-skill\n\n# Verify structure\nls ~/.claude/skills/my-skill/SKILL.md\n```\n\n### Method 2: CLI Tool\n\nUse the `npx skills` command-line tool for quick installation:\n\n```bash\nnpx skills add <owner/repo>        # Add via GitHub shorthand\nnpx skills add https://github.com/owner/repo  # Full URL\nnpx skills add /path/to/local-skill  # Local path\n\nnpx skills list                    # List installed skills\nnpx skills check                   # Check for updates\nnpx skills update                  # Update all skills\nnpx skills remove [skill-name]     # Remove a skill\n```\n\n资料来源：[README.ko.md:45-60]()\n\n### Method 3: IDE Drop-In\n\nModern IDEs like Cursor and Claude Code automatically detect new folders in `.github/skills/`:\n\n```bash\n# Drop folder directly into skills directory\ncp -r my-downloaded-skill .github/skills/my-skill\n```\n\nThe IDE detects new knowledge instantly without requiring a restart.\n\n资料来源：[website/src/components/sections/UsingSkills.tsx:1-30]()\n\n## Skill Loading Workflow\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant Agent\n    participant SkillFS as Skill Directory\n    participant SkillMD as SKILL.md\n    \n    User->>Agent: Request task\n    Agent->>SkillFS: Scan skills at startup\n    SkillFS-->>Agent: Return metadata (name, description)\n    User->>Agent: Specific task\n    Agent->>SkillMD: Load matching skill\n    SkillMD-->>Agent: Full instructions + scripts\n    Agent->>Agent: Execute with skill context\n    Agent-->>User: Task result\n```\n\n## Quality Standards\n\nHigh-quality skills follow these guidelines:\n\n| Aspect | Recommendation |\n|--------|----------------|\n| **Scope** | Under 500 lines, under 5,000 tokens. Split larger skills into referenced files. |\n| **Instructions** | Focus on project conventions, domain-specific procedures, edge cases. Omit general knowledge the agent already has. |\n| **Activation** | Write descriptive `description` field with specific keywords agents would encounter. |\n| **Examples** | Include concrete input → output pairs in the Examples section. |\n| **Validation** | Document how to verify the output is correct. |\n| **Gotchas** | Add a Gotchas section for environment-specific facts that defy expectations. |\n\n资料来源：[website/src/components/sections/QualityStandards.tsx:1-50]()\n\n### Recommended Body Structure\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n资料来源：[website/index.html:150-175]()\n\n## Compatible Agents\n\nThe skill format is an open standard adopted by 30+ platforms:\n\n| Agent | Documentation |\n|-------|---------------|\n| Claude Code | code.claude.com/docs/en/skills |\n| Claude.ai | support.claude.com |\n| OpenAI Codex | developers.openai.com/codex |\n| GitHub Copilot | docs.github.com/copilot |\n| Cursor | cursor.com |\n| Gemini CLI | (official docs) |\n\n资料来源：[website/index.html:320-340]()\n\n## Skill Directory Component\n\nThe `SkillDirectory.tsx` component renders the interactive skill browser on the website:\n\n```typescript\n// website/src/components/sections/SkillDirectory.tsx\n// Renders skill cards with search, filtering, and category organization\n```\n\nKey features include:\n\n- **Search**: Filter skills by name or keyword\n- **Categories**: Skills organized by domain (development, data, automation, security, etc.)\n- **Direct Links**: Each card links directly to the skill's GitHub repository\n\n## Creating Your Own Skill\n\n1. **Create folder**: Name it with lowercase alphanumeric + hyphens only\n2. **Add SKILL.md**: Include required `name` and `description` frontmatter\n3. **Write instructions**: Structure with When to use, Instructions, Gotchas sections\n4. **Add scripts (optional)**: Place executables in `scripts/` subdirectory\n5. **Test**: Load into your agent and verify behavior\n\n```bash\nmkdir my-first-skill\ncd my-first-skill\ncat > SKILL.md << 'EOF'\n---\nname: my-first-skill\ndescription: Use when you need to [specific task]. Activates for [keywords].\n---\n\n## When to use this skill\n\n## Instructions\n\n1. First, do this.\n2. Then, do that.\n\n## Gotchas\n\n- Important note about edge case\nEOF\n```\n\n资料来源：[website/index.html:30-50]()\n\n## Summary\n\nSkill Directories provide a portable, version-controlled mechanism for packaging AI agent capabilities. By standardizing on the `SKILL.md` format with YAML frontmatter and Markdown instructions, skills remain agent-agnostic while enabling:\n\n- Zero-infrastructure deployment\n- Cross-platform compatibility\n- Progressive disclosure for performance\n- Community sharing via Git\n\n---\n\n<a id='skill-quality-standards'></a>\n\n## Skill Quality Standards\n\n### 相关页面\n\n相关主题：[Skill Directories](#skill-directories), [Using and Creating Skills](#using-creating-skills)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n</details>\n\n# Skill Quality Standards\n\n## Overview\n\nSkill Quality Standards define the criteria and best practices for creating effective, reliable, and maintainable Agent Skills within the awesome-agent-skills ecosystem. These standards ensure that skills are consistently structured, easily discoverable, and capable of delivering predictable behavior across different AI agents and platforms.\n\nThe quality framework establishes what constitutes a \"good\" skill versus a poorly constructed one, providing authors with clear guidelines for implementation. This system helps maintain ecosystem integrity while enabling contributors to build skills that genuinely enhance AI agent capabilities.\n\n## Purpose and Scope\n\nThe Skill Quality Standards system serves multiple stakeholders within the AI agent ecosystem:\n\n- **For Skill Authors**: Provides concrete guidelines on how to structure skills for maximum effectiveness\n- **For AI Agents**: Ensures consistent instruction formatting that agents can reliably parse and execute\n- **For End Users**: Guarantees predictable, high-quality outcomes when deploying skills\n- **For Ecosystem Maintainers**: Offers evaluation criteria for curating and reviewing community submissions\n\nThe scope encompasses all aspects of skill creation including file structure, instruction clarity, example quality, and validation mechanisms. Skills that meet these standards are more likely to function correctly across the 30+ supported agent platforms including Claude Code, Claude.ai, OpenAI Codex, GitHub Copilot, and Cursor.\n\n## Quality Evaluation Framework\n\n### Core Quality Dimensions\n\nSkills are evaluated across five primary dimensions that collectively determine their overall quality and reliability.\n\n| Dimension | Description | Weight |\n|-----------|-------------|--------|\n| **Instruction Clarity** | How clearly and unambiguously the instructions are written | High |\n| **Trigger Precision** | Accuracy of the description field in matching relevant use cases | High |\n| **Example Quality** | Relevance and completeness of provided examples | Medium |\n| **Edge Case Handling** | Coverage of gotchas, limitations, and error scenarios | Medium |\n| **Validation Logic** | Presence and effectiveness of output verification steps | Medium |\n\n### Quality Assessment Process\n\nThe quality assessment follows a structured evaluation workflow that ensures consistent scoring across all submitted skills.\n\n```mermaid\ngraph TD\n    A[Skill Submission] --> B[Metadata Review]\n    B --> C[Instruction Analysis]\n    C --> D[Example Validation]\n    D --> E[Edge Case Audit]\n    E --> F[Final Quality Score]\n    \n    B --> B1{name matches dir?}\n    B1 -->|No| G[Rejection: Name Mismatch]\n    B1 -->|Yes| C\n    \n    C --> C1{Instructions clear?}\n    C1 -->|Unclear| H[Return for Revision]\n    C1 -->|Clear| D\n    \n    D --> D1{Examples valid?}\n    D1 -->|Invalid| H\n    D1 -->|Valid| E\n    \n    E --> E1{Gotchas documented?}\n    E1 -->|Missing| I[Recommendation Added]\n    E1 -->|Documented| F\n    \n    style G fill:#ff6b6b\n    style H fill:#ffd93d\n    style F fill:#6bcb77\n```\n\n## Good vs. Bad Pattern Examples\n\nThe quality standards explicitly define what constitutes effective versus ineffective skill implementations through concrete pattern comparisons.\n\n### Pattern Comparison Table\n\n| Aspect | Good Pattern | Bad Pattern |\n|--------|--------------|-------------|\n| **Specificity** | Actionable steps with clear scope | Vague descriptions lacking direction |\n| **Trigger Conditions** | Precise \"Use when...\" statements | Generic statements applicable to many contexts |\n| **Validation** | Output verification steps included | No mechanism to verify correctness |\n| **Examples** | Concrete input → output pairs | Missing or abstract examples |\n| **Limitations** | Known constraints documented | Implicit assumptions unstated |\n\n### Implementation Example\n\nThe quality standards component provides visual comparison panels that demonstrate these differences:\n\n```typescript\n// QualityStandards.tsx structure\ninterface QualityStandard {\n  title: string;\n  description: string;\n}\n\ninterface PatternComparison {\n  goodHeader: string;\n  badHeader: string;\n  goodPattern: string;\n  badPattern: string;\n  goodDesc: string;\n  badDesc: string;\n}\n```\n\nThe component renders two side-by-side panels:\n\n- **Left Panel (Good)**: Green-accented header with CheckCircle2 icon, displays the recommended pattern in monospace font, includes explanatory text below\n- **Right Panel (Bad)**: Muted header with XCircle icon, displays the anti-pattern with reduced opacity, includes descriptive critique\n\n## Skill Structure Requirements\n\nBeyond instruction quality, the standards define structural requirements that skills must satisfy.\n\n### Directory Structure\n\n```\nskill-name/\n├── SKILL.md           # Required: Main skill definition\n├── scripts/           # Optional: Executable helper scripts\n│   └── *.py, *.sh\n├── LICENSE            # Optional: License specification\n└── README.md          # Optional: Extended documentation\n```\n\n### Frontmatter Requirements\n\n| Field | Type | Required | Constraints |\n|-------|------|----------|-------------|\n| `name` | string | Yes | 1-64 chars, lowercase alphanumeric + hyphens, must match parent directory |\n| `description` | string | Yes | 1-1024 chars, describes both capability AND trigger conditions |\n| `license` | string | No | License name or reference to bundled file |\n| `compatibility` | string | No | 1-500 chars, environment requirements |\n| `metadata` | object | No | Author, version, or custom fields |\n| `allowed-tools` | string | No | Space-delimited list of approved tools (experimental) |\n\n## Progressive Disclosure Model\n\nThe quality standards embrace a progressive disclosure architecture that optimizes for both initial discovery performance and comprehensive execution capability.\n\n```mermaid\ngraph LR\n    subgraph Discovery[\"Startup Phase - Lightweight Scan\"]\n        A1[Agent loads] --> A2[Read name]\n        A2 --> A3[Read description]\n        A3 --> A4[~50-100 tokens per skill]\n    end\n    \n    subgraph Activation[\"On-Demand Loading\"]\n        B1[Task matches description?] -->|Yes| B2[Load full SKILL.md]\n        B2 --> B3[Read instructions]\n        B3 --> B4[Load examples]\n        B4 --> B5[Load scripts if needed]\n    end\n    \n    A4 -.->|Task relevance?| B1\n    \n    style Discovery fill:#e3f2fd\n    style Activation fill:#fff3e0\n```\n\nThis model ensures that agents remain responsive during startup while having access to complete instructions when a relevant task is detected.\n\n## Best Practices Summary\n\nBased on the quality standards framework, skill authors should adhere to the following practices:\n\n1. **Write Descriptive Trigger Conditions**: The `description` field should explicitly state when to activate the skill, including specific keywords users would employ\n\n2. **Structure Instructions Step-by-Step**: Break procedures into numbered, sequential steps that agents can follow unambiguously\n\n3. **Document Edge Cases**: Include a `Gotchas` section covering environment-specific behaviors, common failure modes, and known limitations\n\n4. **Provide Concrete Examples**: Include input → output pairs that demonstrate expected behavior in realistic scenarios\n\n5. **Include Validation Steps**: Define how to verify that the skill's output meets success criteria\n\n6. **Use Agent-Friendly Scripts**: When including scripts, design them to avoid interactive prompts, produce structured output (JSON/CSV), and exit with meaningful codes\n\n## Integration with Skill Ecosystem\n\nThe quality standards integrate with the broader skill ecosystem through the following mechanisms:\n\n| Integration Point | Description |\n|-------------------|-------------|\n| **Discovery** | Skills meeting standards appear in the curated directory with quality indicators |\n| **Compatibility** | Standards ensure cross-platform compatibility across 30+ supported agents |\n| **CLI Integration** | `npx skills` tool validates skills against quality criteria during add/check operations |\n| **Community Curation** | Maintainers use standards to review and recommend improvements for submitted skills |\n\nThe `npx skills` command provides validation through `npx skills check`, which verifies that skills conform to the defined standards and alerts authors to areas needing improvement.\n\n## References\n\n- Quality Standards Component: `website/src/components/sections/QualityStandards.tsx`\n- README Documentation: `README.md`\n- Skill Specification: [agentskills.io/specification](https://agentskills.io/specification)\n\n---\n\n<a id='using-creating-skills'></a>\n\n## Using and Creating Skills\n\n### 相关页面\n\n相关主题：[Quick Start Guide](#quick-start-guide), [Skill Quality Standards](#skill-quality-standards)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [CONTRIBUTING.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n</details>\n\n# Using and Creating Skills\n\nAgent Skills are portable instruction packages that teach AI assistants how to perform specific tasks. A skill consists of a `SKILL.md` file containing YAML frontmatter and markdown instructions, optionally bundled with executable scripts. Skills follow an open standard originally developed by Anthropic, now adopted by 30+ agent platforms including Claude, Codex, Cursor, Copilot, and Gemini CLI.\n\n## Overview\n\nThe SKILL.md format enables AI agents to load domain knowledge, team conventions, and repeatable workflows on demand. At startup, agents perform a lightweight scan of available skills, loading only the `name` and `description` fields (~50-100 tokens per skill). Full instructions are loaded only when a task matches a skill's description.\n\n## Skill Discovery Locations\n\nAgents scan the following directories for available skills:\n\n| Location | Description |\n|----------|-------------|\n| `~/.claude/skills/` | User-level skills |\n| `.claude/skills/` | Project-level skills |\n| `.github/skills/` | Repository-level skills |\n| `~/.agents/skills/` | Alternative user-level location |\n\n## SKILL.md Format Specification\n\n### Required Frontmatter Fields\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\n---\n```\n\n| Field | Required | Format | Constraints |\n|-------|----------|--------|-------------|\n| `name` | Yes | Lowercase alphanumeric + hyphens | 1-64 characters, must match parent directory, no consecutive/leading/trailing hyphens |\n| `description` | Yes | Free-form text | 1-1024 characters, describes what and when to use |\n\n### Optional Frontmatter Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `license` | No | License name or reference to bundled file (e.g., `MIT`, `Apache-2.0`, `LICENSE.txt`) |\n| `compatibility` | No | Environment requirements (e.g., `Requires Python 3.11+ and uv`) |\n| `metadata` | No | Structured metadata object with author, version, etc. |\n| `allowed-tools` | No (Experimental) | Space-delimited list of pre-approved tools to run |\n\n### Recommended Body Structure\n\nThe markdown body following frontmatter has no format restrictions. Recommended sections:\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n## Adding Skills to Your Agent\n\n### Using the CLI Tool\n\nThe `npx skills` CLI provides commands for managing skills:\n\n```bash\nnpx skills find [query]            # Search for relevant skills\nnpx skills add <owner/repo>        # Add a skill (supports GitHub shorthand, full URLs, or local paths)\nnpx skills list                    # List installed skills\nnpx skills check                   # Check for updates\nnpx skills update                  # Upgrade all skills\nnpx skills remove [skill-name]     # Remove a skill\n```\n\n### Manual Drop-In\n\nSkills can be manually placed in the appropriate directory:\n\n```bash\n# Copy skill folder to agent skills directory\ncp -r my-downloaded-skill ~/.agents/skills/my-skill\n\n# Verify structure\nls ~/.agents/skills/my-skill/SKILL.md\n```\n\n### Platform-Specific Loading\n\n| Platform | Command |\n|----------|---------|\n| Claude Code | `/skills add <github-url>` |\n| Claude.ai | Paste raw SKILL.md URL in chat |\n\n## Creating a New Skill\n\n### Step 1: Create the Directory\n\nCreate a folder named after your skill. The folder name must match the `name` field in frontmatter.\n\n```bash\nmkdir my-custom-skill\n```\n\n### Step 2: Create SKILL.md\n\nPlace a `SKILL.md` file inside the folder:\n\n```bash\ntouch my-custom-skill/SKILL.md\n```\n\n### Step 3: Write Frontmatter\n\nAdd required YAML frontmatter at the top:\n\n```yaml\n---\nname: my-custom-skill\ndescription: >\n  A brief description of what this skill does and when to use it.\n  Include keywords the agent might encounter.\n---\n```\n\n### Step 4: Write Instructions\n\nAdd clear, step-by-step instructions in the markdown body:\n\n```markdown\n## When to use this skill\nActivate when the user needs to [specific task].\n\n## Instructions\n1. First, do this.\n2. Then, do that.\n3. Finally, validate the output.\n\n## Gotchas\n- Scanned PDFs require OCR\n- Password-protected files need additional handling\n```\n\n### Step 5: Add Scripts (Optional)\n\nPlace executable files in a `scripts/` subdirectory. Scripts should be agent-friendly:\n\n```python\n#!/usr/bin/env -S uv run\n# /// script\n# requires-python = \">= 3.11\"\n# dependencies = [\"requests\", \"rich\"]\n# ///\n\nimport sys, json\n\n# Design principles:\n# - Avoid interactive prompts\n# - Use structured output (JSON/CSV)\n# - Write errors to stderr\n# - Exit with meaningful codes\n\nprint(json.dumps({\"result\": \"ok\"}))\n```\n\n## Quality Standards\n\nGood skill descriptions clearly explain what the skill does AND when to activate it:\n\n| Pattern | Example |\n|---------|---------|\n| Good | \"Extracts text and tables from PDF files. Use when working with PDFs, forms, or document extraction.\" |\n| Poor | \"Helps with PDFs.\" |\n\nInclude specific keywords agents would encounter in user requests. Use imperative phrasing like \"Use this skill when...\".\n\n---\n\n<a id='internationalization'></a>\n\n## Internationalization (i18n)\n\n### 相关页面\n\n相关主题：[Component Architecture](#component-architecture), [Next.js Website Structure](#nextjs-structure)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/src/lib/i18n.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/lib/i18n.tsx)\n- [README.es.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.es.md)\n- [README.ja.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ja.md)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n- [README.zh-CN.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-CN.md)\n- [README.zh-TW.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-TW.md)\n- [website/src/components/Navbar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n</details>\n\n# Internationalization (i18n)\n\n## Overview\n\nThe awesome-agent-skills project implements a comprehensive internationalization system that enables the website and documentation to be presented in multiple languages. The i18n system supports six languages: English (default), Spanish, Japanese, Korean, Simplified Chinese, and Traditional Chinese.\n\nThe architecture leverages Next.js App Router conventions with a centralized translation library that provides type-safe access to localized content across all components.\n\n## Architecture\n\n```mermaid\ngraph TD\n    A[User Interface] --> B[Navbar Component]\n    B --> C{Language Selector}\n    C --> D[Set Language State]\n    D --> E[i18n Context]\n    E --> F[useTranslations Hook]\n    F --> G[Translation Files]\n    \n    H[Localized README Files] --> I[website/public]\n    H --> J[GitHub Repository]\n    \n    K[Spanish] --> G\n    L[Japanese] --> G\n    M[Korean] --> G\n    N[Simplified Chinese] --> G\n    O[Traditional Chinese] --> G\n    P[English] --> G\n```\n\n## Supported Languages\n\nThe project maintains translations for the following languages:\n\n| Language | Code | Flag | README File |\n|----------|------|------|-------------|\n| English | `en` | 🇺🇸 | (default) |\n| Spanish | `es` | 🇪🇸 | `README.es.md` |\n| Japanese | `ja` | 🇯🇵 | `README.ja.md` |\n| Korean | `ko` | 🇰🇷 | `README.ko.md` |\n| Simplified Chinese | `zh-CN` | 🇨🇳 | `README.zh-CN.md` |\n| Traditional Chinese | `zh-TW` | 🇹🇼 | `README.zh-TW.md` |\n\n资料来源：[README.es.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.es.md)  \n资料来源：[README.ja.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ja.md)  \n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)  \n资料来源：[README.zh-CN.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-CN.md)  \n资料来源：[README.zh-TW.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-TW.md)\n\n## Core Components\n\n### i18n Library\n\nThe translation system is implemented in `website/src/lib/i18n.tsx`. This module provides the foundational translation infrastructure used throughout the React application.\n\nKey exports include:\n- Translation context provider\n- `useTranslations()` hook for component-level translations\n- Language configuration constants\n\n资料来源：[website/src/components/Navbar.tsx:3](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n### Language Configuration\n\nThe `LANGUAGES` array defines all supported locales with their metadata:\n\n```typescript\n// Configuration includes:\n{\n  code: string,      // Locale identifier (e.g., 'en', 'zh-CN')\n  flag: string,      // Emoji flag for UI display\n}\n```\n\n资料来源：[website/src/components/Navbar.tsx:1-50](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n## Language Selector Component\n\n### Component Structure\n\nThe language selector is implemented in the `Navbar` component, providing users with an accessible dropdown to change their preferred language.\n\n```mermaid\ngraph LR\n    A[Globe Icon] --> B[Button Click]\n    B --> C{langOpen State}\n    C -->|true| D[Show Dropdown]\n    C -->|false| E[Hide Dropdown]\n    D --> F[Language Options]\n    F --> G[Select Language]\n    G --> H[setLang Function]\n    H --> I[Update Context]\n    I --> J[Close Dropdown]\n```\n\n### Features\n\n| Feature | Description |\n|---------|-------------|\n| Dropdown Toggle | Animated show/hide with `AnimatePresence` |\n| Language List | Renders all languages from `LANGUAGES` array |\n| Flag Display | Shows flag emoji for quick visual identification |\n| State Management | Uses `langRef` for click-outside detection |\n| Accessibility | Includes `aria-label` for screen readers |\n\n资料来源：[website/src/components/Navbar.tsx:1-60](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n### Implementation Details\n\n```tsx\n<div ref={langRef} className=\"relative\">\n  <button\n    onClick={() => setLangOpen(!langOpen)}\n    aria-label=\"Change language\"\n  >\n    <Globe className=\"w-4 h-4\" />\n    <span>{currentLang?.flag}</span>\n  </button>\n  <AnimatePresence>\n    {langOpen && (\n      <motion.div className=\"absolute right-0 top-10 w-44 ...\">\n        {LANGUAGES.map((l) => (\n          <button\n            key={l.code}\n            onClick={() => { setLang(l.code); setLangOpen(false); }}\n          />\n        ))}\n      </motion.div>\n    )}\n  </AnimatePresence>\n</div>\n```\n\n资料来源：[website/src/components/Navbar.tsx:15-40](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n## Usage Patterns\n\n### Component-Level Translations\n\nComponents access translations via the `useTranslations()` hook:\n\n```tsx\nimport { useTranslations } from \"@/lib/i18n\";\n\nexport default function ExampleComponent() {\n  const t = useTranslations();\n  \n  return (\n    <h2>{t.how.title}</h2>\n    <p>{t.how.subtitle}</p>\n  );\n}\n```\n\n资料来源：[website/src/components/sections/HowItWorks.tsx:3-8](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/HowItWorks.tsx)\n\n### Translation Namespace Access\n\nTranslations are organized into namespaces (e.g., `how`, `quality`, `footer`). Components access specific sections:\n\n```tsx\nconst stages = t.how.stages;  // Array of stage data\nconst quality = t.quality;     // Quality section content\nconst footer = t.footer;       // Footer translations\n```\n\n资料来源：[website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)  \n资料来源：[website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)  \n资料来源：[website/src/components/Footer.tsx:1-30](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n## Documentation Localization\n\n### README Translations\n\nThe repository maintains full README translations in all supported languages. Each localized README follows the naming convention `README.{locale}.md`.\n\n| File | Purpose |\n|------|---------|\n| `README.md` | English (default) |\n| `README.es.md` | Spanish documentation |\n| `README.ja.md` | Japanese documentation |\n| `README.ko.md` | Korean documentation |\n| `README.zh-CN.md` | Simplified Chinese documentation |\n| `README.zh-TW.md` | Traditional Chinese documentation |\n\n### Citation Format\n\nThe Footer component displays BibTeX citation format that adapts to the selected language context:\n\n```bibtex\n@misc{awesome-agent-skills,\n  author = {Hailey Cheng (Cheng Hei Lam)},\n  title = {Agent Skill Index},\n  year = {2026},\n  publisher = {GitHub},\n  url = {https://github.com/heilcheng/awesome-agent-skills}\n}\n```\n\n资料来源：[website/src/components/Footer.tsx:20-30](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n## Adding New Translations\n\n### Adding a New Language\n\n1. Create a new `README.{code}.md` file in the repository root\n2. Add the language configuration to the `LANGUAGES` array in `i18n.tsx`\n3. Add translation keys to the translation files\n4. Update the language selector dropdown styling if needed\n\n### Translation Key Structure\n\n```typescript\ninterface Translations {\n  nav: {\n    // Navigation translations\n  };\n  how: {\n    title: string;\n    subtitle: string;\n    steps: Array<{\n      step: string;\n      title: string;\n      desc: string;\n    }>;\n  };\n  quality: {\n    // Quality standards translations\n  };\n  footer: {\n    // Footer text including citation label\n  };\n}\n```\n\n## Best Practices\n\n### Type Safety\n\nThe i18n system uses TypeScript to ensure type-safe access to translation keys. Always use the `useTranslations()` hook rather than direct object access to maintain type checking.\n\n### Lazy Loading\n\nTranslation content is loaded on-demand through the Next.js App Router, ensuring minimal bundle impact when users view the site.\n\n### Accessibility\n\nThe language selector includes proper ARIA labels and keyboard navigation support for screen reader users.\n\n## External Resources\n\n- Official specification: [agentskills.io/specification](https://agentskills.io/specification)\n- Project repository: [github.com/heilcheng/awesome-agent-skills](https://github.com/heilcheng/awesome-agent-skills)\n- Agent Skill website: [agent-skill.co](https://agent-skill.co)\n\n资料来源：[website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n\n---\n\n<a id='deployment-config'></a>\n\n## Deployment Configuration\n\n### 相关页面\n\n相关主题：[Next.js Website Structure](#nextjs-structure), [Component Architecture](#component-architecture)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/README.md)\n- [website/package.json](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/package.json)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/FindingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/FindingSkills.tsx)\n- [website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n</details>\n\n# Deployment Configuration\n\n## Overview\n\nThe **awesome-agent-skills** project is a Next.js application that serves as a comprehensive directory for AI agent skills. The deployment configuration encompasses the build system, runtime environment, and hosting setup required to deploy this web application to production. 资料来源：[website/README.md:1]()\n\nThe project is designed to be deployed on **Vercel**, the platform created by the developers of Next.js, which provides optimized deployment workflows for Next.js applications. 资料来源：[website/README.md:32-34]()\n\n## Project Architecture\n\nThe project follows a modern Next.js architecture using the App Router pattern. This architectural choice impacts how the application is built and deployed. 资料来源：[website/README.md:13]()\n\n```mermaid\ngraph TD\n    A[Source Code] --> B[Next.js Build]\n    B --> C[Static Assets]\n    B --> D[Server Components]\n    D --> E[Vercel Edge Network]\n    C --> E\n    E --> F[End Users]\n    \n    G[Environment Variables] --> B\n    H[Dependencies] --> B\n```\n\n## Build System Configuration\n\n### Package Manager Support\n\nThe project supports multiple package managers for development and dependency installation:\n\n| Package Manager | Command | Notes |\n|----------------|---------|-------|\n| npm | `npm run dev` | Default Node.js package manager |\n| yarn | `yarn dev` | Facebook's package manager |\n| pnpm | `pnpm dev` | Fast, disk space efficient |\n| bun | `bun dev` | JavaScript runtime and toolchain |\n\n资料来源：[website/README.md:7-15]()\n\n### Development Server\n\nThe development server runs locally on `http://localhost:3000` by default. This can be configured through environment variables or the Next.js configuration file. 资料来源：[website/README.md:17]()\n\n```bash\n# Starting the development server\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n### Production Build\n\nThe project uses standard Next.js build commands. When deployed to Vercel, the platform automatically detects the Next.js framework and runs the appropriate build commands. 资料来源：[website/README.md:32-34]()\n\n## Font Optimization\n\nThe project uses `next/font` for automatic font optimization. This feature optimizes fonts and removes layout shifts for improved performance. 资料来源：[website/README.md:21]()\n\n```typescript\n// Example usage from Next.js documentation\nimport { Geist } from \"next/font/google\"\n\n// Configuration is handled automatically by next/font\n```\n\nThe font optimization occurs at build time, embedding font files directly into the application for faster page loads and reduced external requests.\n\n## Theme and Styling Configuration\n\n### Dark/Light Theme Support\n\nThe application implements a CSS custom properties-based theming system that supports both dark and light modes. The theming is defined through CSS variables at the `:root` level. 资料来源：[website/index.html:1-50]()\n\n```css\n:root{\n  --bg:#000;\n  --bg1:rgba(255,255,255,0.03);\n  --bg2:rgba(255,255,255,0.05);\n  --bg3:rgba(255,255,255,0.08);\n  --border:rgba(255,255,255,0.08);\n  --border2:rgba(255,255,255,0.12);\n  --text:rgba(255,255,255,0.95);\n}\n```\n\nThe theme configuration includes:\n\n| Variable | Purpose |\n|----------|---------|\n| `--bg` | Primary background color |\n| `--bg1`, `--bg2`, `--bg3` | Background opacity variations |\n| `--border`, `--border2` | Border and divider colors |\n| `--text` | Primary text color |\n\n资料来源：[website/index.html:8-16]()\n\n### Component-Level Theming\n\nIndividual components implement theme-aware styling using Tailwind CSS utility classes with dark mode variants:\n\n```typescript\n// Example from Footer.tsx\nclassName=\"text-white dark:text-neutral-900\"\nclassName=\"bg-zinc-900 dark:bg-white\"\n```\n\n资料来源：[website/src/components/Footer.tsx:10-12]()\n\n## Environment Configuration\n\n### Public Environment Variables\n\nThe project exposes certain environment variables for public use. These are prefixed with `NEXT_PUBLIC_` and are accessible in both server and client code. 资料来源：[website/README.md:17]()\n\n### Site Metadata\n\nThe deployment includes the following metadata configuration:\n\n| Setting | Value |\n|---------|-------|\n| Site Title | Agent Skill Index |\n| Description | The Ultimate AI Agent Skills List & Tutorials |\n| Language | English (en) |\n| Theme Color | Dark (default) |\n\n资料来源：[website/index.html:2-7]()\n\n## Deployment to Vercel\n\n### Automatic Detection\n\nVercel automatically detects Next.js projects during deployment. The platform performs the following steps:\n\n1. Detects `next` in `package.json` dependencies\n2. Identifies the framework as Next.js\n3. Runs the appropriate build command\n4. Optimizes the output for edge deployment\n\n资料来源：[website/README.md:32-34]()\n\n### Deployment Links\n\nThe project includes configured deployment links for easy access:\n\n| Environment | URL | Purpose |\n|------------|-----|---------|\n| Production | agent-skill.co | Primary production site |\n| Repository | github.com/heilcheng/awesome-agent-skills | Source code hosting |\n\n资料来源：[website/src/components/Footer.tsx:7-13]()\n\n## Linting and Code Quality\n\n### ESLint Configuration\n\nThe project uses ESLint for code quality enforcement. The configuration file is located at `website/eslint.config.mjs`. 资料来源：[查询文件: website/eslint.config.mjs]()\n\nESLint runs during the development process and CI/CD pipelines to ensure code consistency and catch potential issues before deployment.\n\n### Code Style Guidelines\n\nComponents follow consistent coding patterns:\n\n- TypeScript for type safety\n- Tailwind CSS utility classes for styling\n- Dark mode support via `dark:` variants\n- Consistent naming conventions\n\n资料来源：[website/src/components/sections/QualityStandards.tsx:1-20]()\n\n## Post-Processing Configuration\n\n### PostCSS Configuration\n\nThe project uses PostCSS for processing CSS. Configuration is defined in `website/postcss.config.mjs` to support:\n\n- Tailwind CSS\n- Autoprefixer for browser compatibility\n- CSS modules (if used)\n\n资料来源：[查询文件: website/postcss.config.mjs]()\n\n## CI/CD Considerations\n\nThe repository structure supports continuous integration and deployment through GitHub. When changes are pushed to the repository:\n\n1. Vercel automatically pulls the latest changes\n2. Build process runs automatically\n3. Preview deployments are created for pull requests\n4. Production deployment occurs on merges to main\n\n资料来源：[website/src/components/sections/Contributing.tsx:25-35]()\n\n## Development Workflow\n\n```mermaid\ngraph LR\n    A[Local Development] -->|npm run dev| B[Dev Server]\n    B --> C[Code Changes]\n    C --> D[Auto Hot Reload]\n    D --> B\n    \n    E[Git Push] --> F[Vercel]\n    F --> G[Build]\n    G --> H[Preview Deployment]\n    \n    I[Merge to Main] --> F\n    H --> J[Production Deployment]\n```\n\n## Related Documentation\n\nFor additional deployment and development information, refer to:\n\n- [Next.js Documentation](https://nextjs.org/docs) - Official Next.js features and API documentation\n- [Vercel Platform](https://vercel.com/docs) - Deployment platform documentation\n- [Tailwind CSS](https://tailwindcss.com/docs) - Styling framework documentation\n\n## Summary\n\nThe deployment configuration for awesome-agent-skills is straightforward, leveraging Next.js's built-in deployment capabilities with Vercel. Key aspects include:\n\n1. **Framework**: Next.js with App Router\n2. **Hosting**: Vercel (automatic detection and deployment)\n3. **Styling**: Tailwind CSS with dark/light theme support\n4. **Fonts**: Automatic optimization via next/font\n5. **Package Managers**: Supports npm, yarn, pnpm, and bun\n6. **Code Quality**: ESLint integration for consistent code standards\n\nThe configuration is production-ready out of the box and requires minimal additional setup for deployment.\n\n---\n\n---\n\n## Doramagic 踩坑日志\n\n项目：heilcheng/awesome-agent-skills\n\n摘要：发现 10 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：身份坑 - 仓库名和安装名不一致。\n\n## 1. 身份坑 · 仓库名和安装名不一致\n\n- 严重度：medium\n- 证据强度：runtime_trace\n- 发现：仓库名 `awesome-agent-skills` 与安装入口 `skills` 不完全一致。\n- 对用户的影响：用户照着仓库名搜索包或照着包名找仓库时容易走错入口。\n- 建议检查：在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。\n- 复现命令：`npx skills`\n- 防护动作：页面必须同时展示 repo 名和真实安装入口，避免用户搜索错包。\n- 证据：identity.distribution | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | repo=awesome-agent-skills; install=skills\n\n## 2. 配置坑 · 可能修改宿主 AI 配置\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。\n- 对用户的影响：安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。\n- 建议检查：列出会写入的配置文件、目录和卸载/回滚步骤。\n- 防护动作：涉及宿主配置目录时必须给回滚路径，不能只给安装命令。\n- 证据：capability.host_targets | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | host_targets=claude\n\n## 3. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | README/documentation is current enough for a first validation pass.\n\n## 4. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | last_activity_observed missing\n\n## 5. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 6. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 7. 安全/权限坑 · 来源证据：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_dc99192b4a9b4b8089f4f6696f332a7d | https://github.com/heilcheng/awesome-agent-skills/issues/218 | 来源讨论提到 api key 相关条件，需在安装/试用前复核。\n\n## 8. 安全/权限坑 · 来源证据：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_0703404b82014fe3baddd3eaab1100bd | https://github.com/heilcheng/awesome-agent-skills/issues/226 | 来源讨论提到 npm 相关条件，需在安装/试用前复核。\n\n## 9. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | issue_or_pr_quality=unknown\n\n## 10. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | release_recency=unknown\n\n<!-- canonical_name: heilcheng/awesome-agent-skills; human_manual_source: deepwiki_human_wiki -->\n",
      "markdown_key": "awesome-agent-skills",
      "pages": "draft",
      "source_refs": [
        {
          "evidence_id": "github_repo:1124920990",
          "kind": "repo",
          "supports_claim_ids": [
            "claim_identity",
            "claim_distribution",
            "claim_capability"
          ],
          "url": "https://github.com/heilcheng/awesome-agent-skills"
        },
        {
          "evidence_id": "art_9e33d67875b5417db07acced1ca8e9a6",
          "kind": "docs",
          "supports_claim_ids": [
            "claim_identity",
            "claim_distribution",
            "claim_capability"
          ],
          "url": "https://github.com/heilcheng/awesome-agent-skills#readme"
        }
      ],
      "summary": "DeepWiki/Human Wiki 完整输出，末尾追加 Discovery Agent 踩坑日志。",
      "title": "awesome-agent-skills 说明书",
      "toc": [
        "https://github.com/heilcheng/awesome-agent-skills 项目说明书",
        "目录",
        "Project Introduction",
        "Overview",
        "Project Purpose and Scope",
        "Architecture Overview",
        "Core Components",
        "When to use this skill",
        "Doramagic 踩坑日志"
      ]
    }
  },
  "quality_gate": {
    "blocking_gaps": [],
    "category_confidence": "medium",
    "compile_status": "ready_for_review",
    "five_assets_present": true,
    "install_sandbox_verified": true,
    "missing_evidence": [],
    "next_action": "publish to Doramagic.ai project surfaces",
    "prompt_preview_boundary_ok": true,
    "publish_status": "publishable",
    "quick_start_verified": true,
    "repo_clone_verified": true,
    "repo_commit": "de9056857eb0e96da833469d2ee3ac392058225d",
    "repo_inspection_error": null,
    "repo_inspection_files": [
      "README.md"
    ],
    "repo_inspection_verified": true,
    "review_reasons": [
      "community_discussion_evidence_below_public_threshold"
    ],
    "tag_count_ok": true,
    "unsupported_claims": []
  },
  "schema_version": "0.1",
  "user_assets": {
    "ai_context_pack": {
      "asset_id": "ai_context_pack",
      "filename": "AI_CONTEXT_PACK.md",
      "markdown": "# website - Doramagic AI Context Pack\n\n> 定位：安装前体验与判断资产。它帮助宿主 AI 有一个好的开始，但不代表已经安装、执行或验证目标项目。\n\n## 充分原则\n\n- **充分原则，不是压缩原则**：AI Context Pack 应该充分到让宿主 AI 在开工前理解项目价值、能力边界、使用入口、风险和证据来源；它可以分层组织，但不以最短摘要为目标。\n- **压缩策略**：只压缩噪声和重复内容，不压缩会影响判断和开工质量的上下文。\n\n## 给宿主 AI 的使用方式\n\n你正在读取 Doramagic 为 website 编译的 AI Context Pack。请把它当作开工前上下文：帮助用户理解适合谁、能做什么、如何开始、哪些必须安装后验证、风险在哪里。不要声称你已经安装、运行或执行了目标项目。\n\n## Claim 消费规则\n\n- **事实来源**：Repo Evidence + Claim/Evidence Graph；Human Wiki 只提供显著性、术语和叙事结构。\n- **事实最低状态**：`supported`\n- `supported`：可以作为项目事实使用，但回答中必须引用 claim_id 和证据路径。\n- `weak`：只能作为低置信度线索，必须要求用户继续核实。\n- `inferred`：只能用于风险提示或待确认问题，不能包装成项目事实。\n- `unverified`：不得作为事实使用，应明确说证据不足。\n- `contradicted`：必须展示冲突来源，不得替用户强行选择一个版本。\n\n## 它最适合谁\n\n- **正在使用 Claude/Codex/Cursor/Gemini 等宿主 AI 的开发者**：README 或插件配置提到多个宿主 AI。 证据：`README.md` Claim：`clm_0002` supported 0.86\n\n## 它能做什么\n\n- **命令行启动或安装流程**（需要安装后验证）：项目文档中存在可执行命令，真实使用需要在本地或宿主环境中运行这些命令。 证据：`README.md` Claim：`clm_0001` supported 0.86\n\n## 怎么开始\n\n- `npx skills find [query]            # Search for related skills` 证据：`README.md` Claim：`clm_0003` supported 0.86\n- `npx skills add <owner/repo>        # Install skills (supports GitHub shorthand, full URL, local path)` 证据：`README.md` Claim：`clm_0004` supported 0.86\n- `npx skills list                    # List installed skills` 证据：`README.md` Claim：`clm_0005` supported 0.86\n- `npx skills check                   # Check for available updates` 证据：`README.md` Claim：`clm_0006` supported 0.86\n- `npx skills update                  # Upgrade all skills` 证据：`README.md` Claim：`clm_0007` supported 0.86\n- `npx skills remove [skill-name]     # Uninstall skills` 证据：`README.md` Claim：`clm_0008` supported 0.86\n- `pip install fastmcp` 证据：`README.md` Claim：`clm_0009` supported 0.86\n\n## 继续前判断卡\n\n- **当前建议**：仅建议沙盒试装\n- **为什么**：项目存在安装命令、宿主配置或本地写入线索，不建议直接进入主力环境，应先在隔离环境试装。\n\n### 30 秒判断\n\n- **现在怎么做**：仅建议沙盒试装\n- **最小安全下一步**：先跑 Prompt Preview；若仍要安装，只在隔离环境试装\n- **先别相信**：真实输出质量不能在安装前相信。\n- **继续会触碰**：命令执行、本地环境或项目文件、宿主 AI 上下文\n\n### 现在可以相信\n\n- **适合人群线索：正在使用 Claude/Codex/Cursor/Gemini 等宿主 AI 的开发者**（supported）：有 supported claim 或项目证据支撑，但仍不等于真实安装效果。 证据：`README.md` Claim：`clm_0002` supported 0.86\n- **能力存在：命令行启动或安装流程**（supported）：可以相信项目包含这类能力线索；是否适合你的具体任务仍要试用或安装后验证。 证据：`README.md` Claim：`clm_0001` supported 0.86\n- **存在 Quick Start / 安装命令线索**（supported）：可以相信项目文档出现过启动或安装入口；不要因此直接在主力环境运行。 证据：`README.md` Claim：`clm_0003` supported 0.86\n\n### 现在还不能相信\n\n- **真实输出质量不能在安装前相信。**（unverified）：Prompt Preview 只能展示引导方式，不能证明真实项目中的结果质量。\n- **宿主 AI 版本兼容性不能在安装前相信。**（unverified）：Claude、Cursor、Codex、Gemini 等宿主加载规则和版本差异必须在真实环境验证。\n- **不会污染现有宿主 AI 行为，不能直接相信。**（inferred）：Skill、plugin、AGENTS/CLAUDE/GEMINI 指令可能改变宿主 AI 的默认行为。\n- **可安全回滚不能默认相信。**（unverified）：除非项目明确提供卸载和恢复说明，否则必须先在隔离环境验证。\n- **真实安装后是否与用户当前宿主 AI 版本兼容？**（unverified）：兼容性只能通过实际宿主环境验证。\n- **项目输出质量是否满足用户具体任务？**（unverified）：安装前预览只能展示流程和边界，不能替代真实评测。\n- **安装命令是否需要网络、权限或全局写入？**（unverified）：这影响企业环境和个人环境的安装风险。 证据：`README.md`\n\n### 继续会触碰什么\n\n- **命令执行**：包管理器、网络下载、本地插件目录、项目配置或用户主目录。 原因：运行第一条命令就可能产生环境改动；必须先判断是否值得跑。 证据：`README.md`\n- **本地环境或项目文件**：安装结果、插件缓存、项目配置或本地依赖目录。 原因：安装前无法证明写入范围和回滚方式，需要隔离验证。 证据：`README.md`\n- **宿主 AI 上下文**：AI Context Pack、Prompt Preview、Skill 路由、风险规则和项目事实。 原因：导入上下文会影响宿主 AI 后续判断，必须避免把未验证项包装成事实。\n\n### 最小安全下一步\n\n- **先跑 Prompt Preview**：用安装前交互式试用判断工作方式是否匹配，不需要授权或改环境。（适用：任何项目都适用，尤其是输出质量未知时。）\n- **只在隔离目录或测试账号试装**：避免安装命令污染主力宿主 AI、真实项目或用户主目录。（适用：存在命令执行、插件配置或本地写入线索时。）\n- **安装后只验证一个最小任务**：先验证加载、兼容、输出质量和回滚，再决定是否深用。（适用：准备从试用进入真实工作流时。）\n\n### 退出方式\n\n- **保留安装前状态**：记录原始宿主配置和项目状态，后续才能判断是否可恢复。\n- **记录安装命令和写入路径**：没有明确卸载说明时，至少要知道哪些目录或配置需要手动清理。\n- **如果没有回滚路径，不进入主力环境**：不可回滚是继续前阻断项，不应靠信任或运气继续。\n\n## 哪些只能预览\n\n- 解释项目适合谁和能做什么\n- 基于项目文档演示典型对话流程\n- 帮助用户判断是否值得安装或继续研究\n\n## 哪些必须安装后验证\n\n- 真实安装 Skill、插件或 CLI\n- 执行脚本、修改本地文件或访问外部服务\n- 验证真实输出质量、性能和兼容性\n\n## 边界与风险判断卡\n\n- **把安装前预览误认为真实运行**：用户可能高估项目已经完成的配置、权限和兼容性验证。 处理方式：明确区分 prompt_preview_can_do 与 runtime_required。 Claim：`clm_0010` inferred 0.45\n- **命令执行会修改本地环境**：安装命令可能写入用户主目录、宿主插件目录或项目配置。 处理方式：先在隔离环境或测试账号中运行。 证据：`README.md` Claim：`clm_0011` supported 0.86\n- **待确认**：真实安装后是否与用户当前宿主 AI 版本兼容？。原因：兼容性只能通过实际宿主环境验证。\n- **待确认**：项目输出质量是否满足用户具体任务？。原因：安装前预览只能展示流程和边界，不能替代真实评测。\n- **待确认**：安装命令是否需要网络、权限或全局写入？。原因：这影响企业环境和个人环境的安装风险。\n\n## 开工前工作上下文\n\n### 加载顺序\n\n- 先读取 how_to_use.host_ai_instruction，建立安装前判断资产的边界。\n- 读取 claim_graph_summary，确认事实来自 Claim/Evidence Graph，而不是 Human Wiki 叙事。\n- 再读取 intended_users、capabilities 和 quick_start_candidates，判断用户是否匹配。\n- 需要执行具体任务时，优先查 role_skill_index，再查 evidence_index。\n- 遇到真实安装、文件修改、网络访问、性能或兼容性问题时，转入 risk_card 和 boundaries.runtime_required。\n\n### 任务路由\n\n- **命令行启动或安装流程**：先说明这是安装后验证能力，再给出安装前检查清单。 边界：必须真实安装或运行后验证。 证据：`README.md` Claim：`clm_0001` supported 0.86\n\n### 上下文规模\n\n- 文件总数：53\n- 重要文件覆盖：19/53\n- 证据索引条目：19\n- 角色 / Skill 条目：8\n\n### 证据不足时的处理\n\n- **missing_evidence**：说明证据不足，要求用户提供目标文件、README 段落或安装后验证记录；不要补全事实。\n- **out_of_scope_request**：说明该任务超出当前 AI Context Pack 证据范围，并建议用户先查看 Human Manual 或真实安装后验证。\n- **runtime_request**：给出安装前检查清单和命令来源，但不要替用户执行命令或声称已执行。\n- **source_conflict**：同时展示冲突来源，标记为待核实，不要强行选择一个版本。\n\n## Prompt Recipes\n\n### 适配判断\n\n- 目标：判断这个项目是否适合用户当前任务。\n- 预期输出：适配结论、关键理由、证据引用、安装前可预览内容、必须安装后验证内容、下一步建议。\n\n```text\n请基于 website 的 AI Context Pack，先问我 3 个必要问题，然后判断它是否适合我的任务。回答必须包含：适合谁、能做什么、不能做什么、是否值得安装、证据来自哪里。所有项目事实必须引用 evidence_refs、source_paths 或 claim_id。\n```\n\n### 安装前体验\n\n- 目标：让用户在安装前感受核心工作流，同时避免把预览包装成真实能力或营销承诺。\n- 预期输出：一段带边界标签的体验剧本、安装后验证清单和谨慎建议；不含真实运行承诺或强营销表述。\n\n```text\n请把 website 当作安装前体验资产，而不是已安装工具或真实运行环境。\n\n请严格输出四段：\n1. 先问我 3 个必要问题。\n2. 给出一段“体验剧本”：用 [安装前可预览]、[必须安装后验证]、[证据不足] 三种标签展示它可能如何引导工作流。\n3. 给出安装后验证清单：列出哪些能力只有真实安装、真实宿主加载、真实项目运行后才能确认。\n4. 给出谨慎建议：只能说“值得继续研究/试装”“先补充信息后再判断”或“不建议继续”，不得替项目背书。\n\n硬性边界：\n- 不要声称已经安装、运行、执行测试、修改文件或产生真实结果。\n- 不要写“自动适配”“确保通过”“完美适配”“强烈建议安装”等承诺性表达。\n- 如果描述安装后的工作方式，必须使用“如果安装成功且宿主正确加载 Skill，它可能会……”这种条件句。\n- 体验剧本只能写成“示例台词/假设流程”：使用“可能会询问/可能会建议/可能会展示”，不要写“已写入、已生成、已通过、正在运行、正在生成”。\n- Prompt Preview 不负责给安装命令；如用户准备试装，只能提示先阅读 Quick Start 和 Risk Card，并在隔离环境验证。\n- 所有项目事实必须来自 supported claim、evidence_refs 或 source_paths；inferred/unverified 只能作风险或待确认项。\n\n```\n\n### 角色 / Skill 选择\n\n- 目标：从项目里的角色或 Skill 中挑选最匹配的资产。\n- 预期输出：候选角色或 Skill 列表，每项包含适用场景、证据路径、风险边界和是否需要安装后验证。\n\n```text\n请读取 role_skill_index，根据我的目标任务推荐 3-5 个最相关的角色或 Skill。每个推荐都要说明适用场景、可能输出、风险边界和 evidence_refs。\n```\n\n### 风险预检\n\n- 目标：安装或引入前识别环境、权限、规则冲突和质量风险。\n- 预期输出：环境、权限、依赖、许可、宿主冲突、质量风险和未知项的检查清单。\n\n```text\n请基于 risk_card、boundaries 和 quick_start_candidates，给我一份安装前风险预检清单。不要替我执行命令，只说明我应该检查什么、为什么检查、失败会有什么影响。\n```\n\n### 宿主 AI 开工指令\n\n- 目标：把项目上下文转成一次对话开始前的宿主 AI 指令。\n- 预期输出：一段边界明确、证据引用明确、适合复制给宿主 AI 的开工前指令。\n\n```text\n请基于 website 的 AI Context Pack，生成一段我可以粘贴给宿主 AI 的开工前指令。这段指令必须遵守 not_runtime=true，不能声称项目已经安装、运行或产生真实结果。\n```\n\n\n## 角色 / Skill 索引\n\n- 共索引 8 个角色 / Skill / 项目文档条目。\n\n- **Agent Skill Index**（project_doc）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.md`\n- **Getting Started**（project_doc）：This is a Next.js https://nextjs.org project bootstrapped with create-next-app https://nextjs.org/docs/app/api-reference/cli/create-next-app . 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`website/README.md`\n- **Contributing to Agent Skill Index 🐍🍎**（project_doc）：Contributing to Agent Skill Index 🐍🍎 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`CONTRIBUTING.md`\n- **Agent Skill Index**（project_doc）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.es.md`\n- **Agent Skill Index**（project_doc）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.ja.md`\n- **Agent Skill Index**（project_doc）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.ko.md`\n- **Agent Skill Index**（project_doc）：English README.md 繁体中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.zh-CN.md`\n- **Agent Skill Index**（project_doc）：English README.md 繁體中文 README.zh-TW.md 簡體中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 激活提示：当用户需要理解项目结构、安装方式或边界时参考。 证据：`README.zh-TW.md`\n\n## 证据索引\n\n- 共索引 19 条证据。\n\n- **Agent Skill Index**（documentation）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.md`\n- **Getting Started**（documentation）：This is a Next.js https://nextjs.org project bootstrapped with create-next-app https://nextjs.org/docs/app/api-reference/cli/create-next-app . 证据：`website/README.md`\n- **Package**（package_manifest）：{ \"name\": \"website\", \"version\": \"0.1.0\", \"private\": true, \"scripts\": { \"dev\": \"next dev\", \"build\": \"next build\", \"start\": \"next start\", \"lint\": \"eslint\" }, \"dependencies\": { \"@react-three/drei\": \"^10.7.7\", \"@react-three/fiber\": \"^9.5.0\", \"@vercel/analytics\": \"^2.0.1\", \"@vercel/speed-insights\": \"^2.0.0\", \"clsx\": \"^2.1.1\", \"d3\": \"^7.9.0\", \"framer-motion\": \"^12.38.0\", \"lucide-react\": \"^1.7.0\", \"next\": \"16.2.2\", \"next-themes\": \"^0.4.6\", \"react\": \"19.2.4\", \"react-dom\": \"19.2.4\", \"tailwind-merge\": \"^3.5.0\", \"three\": \"^0.183.2\" }, \"devDependencies\": { \"@tailwindcss/postcss\": \"^4\", \"@types/d3\": \"^7.4.3\", \"@types/node\": \"^20\", \"@types/react\": \"^19\", \"@types/react-dom\": \"^19\", \"@types/three\": \"^0.183… 证据：`website/package.json`\n- **Contributing to Agent Skill Index 🐍🍎**（documentation）：Contributing to Agent Skill Index 🐍🍎 证据：`CONTRIBUTING.md`\n- **License**（source_file）：Copyright c 2026 Hailey Cheng Cheng Hei Lam 证据：`LICENSE`\n- **Agent Skill Index**（documentation）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.es.md`\n- **Agent Skill Index**（documentation）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.ja.md`\n- **Agent Skill Index**（documentation）：English README.md 繁體中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.ko.md`\n- **Agent Skill Index**（documentation）：English README.md 繁体中文 README.zh-TW.md 简体中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.zh-CN.md`\n- **Agent Skill Index**（documentation）：English README.md 繁體中文 README.zh-TW.md 簡體中文 README.zh-CN.md 日本語 README.ja.md 한국어 README.ko.md Español README.es.md 证据：`README.zh-TW.md`\n- **Vercel**（structured_config）：{ \"outputDirectory\": \"website\" } 证据：`vercel.json`\n- **Tsconfig**（structured_config）：{ \"compilerOptions\": { \"target\": \"ES2017\", \"lib\": \"dom\", \"dom.iterable\", \"esnext\" , \"allowJs\": true, \"skipLibCheck\": true, \"strict\": true, \"noEmit\": true, \"esModuleInterop\": true, \"module\": \"esnext\", \"moduleResolution\": \"bundler\", \"resolveJsonModule\": true, \"isolatedModules\": true, \"jsx\": \"react-jsx\", \"incremental\": true, \"plugins\": { \"name\": \"next\" } , \"paths\": { \"@/ \": \"./src/ \" } }, \"include\": \"next-env.d.ts\", \" / .ts\", \" / .tsx\", \".next/types/ / .ts\", \".next/dev/types/ / .ts\", \" / .mts\" , \"exclude\": \"node modules\" } 证据：`website/tsconfig.json`\n- **Vercel**（structured_config）：{ \"framework\": \"nextjs\", \"outputDirectory\": \".next\" } 证据：`website/vercel.json`\n- **.gitignore**（source_file）：.DS Store 证据：`.gitignore`\n- **See https://help.github.com/articles/ignoring-files/ for more about ignoring files.**（source_file）：See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 证据：`website/.gitignore`\n- **Eslint.Config**（source_file）：import { defineConfig, globalIgnores } from \"eslint/config\"; import nextVitals from \"eslint-config-next/core-web-vitals\"; import nextTs from \"eslint-config-next/typescript\"; 证据：`website/eslint.config.mjs`\n- **theme-toggle{**（source_file）：Agent Skill Index — The Ultimate AI Agent Skills List & Tutorials 🐍🍎 \"/ , ::before, ::after{box-sizing:border-box;margin:0;padding:0} 证据：`website/index.html`\n- **Next.Config**（source_file）：import type { NextConfig } from \"next\"; 证据：`website/next.config.ts`\n- **Postcss.Config**（source_file）：const config = { plugins: { \"@tailwindcss/postcss\": {}, }, }; 证据：`website/postcss.config.mjs`\n\n## 宿主 AI 必须遵守的规则\n\n- **把本资产当作开工前上下文，而不是运行环境。**：AI Context Pack 只包含证据化项目理解，不包含目标项目的可执行状态。 证据：`README.md`, `website/README.md`, `website/package.json`\n- **回答用户时区分可预览内容与必须安装后才能验证的内容。**：安装前体验的消费者价值来自降低误装和误判，而不是伪装成真实运行。 证据：`README.md`, `website/README.md`, `website/package.json`\n\n## 用户开工前应该回答的问题\n\n- 你准备在哪个宿主 AI 或本地环境中使用它？\n- 你只是想先体验工作流，还是准备真实安装？\n- 你最在意的是安装成本、输出质量、还是和现有规则的冲突？\n\n## 验收标准\n\n- 所有能力声明都能回指到 evidence_refs 中的文件路径。\n- AI_CONTEXT_PACK.md 没有把预览包装成真实运行。\n- 用户能在 3 分钟内看懂适合谁、能做什么、如何开始和风险边界。\n\n---\n\n## Doramagic Context Augmentation\n\n下面内容用于强化 Repomix/AI Context Pack 主体。Human Manual 只提供阅读骨架；踩坑日志会被转成宿主 AI 必须遵守的工作约束。\n\n## Human Manual 骨架\n\n使用规则：这里只是项目阅读路线和显著性信号，不是事实权威。具体事实仍必须回到 repo evidence / Claim Graph。\n\n宿主 AI 硬性规则：\n- 不得把页标题、章节顺序、摘要或 importance 当作项目事实证据。\n- 解释 Human Manual 骨架时，必须明确说它只是阅读路线/显著性信号。\n- 能力、安装、兼容性、运行状态和风险判断必须引用 repo evidence、source path 或 Claim Graph。\n\n- **Project Introduction**：importance `high`\n  - source_paths: README.md, CONTRIBUTING.md\n- **Quick Start Guide**：importance `high`\n  - source_paths: README.md, website/src/components/sections/HowItWorks.tsx\n- **Compatible Agents**：importance `high`\n  - source_paths: README.md, website/src/components/sections/CompatibleAgents.tsx\n- **Next.js Website Structure**：importance `high`\n  - source_paths: website/next.config.ts, website/tsconfig.json, website/src/app/layout.tsx, website/src/app/page.tsx\n- **Component Architecture**：importance `medium`\n  - source_paths: website/src/components/LayoutShell.tsx, website/src/components/Navbar.tsx, website/src/components/Footer.tsx, website/src/components/WikiSidebar.tsx, website/src/components/sections/SkillDirectory.tsx\n- **Skill Directories**：importance `high`\n  - source_paths: README.md, website/src/components/sections/SkillDirectory.tsx\n- **Skill Quality Standards**：importance `medium`\n  - source_paths: README.md, website/src/components/sections/QualityStandards.tsx\n- **Using and Creating Skills**：importance `high`\n  - source_paths: README.md, website/src/components/sections/UsingSkills.tsx, website/src/components/sections/CreatingSkills.tsx, CONTRIBUTING.md\n\n## Repo Inspection Evidence / 源码检查证据\n\n- repo_clone_verified: true\n- repo_inspection_verified: true\n- repo_commit: `de9056857eb0e96da833469d2ee3ac392058225d`\n- inspected_files: `README.md`\n\n宿主 AI 硬性规则：\n- 没有 repo_clone_verified=true 时，不得声称已经读过源码。\n- 没有 repo_inspection_verified=true 时，不得把 README/docs/package 文件判断写成事实。\n- 没有 quick_start_verified=true 时，不得声称 Quick Start 已跑通。\n\n## Doramagic Pitfall Constraints / 踩坑约束\n\n这些规则来自 Doramagic 发现、验证或编译过程中的项目专属坑点。宿主 AI 必须把它们当作工作约束，而不是普通说明文字。\n\n### Constraint 1: 仓库名和安装名不一致\n\n- Trigger: 仓库名 `awesome-agent-skills` 与安装入口 `skills` 不完全一致。\n- Host AI rule: 在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。\n- Why it matters: 用户照着仓库名搜索包或照着包名找仓库时容易走错入口。\n- Evidence: identity.distribution | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | repo=awesome-agent-skills; install=skills\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 2: 可能修改宿主 AI 配置\n\n- Trigger: 项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。\n- Host AI rule: 列出会写入的配置文件、目录和卸载/回滚步骤。\n- Why it matters: 安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。\n- Evidence: capability.host_targets | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | host_targets=claude\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 3: 能力判断依赖假设\n\n- Trigger: README/documentation is current enough for a first validation pass.\n- Host AI rule: 将假设转成下游验证清单。\n- Why it matters: 假设不成立时，用户拿不到承诺的能力。\n- Evidence: capability.assumptions | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | README/documentation is current enough for a first validation pass.\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 4: 维护活跃度未知\n\n- Trigger: 未记录 last_activity_observed。\n- Host AI rule: 补 GitHub 最近 commit、release、issue/PR 响应信号。\n- Why it matters: 新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- Evidence: evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | last_activity_observed missing\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 5: 下游验证发现风险项\n\n- Trigger: no_demo\n- Host AI rule: 进入安全/权限治理复核队列。\n- Why it matters: 下游已经要求复核，不能在页面中弱化。\n- Evidence: downstream_validation.risk_items | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 6: 存在评分风险\n\n- Trigger: no_demo\n- Host AI rule: 把风险写入边界卡，并确认是否需要人工复核。\n- Why it matters: 风险会影响是否适合普通用户安装。\n- Evidence: risks.scoring_risks | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 7: 来源证据：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n\n- Trigger: GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n- Host AI rule: 来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。\n- Why it matters: 可能影响授权、密钥配置或安全边界。\n- Evidence: community_evidence:github | cevd_dc99192b4a9b4b8089f4f6696f332a7d | https://github.com/heilcheng/awesome-agent-skills/issues/218 | 来源讨论提到 api key 相关条件，需在安装/试用前复核。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 8: 来源证据：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n\n- Trigger: GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n- Host AI rule: 来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- Why it matters: 可能影响授权、密钥配置或安全边界。\n- Evidence: community_evidence:github | cevd_0703404b82014fe3baddd3eaab1100bd | https://github.com/heilcheng/awesome-agent-skills/issues/226 | 来源讨论提到 npm 相关条件，需在安装/试用前复核。\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 9: issue/PR 响应质量未知\n\n- Trigger: issue_or_pr_quality=unknown。\n- Host AI rule: 抽样最近 issue/PR，判断是否长期无人处理。\n- Why it matters: 用户无法判断遇到问题后是否有人维护。\n- Evidence: evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | issue_or_pr_quality=unknown\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n\n### Constraint 10: 发布节奏不明确\n\n- Trigger: release_recency=unknown。\n- Host AI rule: 确认最近 release/tag 和 README 安装命令是否一致。\n- Why it matters: 安装命令和文档可能落后于代码，用户踩坑概率升高。\n- Evidence: evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | release_recency=unknown\n- Hard boundary: 不要把这个坑点包装成已解决、已验证或可忽略，除非后续验证证据明确证明它已经关闭。\n",
      "summary": "给宿主 AI 的上下文和工作边界。",
      "title": "AI Context Pack / 带给我的 AI"
    },
    "boundary_risk_card": {
      "asset_id": "boundary_risk_card",
      "filename": "BOUNDARY_RISK_CARD.md",
      "markdown": "# Boundary & Risk Card / 安装前决策卡\n\n项目：heilcheng/awesome-agent-skills\n\n## Doramagic 试用结论\n\n当前结论：可以进入发布前推荐检查；首次使用仍应从最小权限、临时目录和可回滚配置开始。\n\n## 用户现在可以做\n\n- 可以先阅读 Human Manual，理解项目目的和主要工作流。\n- 可以复制 Prompt Preview 做安装前体验；这只验证交互感，不代表真实运行。\n- 可以把官方 Quick Start 命令放到隔离环境中验证，不要直接进主力环境。\n\n## 现在不要做\n\n- 不要把 Prompt Preview 当成项目实际运行结果。\n- 不要把 metadata-only validation 当成沙箱安装验证。\n- 不要把未验证能力写成“已支持、已跑通、可放心安装”。\n- 不要在首次试用时交出生产数据、私人文件、真实密钥或主力配置目录。\n\n## 安装前检查\n\n- 宿主 AI 是否匹配：claude\n- 官方安装入口状态：已发现官方入口\n- 是否在临时目录、临时宿主或容器中验证：必须是\n- 是否能回滚配置改动：必须能\n- 是否需要 API Key、网络访问、读写文件或修改宿主配置：未确认前按高风险处理\n- 是否记录了安装命令、实际输出和失败日志：必须记录\n\n## 当前阻塞项\n\n- review_required: community_discussion_evidence_below_public_threshold\n\n## 项目专属踩坑\n\n- 仓库名和安装名不一致（medium）：用户照着仓库名搜索包或照着包名找仓库时容易走错入口。 建议检查：在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。\n- 可能修改宿主 AI 配置（medium）：安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。 建议检查：列出会写入的配置文件、目录和卸载/回滚步骤。\n- 能力判断依赖假设（medium）：假设不成立时，用户拿不到承诺的能力。 建议检查：将假设转成下游验证清单。\n- 维护活跃度未知（medium）：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 下游验证发现风险项（medium）：下游已经要求复核，不能在页面中弱化。 建议检查：进入安全/权限治理复核队列。\n\n## 风险与权限提示\n\n- no_demo: medium\n\n## 证据缺口\n\n- 暂未发现结构化证据缺口。\n",
      "summary": "安装、权限、验证和推荐前风险。",
      "title": "Boundary & Risk Card / 边界与风险卡"
    },
    "human_manual": {
      "asset_id": "human_manual",
      "filename": "HUMAN_MANUAL.md",
      "markdown": "# https://github.com/heilcheng/awesome-agent-skills 项目说明书\n\n生成时间：2026-05-15 16:29:49 UTC\n\n## 目录\n\n- [Project Introduction](#project-introduction)\n- [Quick Start Guide](#quick-start-guide)\n- [Compatible Agents](#compatible-agents)\n- [Next.js Website Structure](#nextjs-structure)\n- [Component Architecture](#component-architecture)\n- [Skill Directories](#skill-directories)\n- [Skill Quality Standards](#skill-quality-standards)\n- [Using and Creating Skills](#using-creating-skills)\n- [Internationalization (i18n)](#internationalization)\n- [Deployment Configuration](#deployment-config)\n\n<a id='project-introduction'></a>\n\n## Project Introduction\n\n### 相关页面\n\n相关主题：[Quick Start Guide](#quick-start-guide), [Compatible Agents](#compatible-agents)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [CONTRIBUTING.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n</details>\n\n# Project Introduction\n\n## Overview\n\n**awesome-agent-skills** is a curated, community-maintained collection of AI agent skills designed to extend the capabilities of AI assistants across multiple platforms. The repository serves as a central directory where developers and users can discover, share, and deploy reusable skill packages for various AI agent implementations.\n\n资料来源：[website/index.html]()\n\n### What Are Agent Skills?\n\nAgent Skills are portable instruction files that teach AI assistants how to perform specific tasks. Think of them as **loadable expertise**: domain knowledge, team conventions, and repeatable workflows that your agent can access exactly when needed.\n\nThe skill format was originally developed by Anthropic and released as an open standard. It has since been adopted by over 30 agent products, making skills a truly cross-platform solution for extending AI capabilities.\n\n资料来源：[website/index.html]()\n\n---\n\n## Project Purpose and Scope\n\n### Primary Objectives\n\n| Objective | Description |\n|-----------|-------------|\n| **Discovery** | Provide a searchable directory of high-quality agent skills |\n| **Sharing** | Enable easy distribution of skills via GitHub repositories |\n| **Compatibility** | Support 30+ agent platforms without modification |\n| **Quality** | Establish standards for skill authorship and documentation |\n\n资料来源：[README.ko.md]()\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n### Target Audiences\n\nThe project serves three distinct user groups:\n\n1. **Complete Newcomers** — Users who simply want to add capabilities to their AI assistant by copying a GitHub URL\n2. **Teams and Enterprises** — Organizations capturing institutional knowledge in version-controlled, portable packages\n3. **Skill Authors** — Developers building reusable capabilities to deploy across multiple agents\n\n资料来源：[website/index.html]()\n\n---\n\n## Architecture Overview\n\n### Skill Package Structure\n\nEach skill is a folder containing a `SKILL.md` file with YAML frontmatter metadata and Markdown body instructions.\n\n```\nmy-skill/\n├── SKILL.md          # Required: metadata + instructions\n└── scripts/          # Optional: executable helper scripts\n    └── run.sh\n```\n\n资料来源：[website/index.html]()\n\n### Progressive Disclosure Model\n\nAgent Skills utilize a two-stage loading mechanism to maintain performance:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Discovery Phase]\n    B --> C[Load name + description<br/>~50-100 tokens per skill]\n    C --> D[Lightweight scan complete<br/>No instructions loaded]\n    D --> E[User Task Request]\n    E --> F{Task matches<br/>skill description?}\n    F -->|Yes| G[Activation Phase]\n    F -->|No| H[Standard Response]\n    G --> I[Load full SKILL.md<br/>+ scripts into context]\n    I --> J[Execute Skill Instructions]\n```\n\nThis design ensures agents remain fast while having access to extensive knowledge on demand.\n\n资料来源：[website/index.html]()\n\n---\n\n## Core Components\n\n### 1. The SKILL.md Format\n\nThe `SKILL.md` file is the fundamental building block of the agent skills ecosystem. It combines metadata (in YAML frontmatter) with instructional content (in Markdown body).\n\n#### Frontmatter Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `name` | Yes | Lowercase alphanumeric + hyphens, 1-64 characters |\n| `description` | Yes | 1-1024 characters; triggers skill activation |\n| `license` | No | License name or reference to bundled file |\n| `compatibility` | No | 1-500 characters describing requirements |\n| `allowed-tools` | No | Space-delimited list of pre-approved tools |\n| `metadata` | No | Arbitrary key-value pairs for additional info |\n\n资料来源：[website/index.html]()\n\n#### Minimal SKILL.md Example\n\n```yaml\n---\nname: roll-dice\ndescription: Roll dice using a random number generator. Use when asked to roll a die (d6, d20, etc.).\n---\n\nTo roll a die, run:\n```bash\necho $((RANDOM % <sides> + 1))\n```\n```\n\n资料来源：[website/index.html]()\n\n### 2. Complete SKILL.md Example\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py)\n- Password-protected files need scripts/unlock.py\n```\n\n资料来源：[website/index.html]()\n\n### 3. Website Directory\n\nThe [website/](https://github.com/heilcheng/awesome-agent-skills/tree/main/website) directory contains a Next.js application that provides:\n\n- Interactive skill directory with search functionality\n- SKILL.md format reference documentation\n- Quality standards guidelines\n- \"How to use skills\" tutorials\n- Compatible agents listing\n\nThe website dynamically renders skills from the repository into searchable cards for easy discovery.\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n### 4. CLI Tool Integration\n\nThe project supports the `npx skills` CLI tool (from [vercel-labs/skills](https://github.com/vercel-labs/skills)) for managing skills locally:\n\n| Command | Description |\n|---------|-------------|\n| `npx skills find [query]` | Search for relevant skills |\n| `npx skills add <owner/repo>` | Add a skill from GitHub |\n| `npx skills list` | List installed skills |\n| `npx skills check` | Check for updates |\n| `npx skills update` | Upgrade all skills |\n| `npx skills remove [name]` | Remove a skill |\n\n资料来源：[README.ko.md]()\n\n---\n\n## Compatible Agent Platforms\n\nAgent Skills is an open standard adopted by leading AI development tools. Skills created for this ecosystem work across all supported platforms without modification.\n\n| Platform | Status |\n|----------|--------|\n| Claude Code | Fully supported |\n| Claude.ai | Fully supported |\n| OpenAI Codex | Fully supported |\n| GitHub Copilot | Fully supported |\n| Cursor | Fully supported |\n| Gemini CLI | Fully supported |\n\n资料来源：[website/index.html]()\n资料来源：[README.ko.md]()\n\n---\n\n## Skill Storage Locations\n\nSkills can be placed in multiple directories depending on your agent platform:\n\n```mermaid\ngraph LR\n    A[User Home] --> B[~/.claude/skills/]\n    A --> C[~/.agents/skills/]\n    D[Project Root] --> E[.github/skills/]\n    D --> F[.agents/skills/]\n    \n    B --> G[Claude-specific]\n    C --> H[Generic agents]\n    E --> I[GitHub-integrated]\n    F --> H\n```\n\n| Location | Typical Use |\n|----------|-------------|\n| `~/.claude/skills/` | Claude Code/Claude.ai skills |\n| `~/.agents/skills/` | Generic agent tools |\n| `.github/skills/` | Repository-specific skills (Cursor, Claude Code) |\n| `.agents/skills/` | Project-local skills |\n\n资料来源：[website/index.html]()\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n---\n\n## Quality Standards\n\nThe project maintains quality standards for contributed skills:\n\n### Recommended Skill Structure\n\n| Section | Purpose |\n|---------|---------|\n| **When to use this skill** | Trigger conditions, scope, and limitations |\n| **Instructions** | Step-by-step procedure; be explicit |\n| **Gotchas** | Environment-specific facts that defy expectations |\n| **Examples** | Concrete input → output pairs |\n| **Validation** | How to verify the output is correct |\n\n### Best Practices\n\n| # | Guideline | Description |\n|---|-----------|-------------|\n| 01 | Be concrete, not conceptual | Use specific names, paths, and commands |\n| 02 | Design coherent scope | Aim for under 500 lines, under 5,000 tokens |\n| 03 | Add what agents lack | Focus on project conventions and edge cases |\n| 04 | Be prescriptive when needed | Strict for fragile or irreversible operations |\n| 05 | Make scripts agent-friendly | Non-interactive, structured output, meaningful exit codes |\n| 06 | Build validation loops | Have the agent verify its own work before returning |\n\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n资料来源：[website/index.html]()\n\n---\n\n## Workflow: Using a Skill\n\n```mermaid\nsequenceDiagram\n    participant U as User\n    participant A as AI Agent\n    participant G as GitHub\n    participant S as Skill Directory\n    \n    U->>A: Find desired skill in directory\n    U->>G: Copy skill GitHub URL\n    U->>A: Paste URL or use /skills add command\n    A->>G: Fetch SKILL.md content\n    G-->>A: Return skill file\n    A->>S: Store skill in local skills directory\n    U->>A: Request task matching skill\n    A->>S: Load skill (activation)\n    A->>U: Execute skill instructions\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n---\n\n## Contributing\n\nThe project welcomes contributions from the community. Contributors should:\n\n1. Follow the SKILL.md format specification\n2. Ensure skills work across multiple agent platforms\n3. Include clear instructions and validation steps\n4. Test skills before submitting\n\n资料来源：[CONTRIBUTING.md]()\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n---\n\n## Summary\n\n**awesome-agent-skills** is more than just a list — it's a gateway to extending AI agent capabilities through a standardized, portable, and community-driven approach. By understanding the core concepts of:\n\n- **SKILL.md format** with its YAML frontmatter and Markdown body\n- **Progressive disclosure** for performance optimization\n- **Multi-platform compatibility** across 30+ agents\n- **Quality standards** for reliable skill authorship\n\n...you can effectively leverage and contribute to this growing ecosystem of AI agent capabilities.\n\n资料来源：[website/index.html]()\n资料来源：[README.ko.md]()\n\n---\n\n<a id='quick-start-guide'></a>\n\n## Quick Start Guide\n\n### 相关页面\n\n相关主题：[Project Introduction](#project-introduction), [Using and Creating Skills](#using-creating-skills)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n</details>\n\n# Quick Start Guide\n\n## Overview\n\nThe **Agent Skill Index** is a curated collection of AI agent skills—portable instruction files that teach AI assistants how to perform specific tasks. Skills are designed as `SKILL.md` files containing YAML frontmatter and plain-English instructions that agents can load on demand.\n\nThe repository serves three primary audiences:\n\n| Audience | Use Case |\n|----------|----------|\n| **Complete newcomers** | Find a skill, copy its GitHub URL, paste it into an AI chat |\n| **Teams and enterprises** | Capture organizational knowledge in portable, version-controlled packages |\n| **Skill authors** | Build capabilities once and deploy across any skills-compatible agent |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Three-Step Workflow\n\nGetting started with Agent Skills follows a simple three-step process:\n\n```mermaid\ngraph TD\n    A[Find a Skill] --> B[Load into AI]\n    B --> C[Ask in Plain English]\n```\n\n### Step 1: Find a Skill\n\nBrowse the skills directory on the website. Skills are organized by category including development, data, automation, and security. Each card links directly to the skill on GitHub.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### Step 2: Load It Into Your AI\n\nCopy the GitHub URL and add it to your AI agent. Each platform supports different methods:\n\n| Platform | Command / Method |\n|----------|------------------|\n| **Claude Code** | `/skills add <github-url>` |\n| **Claude.ai** | Paste raw SKILL.md URL in chat |\n| **Other CLI tools** | `npx skills add anthropics/skills/docx` |\n\nAlternatively, you can manually place skill folders into supported directories:\n\n```\n.github/skills/skill-name/\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n\n### Step 3: Ask in Plain English\n\nSimply tell your AI what you want. The agent reads the skill instructions automatically and executes accordingly. No commands to memorize, no configuration required.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## SKILL.md Format\n\nEvery skill is a folder containing a `SKILL.md` file. The file uses YAML frontmatter followed by plain Markdown content.\n\n### Required Frontmatter Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `name` | Required | Lowercase alphanumeric + hyphens only, 1–64 characters, must match parent directory |\n| `description` | Required | 1–256 characters describing when to use the skill |\n\n### Optional Frontmatter Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `license` | Optional | License identifier (e.g., Apache-2.0) |\n| `compatibility` | Optional | Environment requirements |\n| `version` | Optional | Semantic version string |\n| `allowed-tools` | Optional · Experimental | Space-delimited list of pre-approved tools (e.g., `Bash(git:*) Read Write`) |\n\n### Recommended Body Structure\n\nThe Markdown body is free-form, but the documentation recommends these sections:\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### Minimal Example\n\n```yaml\n---\nname: roll-dice\ndescription: Roll dice using a random number generator. Use when asked to roll a die (d6, d20, etc.).\n---\n\nTo roll a die, run:\n```bash\necho $((RANDOM % <sides> + 1))\n```\n```\n\n### Complete Example\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py, not scripts/extract.py)\n- Password-protected PDFs need decryption first\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## How Skills Load\n\nThe system uses **progressive disclosure** for efficiency:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Lightweight Scan]\n    B --> C[Load name + description only]\n    C --> D[~50-100 tokens per skill]\n    D --> E[Task Matches Description?]\n    E -->|Yes| F[Load Full SKILL.md]\n    E -->|No| G[Stay Unloaded]\n    F --> H[Execute Instructions]\n```\n\nAt startup, agents load only the `name` and `description` of every available skill. Full instructions are loaded only when a task matches a skill's description.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Compatible Platforms\n\nAgent Skills is an open standard adopted by 30+ platforms:\n\n| Category | Platforms |\n|----------|-----------|\n| Anthropic | Claude Code, Claude.ai |\n| OpenAI | Codex |\n| Microsoft | GitHub Copilot |\n| Others | Cursor, Gemini CLI, and more |\n\nSkills you create work across all these platforms without modification.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Creating Your First Skill\n\nTo create a skill:\n\n1. **Create a folder** named after your skill (lowercase, hyphens only)\n2. **Add `SKILL.md`** inside with required frontmatter\n3. **Write instructions** in plain English below\n4. **Place the folder** in `.claude/skills/` or `.github/skills/` depending on your AI tool\n\nFor detailed guidelines, refer to the [Creating Custom Skills documentation](https://support.claude.com/en/articles/12512198-creating-custom-skills).\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Quality Standards\n\nHigh-quality skills follow these patterns:\n\n| Pattern | Example |\n|---------|---------|\n| **Good** | \"Before committing, run tests and confirm green. If tests fail, fix then re-run.\" |\n| **Bad** | Vague or incomplete instructions without validation steps |\n\nScripts within skills should be designed to be agent-friendly:\n\n- Avoid interactive prompts\n- Use structured output (JSON/CSV)\n- Write errors to stderr\n- Exit with meaningful codes\n\n资料来源：[website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n\n## Adding Optional Scripts\n\nPlace executable files in a `scripts/` subdirectory. Scripts can use PEP 723 inline dependencies:\n\n```bash\n#!/usr/bin/env -S uv run\n# /// script\n# requires-python = \">= 3.11\"\n# dependencies = [\"requests\", \"rich\"]\n# ///\nimport sys, json\nprint(json.dumps({\"result\": \"ok\"}))\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Learning Resources\n\nThe repository provides tutorials for different experience levels:\n\n| Tutorial | Platform | Description |\n|----------|----------|-------------|\n| Building your first MCP server | Model Context Protocol | Step-by-step guide to creating MCP servers |\n\nAdditional resources are available through the [Tutorials section](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx).\n\n资料来源：[website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n\n## Contributing\n\nTo contribute new skills or improve existing ones:\n\n1. Read the [Contributing Guide](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n2. Review quality standards before submission\n3. Use GitHub Discussions for questions and ideas\n\n资料来源：[website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n\n## Quick Reference\n\n| Item | Command / Path |\n|------|----------------|\n| Skills directory | `.claude/skills/` or `.github/skills/` |\n| Add via CLI | `npx skills add <github-url>` |\n| Add via Claude Code | `/skills add <github-url>` |\n| Manual path | `.github/skills/skill-name/` |\n| Required files | `SKILL.md` with `name` and `description` |\n| Optional directory | `scripts/` for executable files |\n\n资料来源：[website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n---\n\n<a id='compatible-agents'></a>\n\n## Compatible Agents\n\n### 相关页面\n\n相关主题：[Project Introduction](#project-introduction), [Skill Directories](#skill-directories)\n\n<details>\n<summary>Relevant Source Files</summary>\n\nThe following source files were used to generate this page:\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n</details>\n\n# Compatible Agents\n\nAgent Skills is an open standard that has been adopted by leading AI development tools and platforms. This document provides a comprehensive overview of the compatible agents ecosystem, explaining how skills work across different platforms, the supported agent list, and how to leverage cross-platform compatibility.\n\n## Overview\n\nAgent Skills were originally developed by Anthropic as an open standard for packaging and distributing reusable instructions for AI assistants. The format was designed with portability as a core principle — skills created for one agent platform can work seamlessly on any other platform that implements the specification.\n\nThe ecosystem now includes **30+ agent products** that support the SKILL.md format. This widespread adoption means that skill authors can write instructions once and deploy them across multiple platforms without modification, while users can share and discover skills that work with their preferred AI tools.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## How Skills Work Across Platforms\n\nThe Agent Skills system uses a lightweight discovery mechanism that enables cross-platform compatibility. At startup, agents scan configured directories and load only the `name` and `description` fields from each skill's SKILL.md file — approximately 50–100 tokens per skill. This keeps startup performance fast while allowing the agent to know what capabilities are available.\n\nWhen a user's task matches a skill's description, the agent loads the complete SKILL.md file into context, executing the instructions and using any provided scripts. This on-demand loading pattern ensures that skills are only consumed when relevant, maintaining efficient resource usage.\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Scan Skills Directories]\n    B --> C[Load name + description only]\n    C --> D[Skill Discovery Complete]\n    D --> E[User Request]\n    E --> F{Does request match skill?}\n    F -->|Yes| G[Load Full SKILL.md]\n    F -->|No| H[Process without skill]\n    G --> I[Execute Instructions]\n    H --> J[Return Response]\n    I --> J\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Supported Agent Platforms\n\nThe following table lists the major agent platforms that support the Agent Skills standard:\n\n| Platform | Documentation |\n|----------|---------------|\n| Claude Code | [code.claude.com/docs/en/skills](https://code.claude.com/docs/en/skills) |\n| Claude.ai | [support.claude.com](https://support.claude.com/en/articles/12512180-using-skills-in-claude) |\n| OpenAI Codex | [developers.openai.com](https://developers.openai.com/docs/agents) |\n| GitHub Copilot | [github.com/features/copilot](https://github.com/features/copilot) |\n| Cursor | [cursor.com](https://cursor.com) |\n| Gemini CLI | [google.github.io](https://google.github.io/gemini-cli/) |\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n### Complete Platform List\n\nThe ecosystem includes over 30 platforms that have adopted the Agent Skills standard. Based on the website documentation, the full list of supported platforms includes:\n\n| Category | Platforms |\n|----------|-----------|\n| Anthropic | Claude Code, Claude.ai |\n| OpenAI | Codex |\n| Microsoft | GitHub Copilot |\n| General AI | Cursor, Gemini CLI |\n| Development Tools | Multiple integrated development environments |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skills Installation Methods by Platform\n\nDifferent agent platforms support various methods for adding and managing skills. Understanding these installation methods is essential for effectively using the skill ecosystem.\n\n### Claude Code CLI\n\nFor Claude Code users, skills can be added directly through the command-line interface:\n\n```bash\n/claude/skills add <github-url>\n```\n\n### Claude.ai Web Interface\n\nClaude.ai users can paste the raw SKILL.md URL directly into their chat. The agent automatically detects and loads skill instructions when relevant context is provided.\n\n### Manual File Placement\n\nFor development workflows and offline scenarios, skills can be manually placed in platform-specific directories:\n\n| Platform | Directory Path |\n|----------|---------------|\n| Claude | `.claude/skills/` |\n| GitHub | `.github/skills/` |\n| General Agents | `.agents/skills/` |\n| User Home | `~/.agents/skills/` |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n### npx skills CLI Tool\n\nThe `npx skills` command-line tool provides a unified interface for skill discovery, addition, and management across supported platforms:\n\n| Command | Description |\n|---------|-------------|\n| `npx skills find [query]` | Search for relevant skills |\n| `npx skills add <owner/repo>` | Add a skill from GitHub |\n| `npx skills list` | List installed skills |\n| `npx skills check` | Check for updates |\n| `npx skills update` | Update all skills |\n| `npx skills remove [skill-name]` | Remove a skill |\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\nThe tool supports multiple input formats:\n- **GitHub shorthand**: `owner/repo`\n- **Full URLs**: `https://github.com/owner/repo`\n- **Local paths**: Relative or absolute file paths\n\n## Cross-Platform Compatibility Architecture\n\nThe Agent Skills specification defines a standard format that ensures compatibility across all implementing platforms. This architecture consists of several layers:\n\n```mermaid\ngraph TD\n    A[SKILL.md File] --> B[Frontmatter Metadata]\n    A --> C[Markdown Body]\n    B --> D[name field]\n    B --> E[description field]\n    B --> F[optional fields]\n    C --> G[Instructions]\n    C --> H[Examples]\n    C --> I[Gotchas]\n    C --> J[Validation steps]\n    F --> K[license]\n    F --> L[compatibility]\n    F --> M[allowed-tools]\n```\n\n### Required Frontmatter Fields\n\nEvery SKILL.md file must include the following YAML frontmatter:\n\n| Field | Type | Description | Constraints |\n|-------|------|-------------|-------------|\n| `name` | string | Skill identifier | Lowercase alphanumeric + hyphens, 1–64 characters, must match directory name |\n| `description` | string | Human-readable description | 1–512 characters, used for skill discovery |\n\n### Optional Frontmatter Fields\n\n| Field | Description |\n|-------|-------------|\n| `license` | License identifier (e.g., Apache-2.0) |\n| `compatibility` | Platform-specific requirements or dependencies |\n| `metadata` | Custom metadata including author and version |\n| `allowed-tools` | Pre-approved tools for the skill to use |\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Directory Structure\n\nAgent platforms scan specific directories to discover available skills. The standard directory structure ensures consistent behavior across all supported platforms:\n\n```\n.claude/skills/          # Claude Code and Claude.ai\n.github/skills/          # GitHub-integrated agents\n.agents/skills/          # General agent platforms\n~/.agents/skills/        # User-level skills (user home directory)\n```\n\nWithin each skills directory, skills are organized in subdirectories with the following structure:\n\n```\n<skill-name>/\n└── SKILL.md            # Required: Contains frontmatter + instructions\nscripts/                # Optional: Executable scripts the skill can run\n```\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Platform-Specific Considerations\n\n### Claude Code\n\nClaude Code provides native support for skills through the `/skills` command:\n\n```bash\n/claude/skills add <github-url>\n```\n\nSkills installed via Claude Code are automatically scanned at startup and loaded when relevant.\n\n### Claude.ai Web\n\nClaude.ai users can utilize skills by:\n1. Copying a skill's GitHub URL\n2. Pasting the raw SKILL.md URL into the chat\n\nThe web interface automatically detects skill format and applies instructions as needed.\n\n### Third-Party Platforms\n\nFor platforms like Codex, Copilot, Cursor, and Gemini CLI, the specific skill loading mechanisms may vary. Users should consult individual platform documentation for detailed instructions on skill installation and usage.\n\n资料来源：[website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n\n## Skill Discovery and Management\n\nThe skill ecosystem supports multiple discovery mechanisms to help users find relevant skills:\n\n### Direct URL Addition\n\nUsers can directly add skills by providing GitHub repository URLs or shorthand notation. The agent resolves the URL, fetches the SKILL.md file, and installs it in the appropriate skills directory.\n\n### CLI-Based Discovery\n\nThe `npx skills find [query]` command enables keyword-based search across registered skills. This is particularly useful for discovering skills that address specific use cases or domains.\n\n### Manual Installation\n\nFor offline environments or custom workflows, users can manually download skill folders and place them in the appropriate directory:\n\n```bash\n# Example: Manual skill installation\ncp -r /path/to/downloaded-skill \\\n  ~/.agents/skills/my-skill-name\n```\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n## Verification and Validation\n\nThe Agent Skills ecosystem includes validation mechanisms to ensure skill quality and compatibility:\n\n| Validation Type | Purpose |\n|-----------------|---------|\n| Directory structure check | Verify SKILL.md exists in expected location |\n| Frontmatter validation | Ensure required fields are present and valid |\n| Update checking | `npx skills check` verifies skill versions |\n\nUsers can verify that a skill is correctly installed by checking for the presence of its SKILL.md file:\n\n```bash\nls ~/.agents/skills/my-skill/SKILL.md\n```\n\n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n\n## Related Resources\n\nFor more information about compatible agents and the Agent Skills ecosystem, refer to:\n\n- [Official Specification](https://agentskills.io/specification) — Complete SKILL.md format specification\n- [Creating Skills Guide](https://support.claude.com/en/articles/12512198-creating-custom-skills) — Tutorial for skill authors\n- [Using Skills in Claude](https://support.claude.com/en/articles/12512180-using-skills-in-claude) — Claude.ai user guide\n\n---\n\n<a id='nextjs-structure'></a>\n\n## Next.js Website Structure\n\n### 相关页面\n\n相关主题：[Component Architecture](#component-architecture), [Deployment Configuration](#deployment-config)\n\n<details>\n<summary>Related Source Files</summary>\n\nThe following source files were used to generate this documentation:\n\n- [website/src/lib/i18n.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/lib/i18n.tsx)\n- [website/src/components/sections/HowItWorks.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/HowItWorks.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/sections/CompatibleAgents.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/CompatibleAgents.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n</details>\n\n# Next.js Website Structure\n\n## Overview\n\nThe `awesome-agent-skills` repository includes a Next.js-based website (`/website`) that serves as the public-facing documentation and showcase for agent skills. This web application is built using Next.js 14+ with the App Router paradigm, TypeScript for type safety, and Tailwind CSS for styling. The site provides an interactive interface for exploring agent skills, understanding how they work, and navigating through comprehensive documentation.\n\nThe website architecture follows a component-based modular design where reusable UI sections are organized in `/src/components/sections/`, while shared utilities like internationalization (i18n) live in `/src/lib/`. The application uses the Next.js App Router for routing and leverages server-side rendering capabilities for optimal performance and SEO. 资料来源：[website/src/lib/i18n.tsx]()\n\n## Project Architecture\n\n### Directory Structure\n\nThe website follows a standard Next.js App Router structure:\n\n```\nwebsite/\n├── src/\n│   ├── app/                    # App Router pages and layouts\n│   ├── components/            # Reusable React components\n│   │   ├── sections/          # Page section components\n│   │   ├── Footer.tsx         # Global footer component\n│   │   └── WikiSidebar.tsx    # Navigation sidebar\n│   └── lib/                   # Utility functions\n│       └── i18n.tsx           # Internationalization setup\n├── public/                    # Static assets\n├── next.config.ts             # Next.js configuration\n└── tsconfig.json              # TypeScript configuration\n```\n\n### Technology Stack\n\n| Technology | Purpose | Version |\n|------------|---------|---------|\n| Next.js | React framework with App Router | 14+ |\n| TypeScript | Type-safe JavaScript | Latest |\n| Tailwind CSS | Utility-first CSS framework | Latest |\n| framer-motion | Animation library for React | Latest |\n\nThe project utilizes CSS variables for theming, supporting both light and dark modes through Tailwind's dark mode variants. The application uses `next/font` for automatic font optimization, loading Geist font family for consistent typography across the site. 资料来源：[website/README.md]()\n\n## Component Architecture\n\n### Section Components\n\nThe website is composed of modular section components located in `/src/components/sections/`. Each section represents a distinct portion of the page content:\n\n| Component | Purpose | Key Features |\n|-----------|---------|---------------|\n| `HowItWorks.tsx` | Explains the three-step process | Grid layout with step cards |\n| `QualityStandards.tsx` | Defines skill quality criteria | Good vs bad pattern comparison |\n| `CompatibleAgents.tsx` | Lists supported agent platforms | Responsive table layout |\n| `FindingSkills.tsx` | Guides on discovering skills | CLI commands display |\n| `UsingSkills.tsx` | Demonstrates skill usage | Copy-enabled code panels |\n| `SkillDirectory.tsx` | Interactive skills catalog | Animated filtering grid |\n| `CreatingSkills.tsx` | SKILL.md creation guide | Blueprint documentation |\n| `Tutorials.tsx` | Learning resources | Card-based layout |\n| `Contributing.tsx` | Contribution guidelines | CTA buttons and links |\n\n#### Section Component Pattern\n\nEach section component follows a consistent pattern using the `\"use client\"` directive for client-side interactivity:\n\n```typescript\n\"use client\";\n\nimport { useTranslations } from \"@/lib/i18n\";\n\nexport default function SectionName() {\n  const t = useTranslations();\n  \n  return (\n    <section id=\"section-id\" className=\"scroll-mt-20 py-16 border-b ...\">\n      <h2 className=\"...\">{t.section.title}</h2>\n      {/* Section content */}\n    </section>\n  );\n}\n```\n\n资料来源：[website/src/components/sections/HowItWorks.tsx]()\n\n### Navigation Components\n\n#### WikiSidebar.tsx\n\nThe `WikiSidebar` component provides hierarchical navigation within the documentation. It renders a collapsible sidebar with grouped navigation items and supports visual indicators for new content.\n\nKey features include:\n- Hierarchical category grouping\n- \"New\" badge support for recent additions\n- External link indicators\n- Dark mode compatible styling\n- Animated transitions using framer-motion\n\nThe sidebar fetches navigation data from the i18n configuration and renders links with appropriate styling based on their type (internal or external). 资料来源：[website/src/components/WikiSidebar.tsx]()\n\n#### Footer.tsx\n\nThe global footer component provides site-wide information and external links:\n\n- Site branding and copyright information\n- Social media links (GitHub, X/Twitter)\n- Contact email link\n- BibTeX citation format for academic references\n- Call-to-action buttons for main resources\n\n```typescript\nexport default function Footer() {\n  return (\n    <footer className=\"...\">\n      {/* BibTeX citation block */}\n      {/* Social links: GitHub, Twitter, Email */}\n      {/* External resource buttons */}\n    </footer>\n  );\n}\n```\n\n资料来源：[website/src/components/Footer.tsx]()\n\n## Internationalization (i18n)\n\n### i18n Implementation\n\nThe website implements internationalization using a custom i18n solution defined in `/src/lib/i18n.tsx`. The system provides translations for multiple languages including English, Japanese, and presumably Chinese based on the repository's focus.\n\n#### Translation Structure\n\nTranslations are organized hierarchically:\n\n```typescript\nexport const translations = {\n  nav: {\n    title: \"Navigation\",\n    items: [\"Skills\", \"Directory\", \"Standards\", \"Guide\", \"Trends\", \"FAQ\"]\n  },\n  resources: {\n    title: \"Resources\",\n    items: [\n      { label: \"agent-skill.co\", href: \"https://agent-skill.co\" },\n      { label: \"GitHub Repository\", href: \"...\" }\n    ]\n  },\n  how: {\n    title: \"How it works\",\n    subtitle: \"...\",\n    steps: [\n      { step: \"01\", title: \"...\", desc: \"...\" }\n    ]\n  }\n  // Additional translation keys...\n};\n```\n\n#### Translation Hook\n\nComponents access translations through the `useTranslations()` hook:\n\n```typescript\nconst t = useTranslations();\n// Access nested properties\nt.nav.title        // Returns \"Navigation\"\nt.how.steps        // Returns array of step objects\n```\n\n资料来源：[website/src/lib/i18n.tsx]()\n\n### Supported Languages\n\nBased on the i18n file content, the website supports:\n\n| Language | Key Indicators |\n|----------|----------------|\n| English | Default language |\n| Japanese | `ナビゲーション`, `引用` labels |\n| Chinese (implied) | Repository focus on Chinese-speaking developers |\n\n## Styling and Theming\n\n### Tailwind CSS Integration\n\nThe website uses Tailwind CSS with the following configuration:\n\n- Dark mode support via `dark:` class variants\n- Custom color palette using neutral grays\n- Responsive design breakpoints (md, lg)\n- Custom scroll margin for anchor navigation (`scroll-mt-20`)\n\n### Color System\n\nThe styling uses a neutral color system defined through Tailwind classes:\n\n| Element | Light Mode | Dark Mode |\n|---------|------------|-----------|\n| Background | `white` | `neutral-900` |\n| Text Primary | `neutral-900` | `white` |\n| Text Secondary | `neutral-500` | `neutral-400` |\n| Borders | `neutral-200` | `neutral-800` |\n\n### Component Styling Patterns\n\n#### Card Components\n\nSection cards use consistent styling patterns:\n\n```typescript\n<div className=\"p-6 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900\">\n  <h3 className=\"text-base font-semibold ...\">{title}</h3>\n  <p className=\"text-sm text-neutral-500 ...\">{description}</p>\n</div>\n```\n\n#### Table Components\n\nData tables follow a consistent structure:\n\n```typescript\n<table className=\"w-full text-sm\">\n  <thead>\n    <tr className=\"bg-neutral-50 dark:bg-neutral-800 border-b ...\">\n      <th className=\"text-left px-5 py-3 text-xs ...\">Column</th>\n    </tr>\n  </thead>\n  <tbody className=\"divide-y divide-neutral-100 ...\">\n    {/* Rows */}\n  </tbody>\n</table>\n```\n\n资料来源：[website/src/components/sections/QualityStandards.tsx](), [website/src/components/sections/CompatibleAgents.tsx]()\n\n## Page Sections and Content Flow\n\n### Main Page Structure\n\nThe primary page (`/app/page.tsx`) renders sections in a specific order:\n\n```mermaid\ngraph TD\n    A[Hero Section] --> B[How It Works]\n    B --> C[Quality Standards]\n    C --> D[Compatible Agents]\n    D --> E[Finding Skills]\n    E --> F[Using Skills]\n    F --> G[Creating Skills]\n    G --> H[Skill Directory]\n    H --> I[Tutorials]\n    I --> J[Contributing]\n    J --> K[FAQ]\n    K --> L[Footer]\n```\n\n### Section Details\n\n#### How It Works Section\n\nExplains the three-step process for agent skills:\n\n1. **Find** - Discover skills in the directory\n2. **Add** - Add skills to your AI tool\n3. **Use** - Agent automatically applies the skill\n\nEach step is displayed in a card with a large step number, title, and description. 资料来源：[website/src/components/sections/HowItWorks.tsx]()\n\n#### Quality Standards Section\n\nDefines what makes a good agent skill:\n\n- **Good vs Bad Pattern Comparison**: Side-by-side code examples\n- **Pattern Validation**: Shows recommended vs discouraged practices\n- **Icon Indicators**: CheckCircle2 for good, XCircle for bad\n\n```typescript\n// Good pattern\n<p className=\"text-xs font-mono text-neutral-600 ...\">\n  {t.quality.goodPattern}\n</p>\n\n// Bad pattern  \n<p className=\"text-xs font-mono text-neutral-400 ... opacity-70\">\n  {t.quality.badPattern}\n</p>\n```\n\n资料来源：[website/src/components/sections/QualityStandards.tsx]()\n\n#### Skill Directory Section\n\nThe interactive skills catalog features:\n\n- **Framer Motion Integration**: Animated grid with layout animations\n- **Filtering**: Client-side filtering by skill category\n- **Card Design**: Each skill displays name, icon, and external link\n- **Responsive Grid**: `grid-cols-1 md:grid-cols-2` for mobile to desktop\n\n```typescript\n<motion.div layout className=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n  <AnimatePresence mode=\"popLayout\">\n    {filtered.map((skill) => (\n      <motion.a\n        layout\n        key={skill.id}\n        initial={{ opacity: 0, scale: 0.98 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.98 }}\n        transition={{ duration: 0.15 }}\n      >\n        {/* Skill card content */}\n      </motion.a>\n    ))}\n  </AnimatePresence>\n</motion.div>\n```\n\n资料来源：[website/src/components/sections/SkillDirectory.tsx]()\n\n## Interactive Features\n\n### Code Copy Functionality\n\nThe `UsingSkills.tsx` component includes copy-to-clipboard functionality:\n\n```typescript\nconst [copied, setCopied] = useState(false);\n\nconst copyCode = async () => {\n  await navigator.clipboard.writeText(code);\n  setCopied(true);\n  setTimeout(() => setCopied(false), 2000);\n};\n\nreturn (\n  <button onClick={copyCode}>\n    {copied ? <Check className=\"...\" /> : <Copy className=\"...\" />}\n  </button>\n);\n```\n\n资料来源：[website/src/components/sections/UsingSkills.tsx]()\n\n### Active Navigation Highlighting\n\nThe website implements scroll-based active navigation using the Intersection Observer API:\n\n```typescript\nconst navLinks = document.querySelectorAll('.nav-link');\nconst sections = ['newcomer', 'tutorial', 'reference', 'dir-section', 'agents', 'resources'];\n\nconst observer = new IntersectionObserver(entries => {\n  for (const e of entries) {\n    if (e.isIntersecting) {\n      const id = e.target.id;\n      navLinks.forEach(l => {\n        l.classList.toggle('active', l.getAttribute('href') === `#${id}`);\n      });\n    }\n  }\n}, { threshold: 0.2, rootMargin: '-52px 0px 0px 0px' });\n```\n\nThis provides visual feedback as users scroll through different page sections. 资料来源：[website/index.html]()\n\n## Build and Deployment\n\n### Development Workflow\n\n```bash\nnpm run dev    # Start development server\nyarn dev       # Alternative with Yarn\npnpm dev       # Alternative with pnpm\nbun dev        # Alternative with Bun\n```\n\n### Font Optimization\n\nThe project uses `next/font` for automatic font optimization:\n\n```typescript\n// In layout.tsx\nimport { Geist } from \"next/font/google\";\n\n// Font configuration is handled automatically\n```\n\nThis loads the Geist font family and optimizes it for performance, reducing layout shift during page loads.\n\n### Production Build\n\nThe Next.js application can be deployed to Vercel or any Node.js-compatible hosting platform. The standard build process:\n\n```bash\nnpm run build   # Create production build\nnpm start       # Start production server\n```\n\n资料来源：[website/README.md]()\n\n## Summary\n\nThe Next.js website structure for `awesome-agent-skills` demonstrates a well-organized, component-based architecture suitable for documentation and showcase sites. Key architectural decisions include:\n\n- **Modular Sections**: Each page section is a self-contained component\n- **i18n System**: Custom translation hook with hierarchical structure\n- **Theming**: Dark mode support through Tailwind CSS\n- **Animations**: Framer Motion for smooth transitions\n- **Accessibility**: Semantic HTML with proper ARIA attributes\n- **Performance**: Next.js App Router with automatic font optimization\n\nThe architecture prioritizes maintainability and extensibility, making it straightforward to add new sections or modify existing ones. The separation of concerns between presentation components and utility functions (i18n) ensures clean code organization as the project scales.\n\n---\n\n<a id='component-architecture'></a>\n\n## Component Architecture\n\n### 相关页面\n\n相关主题：[Next.js Website Structure](#nextjs-structure), [Internationalization (i18n)](#internationalization)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n- [website/src/components/Navbar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/sections/SkillDirectory.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/SkillDirectory.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/CreatingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/CreatingSkills.tsx)\n- [website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/FindingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/FindingSkills.tsx)\n- [website/src/components/sections/Tutorials.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Tutorials.tsx)\n</details>\n\n# Component Architecture\n\n## Overview\n\nThe awesome-agent-skills website is a Next.js-based documentation and showcase platform built with React and TypeScript. The component architecture follows a modular, section-driven design pattern where reusable UI components are composed into distinct page sections. The project uses Tailwind CSS for styling with dark mode support and framer-motion for animations. 资料来源：[website/src/components/sections/SkillDirectory.tsx:1-50]()\n\n## Directory Structure\n\n```\nwebsite/src/components/\n├── LayoutShell.tsx        # Main layout wrapper\n├── Navbar.tsx             # Top navigation bar\n├── Footer.tsx             # Page footer\n├── WikiSidebar.tsx        # Documentation sidebar navigation\n└── sections/\n    ├── Hero.tsx            # Hero banner section\n    ├── WhatIsIt.tsx        # Project introduction\n    ├── SkillDirectory.tsx # Skills catalog grid\n    ├── UsingSkills.tsx     # Usage instructions\n    ├── CreatingSkills.tsx  # Skill creation guide\n    ├── FindingSkills.tsx   # Skill discovery resources\n    ├── QualityStandards.tsx # Good vs bad patterns\n    ├── Tutorials.tsx        # Interactive tutorials\n    └── Contributing.tsx    # Contribution guide\n```\n\n## Component Hierarchy\n\n```mermaid\ngraph TD\n    A[LayoutShell] --> B[Navbar]\n    A --> C[WikiSidebar]\n    A --> D[Section Components]\n    A --> E[Footer]\n    \n    D --> D1[WhatIsIt]\n    D --> D2[SkillDirectory]\n    D --> D3[UsingSkills]\n    D --> D4[CreatingSkills]\n    D --> D5[FindingSkills]\n    D --> D6[QualityStandards]\n    D --> D7[Tutorials]\n    D --> D8[Contributing]\n    \n    B --> B1[LanguageSelector]\n    B --> B2[ThemeToggle]\n    B --> B3[GitHubStars]\n```\n\n## Core Layout Components\n\n### LayoutShell\n\nThe `LayoutShell` component serves as the main application wrapper that orchestrates all other components. It integrates the `Navbar`, `WikiSidebar`, page sections, and `Footer` into a cohesive layout structure.\n\n### Navbar\n\nThe `Navbar` component provides top-level navigation and global controls. Key features include:\n\n| Feature | Implementation |\n|---------|----------------|\n| GitHub Stars Display | Parses and formats star count (e.g., \"1.2k\") |\n| Language Selector | Dropdown with flag icons using `LANGUAGES` array |\n| Theme Toggle | Dark/light mode switching |\n\n资料来源：[website/src/components/Navbar.tsx:1-40]()\n\nThe language selector uses framer-motion for smooth dropdown animations with the following states:\n\n```typescript\n{langOpen && (\n  <motion.div\n    initial={{ opacity: 0, y: -4, scale: 0.97 }}\n    animate={{ opacity: 1, y: 0, scale: 1 }}\n    exit={{ opacity: 0, y: -4, scale: 0.97 }}\n    transition={{ duration: 0.15 }}\n    className=\"absolute right-0 top-10 w-44...\"\n  >\n    {LANGUAGES.map((l) => (...))}\n  </motion.div>\n)}\n```\n\n### WikiSidebar\n\nThe `WikiSidebar` component provides documentation navigation with hierarchical menu items. It supports:\n\n- Collapsible menu sections with `AnimatePresence`\n- \"New\" badge indicators using the `Sparkles` icon for newly added items\n- External links to agent-skill.co and GitHub repository\n- Smooth fade animations for menu state changes\n\n资料来源：[website/src/components/WikiSidebar.tsx:1-60]()\n\n### Footer\n\nThe `Footer` component displays project metadata and social links:\n\n```typescript\n<a href=\"https://agent-skill.co\" ...>agent-skill.co</a>\n<a href=\"https://github.com/heilcheng/awesome-agent-skills\" ...><Github /></a>\n<a href=\"https://x.com/haileyhmt\" ...><Twitter /></a>\n<a href=\"mailto:haileycheng@proton.me\" ...><Mail /></a>\n```\n\nIncludes BibTeX citation format for academic references. 资料来源：[website/src/components/Footer.tsx:1-30]()\n\n## Section Components\n\n### WhatIsIt\n\nIntroduces the project concept using icon-based cards. Each card displays a title, description, and corresponding icon in a responsive grid layout.\n\n### SkillDirectory\n\nThe `SkillDirectory` component renders a filterable grid of skills with the following structure:\n\n| Element | Purpose |\n|---------|---------|\n| Search/Filter Bar | Filter skills by name or category |\n| Motion Grid | Animated grid using `framer-motion` layout |\n| Skill Cards | Each card shows icon, name, and description |\n\n```typescript\n<motion.a\n  layout\n  key={skill.id}\n  href={`https://github.com/heilcheng/awesome-agent-skills`}\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\n  className=\"group flex items-start gap-4 p-4 border...\"\n>\n  <div className=\"p-2 rounded-lg bg-neutral-100 dark:bg-neutral-800\">\n    <skill.Icon className=\"w-4 h-4\" />\n  </div>\n  <div className=\"flex-1 min-w-0\">\n    <h3 className=\"text-sm font-semibold\">{skill.name}</h3>\n    <p className=\"text-xs text-neutral-500\">{skill.description}</p>\n  </div>\n  <ExternalLink className=\"w-3.5 h-3.5\" />\n</motion.a>\n```\n\n资料来源：[website/src/components/sections/SkillDirectory.tsx:1-50]()\n\n### UsingSkills\n\nDemonstrates how to add skills to an agent with code examples:\n\n| Panel Type | Description |\n|------------|-------------|\n| CLI | Shows `npx skills add` command |\n| Manual Drop-in | Shows `.github/skills/skill-name/` path |\n\nIncludes a copy-to-clipboard button that uses `Check` and `Copy` icons from Lucide React. 资料来源：[website/src/components/sections/UsingSkills.tsx:1-40]()\n\n### CreatingSkills\n\nDisplays the `SKILL.md` blueprint structure for creating new skills. Shows section-by-section breakdown with descriptions in a card format.\n\n```typescript\n{t.creating.blueprint.map((section, i) => (\n  <div key={i} className=\"px-4 py-3\">\n    <div className=\"text-xs font-mono font-bold\">{section.section}</div>\n    <p className=\"text-xs text-neutral-500 italic\">{section.desc}</p>\n  </div>\n))}\n```\n\n资料来源：[website/src/components/sections/CreatingSkills.tsx:1-30]()\n\n### QualityStandards\n\nShows good vs bad code patterns side-by-side with visual indicators:\n\n| Pattern Type | Visual Treatment |\n|--------------|------------------|\n| Good | Green `CheckCircle2` icon, full opacity |\n| Bad | Gray `XCircle` icon, 70% opacity |\n\nUses dark mode compatible styling with Tailwind's `dark:` modifier. 资料来源：[website/src/components/sections/QualityStandards.tsx:1-50]()\n\n### FindingSkills\n\nLists external resources for discovering agent skills including marketplaces and CLI commands:\n\n```typescript\n{cliCommands.map(({ cmd, desc }) => (\n  <div className=\"flex items-center gap-4 px-4 py-2.5...\">\n    <code className=\"text-xs font-mono text-neutral-700\">{cmd}</code>\n    <span className=\"text-xs text-neutral-400\">{desc}</span>\n  </div>\n))}\n```\n\nSupports conditional image rendering for marketplace and leaderboard sections. 资料来源：[website/src/components/sections/FindingSkills.tsx:1-40]()\n\n### Tutorials\n\nImplements chat-style tutorial dialogues with:\n\n- Character avatars (emoji-based)\n- Quest/step indicators with icons\n- External links to documentation resources\n\nUses `ArrowUpRight` icon for external link indicators. 资料来源：[website/src/components/sections/Tutorials.tsx:1-50]()\n\n### Contributing\n\nSimple section with call-to-action buttons linking to:\n\n- Contributing Guide (`/CONTRIBUTING.md`)\n- GitHub Repository\n\n资料来源：[website/src/components/sections/Contributing.tsx:1-30]()\n\n## Data Flow Architecture\n\n```mermaid\ngraph LR\n    A[i18n Translations] --> B[Section Components]\n    C[Props/State] --> D[UI Rendering]\n    B --> D\n    E[External APIs] --> F[SkillDirectory Data]\n    F --> D\n```\n\n## Animation Strategy\n\nThe project uses framer-motion consistently across components:\n\n| Animation | Usage |\n|-----------|-------|\n| `motion.div` | Fade and scale transitions |\n| `AnimatePresence` | Conditional rendering with exit animations |\n| `layout` prop | Automatic grid reordering |\n\nExample from SkillDirectory:\n\n```typescript\n<motion.a\n  initial={{ opacity: 0, scale: 0.98 }}\n  animate={{ opacity: 1, scale: 1 }}\n  exit={{ opacity: 0, scale: 0.98 }}\n  transition={{ duration: 0.15 }}\n>\n```\n\n## Dark Mode Support\n\nAll components implement dark mode using Tailwind's `dark:` modifier:\n\n| Element | Light Mode | Dark Mode |\n|---------|------------|-----------|\n| Background | `bg-white` | `dark:bg-neutral-900` |\n| Border | `border-neutral-200` | `dark:border-neutral-800` |\n| Text | `text-neutral-700` | `dark:text-neutral-300` |\n\n## Dependencies\n\nKey external dependencies for the component architecture:\n\n| Package | Purpose |\n|---------|---------|\n| `framer-motion` | Animation and layout transitions |\n| `lucide-react` | Icon library |\n| `next` | React framework |\n\n## State Management Pattern\n\nComponents receive data via props and manage local state using React hooks. No global state management library is used; instead, props drilling and localized state is preferred for simplicity.\n\n---\n\n<a id='skill-directories'></a>\n\n## Skill Directories\n\n### 相关页面\n\n相关主题：[Compatible Agents](#compatible-agents), [Skill Quality Standards](#skill-quality-standards)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/src/components/sections/SkillDirectory.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/SkillDirectory.tsx)\n</details>\n\n# Skill Directories\n\n## Overview\n\nA **Skill Directory** is the organizational structure that stores, categorizes, and makes AI agent skills discoverable. This repository serves as a curated collection of reusable skills compatible with 30+ agent platforms including Claude Code, Claude.ai, OpenAI Codex, GitHub Copilot, Cursor, and more.\n\nThe directory enables:\n\n- **Discovery**: Browse and search skills by category\n- **Installation**: Copy skills directly into your agent's skill folder\n- **Portability**: Skills work across different agents without modification\n- **Version Control**: Track changes and contributions via Git\n\n资料来源：[website/index.html:1-50]()\n\n## Directory Structure\n\nSkills in this repository follow a standardized folder structure. Each skill is contained within its own directory containing a mandatory `SKILL.md` file.\n\n```\nawesome-agent-skills/\n├── .claude/skills/          # Skills compatible with Claude Code\n├── .github/skills/          # Skills compatible with GitHub-based agents\n└── website/\n    └── src/components/\n        └── sections/\n            └── SkillDirectory.tsx  # Frontend component for browsing\n```\n\n### Skill Package Structure\n\n```\nmy-skill/\n├── SKILL.md           # Required: skill metadata and instructions\n├── LICENSE            # Optional: license file\n└── scripts/           # Optional: executable helper scripts\n    └── *.py\n    └── *.sh\n```\n\n资料来源：[website/index.html:85-120]()\n\n## SKILL.md Format Specification\n\nEvery skill must contain a `SKILL.md` file with YAML frontmatter. Only `name` and `description` are required.\n\n### Required Fields\n\n| Field | Type | Constraints | Description |\n|-------|------|-------------|-------------|\n| `name` | string | 1-64 chars, lowercase alphanumeric + hyphens | Must match parent directory name. No consecutive hyphens or leading/trailing hyphens. |\n| `description` | string | 1-1024 chars | Most important field. Describes what the skill does AND when to activate it. Include specific keywords agents would encounter. |\n\n### Optional Fields\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `license` | string | License name (e.g., \"MIT\", \"Apache-2.0\") or reference to bundled LICENSE file |\n| `compatibility` | string | 1-500 chars describing environment requirements (e.g., \"Requires Python 3.11+ and uv\") |\n| `metadata` | object | Author, version, and other metadata |\n| `allowed-tools` | string | Space-delimited list of pre-approved tools (experimental, support varies) |\n\n资料来源：[website/index.html:180-220]()\n\n### Example SKILL.md\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\nlicense: Apache-2.0\ncompatibility: Requires Python 3.11+ and uv\nmetadata:\n  author: example-org\n  version: \"1.0\"\nallowed-tools: Bash(uv:*) Read Write\n---\n\n## When to use this skill\n\nActivate when the user needs to extract text, fill forms, or merge PDFs.\n\n## Instructions\n\n1. Verify the input is a valid PDF.\n2. Run the appropriate script from scripts/.\n3. Validate output before returning.\n\n## Gotchas\n\n- Scanned PDFs require OCR (scripts/ocr.py, not scripts/extract.py)\n- Password-protected PDFs need decryption first\n```\n\n资料来源：[website/index.html:220-260]()\n\n## Progressive Disclosure Architecture\n\nSkills implement a two-phase loading strategy to optimize performance:\n\n```mermaid\ngraph TD\n    A[Agent Startup] --> B[Lightweight Scan]\n    B --> C[Load name + description<br/>~50-100 tokens per skill]\n    C --> D[Agent Receives User Task]\n    D --> E{Match skill description?}\n    E -->|Yes| F[Load Full SKILL.md]\n    E -->|No| G[Execute without skill]\n    F --> H[Execute with skill context]\n    G --> H\n    \n    style B fill:#e1f5fe\n    style F fill:#fff3e0\n```\n\n### Discovery Phase\n\nAt startup, the agent scans configured skill directories and loads only the `name` and `description` fields (~50-100 tokens per skill). Full instructions are not loaded yet.\n\nSupported directory locations:\n\n| Platform | Default Location |\n|----------|-----------------|\n| Claude Code | `~/.claude/skills/` |\n| Claude.ai | Imported via URL paste |\n| Generic | `~/.agents/skills/` |\n| Project-level | `.agents/skills/` |\n\n资料来源：[website/index.html:280-310]()\n\n### Activation Phase\n\nWhen a user's task matches a skill's description, the agent reads the full `SKILL.md` into context. This is when instructions, examples, and scripts are loaded and executed.\n\n## Installation Methods\n\n### Method 1: Direct Folder Placement\n\nCopy the skill folder into the agent's skills directory:\n\n```bash\n# For Claude Code\ncp -r my-downloaded-skill ~/.claude/skills/my-skill\n\n# Verify structure\nls ~/.claude/skills/my-skill/SKILL.md\n```\n\n### Method 2: CLI Tool\n\nUse the `npx skills` command-line tool for quick installation:\n\n```bash\nnpx skills add <owner/repo>        # Add via GitHub shorthand\nnpx skills add https://github.com/owner/repo  # Full URL\nnpx skills add /path/to/local-skill  # Local path\n\nnpx skills list                    # List installed skills\nnpx skills check                   # Check for updates\nnpx skills update                  # Update all skills\nnpx skills remove [skill-name]     # Remove a skill\n```\n\n资料来源：[README.ko.md:45-60]()\n\n### Method 3: IDE Drop-In\n\nModern IDEs like Cursor and Claude Code automatically detect new folders in `.github/skills/`:\n\n```bash\n# Drop folder directly into skills directory\ncp -r my-downloaded-skill .github/skills/my-skill\n```\n\nThe IDE detects new knowledge instantly without requiring a restart.\n\n资料来源：[website/src/components/sections/UsingSkills.tsx:1-30]()\n\n## Skill Loading Workflow\n\n```mermaid\nsequenceDiagram\n    participant User\n    participant Agent\n    participant SkillFS as Skill Directory\n    participant SkillMD as SKILL.md\n    \n    User->>Agent: Request task\n    Agent->>SkillFS: Scan skills at startup\n    SkillFS-->>Agent: Return metadata (name, description)\n    User->>Agent: Specific task\n    Agent->>SkillMD: Load matching skill\n    SkillMD-->>Agent: Full instructions + scripts\n    Agent->>Agent: Execute with skill context\n    Agent-->>User: Task result\n```\n\n## Quality Standards\n\nHigh-quality skills follow these guidelines:\n\n| Aspect | Recommendation |\n|--------|----------------|\n| **Scope** | Under 500 lines, under 5,000 tokens. Split larger skills into referenced files. |\n| **Instructions** | Focus on project conventions, domain-specific procedures, edge cases. Omit general knowledge the agent already has. |\n| **Activation** | Write descriptive `description` field with specific keywords agents would encounter. |\n| **Examples** | Include concrete input → output pairs in the Examples section. |\n| **Validation** | Document how to verify the output is correct. |\n| **Gotchas** | Add a Gotchas section for environment-specific facts that defy expectations. |\n\n资料来源：[website/src/components/sections/QualityStandards.tsx:1-50]()\n\n### Recommended Body Structure\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n资料来源：[website/index.html:150-175]()\n\n## Compatible Agents\n\nThe skill format is an open standard adopted by 30+ platforms:\n\n| Agent | Documentation |\n|-------|---------------|\n| Claude Code | code.claude.com/docs/en/skills |\n| Claude.ai | support.claude.com |\n| OpenAI Codex | developers.openai.com/codex |\n| GitHub Copilot | docs.github.com/copilot |\n| Cursor | cursor.com |\n| Gemini CLI | (official docs) |\n\n资料来源：[website/index.html:320-340]()\n\n## Skill Directory Component\n\nThe `SkillDirectory.tsx` component renders the interactive skill browser on the website:\n\n```typescript\n// website/src/components/sections/SkillDirectory.tsx\n// Renders skill cards with search, filtering, and category organization\n```\n\nKey features include:\n\n- **Search**: Filter skills by name or keyword\n- **Categories**: Skills organized by domain (development, data, automation, security, etc.)\n- **Direct Links**: Each card links directly to the skill's GitHub repository\n\n## Creating Your Own Skill\n\n1. **Create folder**: Name it with lowercase alphanumeric + hyphens only\n2. **Add SKILL.md**: Include required `name` and `description` frontmatter\n3. **Write instructions**: Structure with When to use, Instructions, Gotchas sections\n4. **Add scripts (optional)**: Place executables in `scripts/` subdirectory\n5. **Test**: Load into your agent and verify behavior\n\n```bash\nmkdir my-first-skill\ncd my-first-skill\ncat > SKILL.md << 'EOF'\n---\nname: my-first-skill\ndescription: Use when you need to [specific task]. Activates for [keywords].\n---\n\n## When to use this skill\n\n## Instructions\n\n1. First, do this.\n2. Then, do that.\n\n## Gotchas\n\n- Important note about edge case\nEOF\n```\n\n资料来源：[website/index.html:30-50]()\n\n## Summary\n\nSkill Directories provide a portable, version-controlled mechanism for packaging AI agent capabilities. By standardizing on the `SKILL.md` format with YAML frontmatter and Markdown instructions, skills remain agent-agnostic while enabling:\n\n- Zero-infrastructure deployment\n- Cross-platform compatibility\n- Progressive disclosure for performance\n- Community sharing via Git\n\n---\n\n<a id='skill-quality-standards'></a>\n\n## Skill Quality Standards\n\n### 相关页面\n\n相关主题：[Skill Directories](#skill-directories), [Using and Creating Skills](#using-creating-skills)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n</details>\n\n# Skill Quality Standards\n\n## Overview\n\nSkill Quality Standards define the criteria and best practices for creating effective, reliable, and maintainable Agent Skills within the awesome-agent-skills ecosystem. These standards ensure that skills are consistently structured, easily discoverable, and capable of delivering predictable behavior across different AI agents and platforms.\n\nThe quality framework establishes what constitutes a \"good\" skill versus a poorly constructed one, providing authors with clear guidelines for implementation. This system helps maintain ecosystem integrity while enabling contributors to build skills that genuinely enhance AI agent capabilities.\n\n## Purpose and Scope\n\nThe Skill Quality Standards system serves multiple stakeholders within the AI agent ecosystem:\n\n- **For Skill Authors**: Provides concrete guidelines on how to structure skills for maximum effectiveness\n- **For AI Agents**: Ensures consistent instruction formatting that agents can reliably parse and execute\n- **For End Users**: Guarantees predictable, high-quality outcomes when deploying skills\n- **For Ecosystem Maintainers**: Offers evaluation criteria for curating and reviewing community submissions\n\nThe scope encompasses all aspects of skill creation including file structure, instruction clarity, example quality, and validation mechanisms. Skills that meet these standards are more likely to function correctly across the 30+ supported agent platforms including Claude Code, Claude.ai, OpenAI Codex, GitHub Copilot, and Cursor.\n\n## Quality Evaluation Framework\n\n### Core Quality Dimensions\n\nSkills are evaluated across five primary dimensions that collectively determine their overall quality and reliability.\n\n| Dimension | Description | Weight |\n|-----------|-------------|--------|\n| **Instruction Clarity** | How clearly and unambiguously the instructions are written | High |\n| **Trigger Precision** | Accuracy of the description field in matching relevant use cases | High |\n| **Example Quality** | Relevance and completeness of provided examples | Medium |\n| **Edge Case Handling** | Coverage of gotchas, limitations, and error scenarios | Medium |\n| **Validation Logic** | Presence and effectiveness of output verification steps | Medium |\n\n### Quality Assessment Process\n\nThe quality assessment follows a structured evaluation workflow that ensures consistent scoring across all submitted skills.\n\n```mermaid\ngraph TD\n    A[Skill Submission] --> B[Metadata Review]\n    B --> C[Instruction Analysis]\n    C --> D[Example Validation]\n    D --> E[Edge Case Audit]\n    E --> F[Final Quality Score]\n    \n    B --> B1{name matches dir?}\n    B1 -->|No| G[Rejection: Name Mismatch]\n    B1 -->|Yes| C\n    \n    C --> C1{Instructions clear?}\n    C1 -->|Unclear| H[Return for Revision]\n    C1 -->|Clear| D\n    \n    D --> D1{Examples valid?}\n    D1 -->|Invalid| H\n    D1 -->|Valid| E\n    \n    E --> E1{Gotchas documented?}\n    E1 -->|Missing| I[Recommendation Added]\n    E1 -->|Documented| F\n    \n    style G fill:#ff6b6b\n    style H fill:#ffd93d\n    style F fill:#6bcb77\n```\n\n## Good vs. Bad Pattern Examples\n\nThe quality standards explicitly define what constitutes effective versus ineffective skill implementations through concrete pattern comparisons.\n\n### Pattern Comparison Table\n\n| Aspect | Good Pattern | Bad Pattern |\n|--------|--------------|-------------|\n| **Specificity** | Actionable steps with clear scope | Vague descriptions lacking direction |\n| **Trigger Conditions** | Precise \"Use when...\" statements | Generic statements applicable to many contexts |\n| **Validation** | Output verification steps included | No mechanism to verify correctness |\n| **Examples** | Concrete input → output pairs | Missing or abstract examples |\n| **Limitations** | Known constraints documented | Implicit assumptions unstated |\n\n### Implementation Example\n\nThe quality standards component provides visual comparison panels that demonstrate these differences:\n\n```typescript\n// QualityStandards.tsx structure\ninterface QualityStandard {\n  title: string;\n  description: string;\n}\n\ninterface PatternComparison {\n  goodHeader: string;\n  badHeader: string;\n  goodPattern: string;\n  badPattern: string;\n  goodDesc: string;\n  badDesc: string;\n}\n```\n\nThe component renders two side-by-side panels:\n\n- **Left Panel (Good)**: Green-accented header with CheckCircle2 icon, displays the recommended pattern in monospace font, includes explanatory text below\n- **Right Panel (Bad)**: Muted header with XCircle icon, displays the anti-pattern with reduced opacity, includes descriptive critique\n\n## Skill Structure Requirements\n\nBeyond instruction quality, the standards define structural requirements that skills must satisfy.\n\n### Directory Structure\n\n```\nskill-name/\n├── SKILL.md           # Required: Main skill definition\n├── scripts/           # Optional: Executable helper scripts\n│   └── *.py, *.sh\n├── LICENSE            # Optional: License specification\n└── README.md          # Optional: Extended documentation\n```\n\n### Frontmatter Requirements\n\n| Field | Type | Required | Constraints |\n|-------|------|----------|-------------|\n| `name` | string | Yes | 1-64 chars, lowercase alphanumeric + hyphens, must match parent directory |\n| `description` | string | Yes | 1-1024 chars, describes both capability AND trigger conditions |\n| `license` | string | No | License name or reference to bundled file |\n| `compatibility` | string | No | 1-500 chars, environment requirements |\n| `metadata` | object | No | Author, version, or custom fields |\n| `allowed-tools` | string | No | Space-delimited list of approved tools (experimental) |\n\n## Progressive Disclosure Model\n\nThe quality standards embrace a progressive disclosure architecture that optimizes for both initial discovery performance and comprehensive execution capability.\n\n```mermaid\ngraph LR\n    subgraph Discovery[\"Startup Phase - Lightweight Scan\"]\n        A1[Agent loads] --> A2[Read name]\n        A2 --> A3[Read description]\n        A3 --> A4[~50-100 tokens per skill]\n    end\n    \n    subgraph Activation[\"On-Demand Loading\"]\n        B1[Task matches description?] -->|Yes| B2[Load full SKILL.md]\n        B2 --> B3[Read instructions]\n        B3 --> B4[Load examples]\n        B4 --> B5[Load scripts if needed]\n    end\n    \n    A4 -.->|Task relevance?| B1\n    \n    style Discovery fill:#e3f2fd\n    style Activation fill:#fff3e0\n```\n\nThis model ensures that agents remain responsive during startup while having access to complete instructions when a relevant task is detected.\n\n## Best Practices Summary\n\nBased on the quality standards framework, skill authors should adhere to the following practices:\n\n1. **Write Descriptive Trigger Conditions**: The `description` field should explicitly state when to activate the skill, including specific keywords users would employ\n\n2. **Structure Instructions Step-by-Step**: Break procedures into numbered, sequential steps that agents can follow unambiguously\n\n3. **Document Edge Cases**: Include a `Gotchas` section covering environment-specific behaviors, common failure modes, and known limitations\n\n4. **Provide Concrete Examples**: Include input → output pairs that demonstrate expected behavior in realistic scenarios\n\n5. **Include Validation Steps**: Define how to verify that the skill's output meets success criteria\n\n6. **Use Agent-Friendly Scripts**: When including scripts, design them to avoid interactive prompts, produce structured output (JSON/CSV), and exit with meaningful codes\n\n## Integration with Skill Ecosystem\n\nThe quality standards integrate with the broader skill ecosystem through the following mechanisms:\n\n| Integration Point | Description |\n|-------------------|-------------|\n| **Discovery** | Skills meeting standards appear in the curated directory with quality indicators |\n| **Compatibility** | Standards ensure cross-platform compatibility across 30+ supported agents |\n| **CLI Integration** | `npx skills` tool validates skills against quality criteria during add/check operations |\n| **Community Curation** | Maintainers use standards to review and recommend improvements for submitted skills |\n\nThe `npx skills` command provides validation through `npx skills check`, which verifies that skills conform to the defined standards and alerts authors to areas needing improvement.\n\n## References\n\n- Quality Standards Component: `website/src/components/sections/QualityStandards.tsx`\n- README Documentation: `README.md`\n- Skill Specification: [agentskills.io/specification](https://agentskills.io/specification)\n\n---\n\n<a id='using-creating-skills'></a>\n\n## Using and Creating Skills\n\n### 相关页面\n\n相关主题：[Quick Start Guide](#quick-start-guide), [Skill Quality Standards](#skill-quality-standards)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.md)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [CONTRIBUTING.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/CONTRIBUTING.md)\n</details>\n\n# Using and Creating Skills\n\nAgent Skills are portable instruction packages that teach AI assistants how to perform specific tasks. A skill consists of a `SKILL.md` file containing YAML frontmatter and markdown instructions, optionally bundled with executable scripts. Skills follow an open standard originally developed by Anthropic, now adopted by 30+ agent platforms including Claude, Codex, Cursor, Copilot, and Gemini CLI.\n\n## Overview\n\nThe SKILL.md format enables AI agents to load domain knowledge, team conventions, and repeatable workflows on demand. At startup, agents perform a lightweight scan of available skills, loading only the `name` and `description` fields (~50-100 tokens per skill). Full instructions are loaded only when a task matches a skill's description.\n\n## Skill Discovery Locations\n\nAgents scan the following directories for available skills:\n\n| Location | Description |\n|----------|-------------|\n| `~/.claude/skills/` | User-level skills |\n| `.claude/skills/` | Project-level skills |\n| `.github/skills/` | Repository-level skills |\n| `~/.agents/skills/` | Alternative user-level location |\n\n## SKILL.md Format Specification\n\n### Required Frontmatter Fields\n\n```yaml\n---\nname: pdf-processing\ndescription: >\n  Extract text and tables from PDF files, fill PDF forms, and merge\n  multiple PDFs. Use when working with PDF documents, forms, or when\n  the user mentions PDFs, document extraction, or form filling.\n---\n```\n\n| Field | Required | Format | Constraints |\n|-------|----------|--------|-------------|\n| `name` | Yes | Lowercase alphanumeric + hyphens | 1-64 characters, must match parent directory, no consecutive/leading/trailing hyphens |\n| `description` | Yes | Free-form text | 1-1024 characters, describes what and when to use |\n\n### Optional Frontmatter Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `license` | No | License name or reference to bundled file (e.g., `MIT`, `Apache-2.0`, `LICENSE.txt`) |\n| `compatibility` | No | Environment requirements (e.g., `Requires Python 3.11+ and uv`) |\n| `metadata` | No | Structured metadata object with author, version, etc. |\n| `allowed-tools` | No (Experimental) | Space-delimited list of pre-approved tools to run |\n\n### Recommended Body Structure\n\nThe markdown body following frontmatter has no format restrictions. Recommended sections:\n\n```markdown\n## When to use this skill\nTrigger conditions, scope, and limitations.\n\n## Instructions\nStep-by-step procedure. Be explicit.\n\n## Gotchas\nEnvironment-specific facts. Things that defy expectations.\n\n## Examples\nConcrete input → output pairs.\n\n## Validation\nHow to verify the output is correct.\n```\n\n## Adding Skills to Your Agent\n\n### Using the CLI Tool\n\nThe `npx skills` CLI provides commands for managing skills:\n\n```bash\nnpx skills find [query]            # Search for relevant skills\nnpx skills add <owner/repo>        # Add a skill (supports GitHub shorthand, full URLs, or local paths)\nnpx skills list                    # List installed skills\nnpx skills check                   # Check for updates\nnpx skills update                  # Upgrade all skills\nnpx skills remove [skill-name]     # Remove a skill\n```\n\n### Manual Drop-In\n\nSkills can be manually placed in the appropriate directory:\n\n```bash\n# Copy skill folder to agent skills directory\ncp -r my-downloaded-skill ~/.agents/skills/my-skill\n\n# Verify structure\nls ~/.agents/skills/my-skill/SKILL.md\n```\n\n### Platform-Specific Loading\n\n| Platform | Command |\n|----------|---------|\n| Claude Code | `/skills add <github-url>` |\n| Claude.ai | Paste raw SKILL.md URL in chat |\n\n## Creating a New Skill\n\n### Step 1: Create the Directory\n\nCreate a folder named after your skill. The folder name must match the `name` field in frontmatter.\n\n```bash\nmkdir my-custom-skill\n```\n\n### Step 2: Create SKILL.md\n\nPlace a `SKILL.md` file inside the folder:\n\n```bash\ntouch my-custom-skill/SKILL.md\n```\n\n### Step 3: Write Frontmatter\n\nAdd required YAML frontmatter at the top:\n\n```yaml\n---\nname: my-custom-skill\ndescription: >\n  A brief description of what this skill does and when to use it.\n  Include keywords the agent might encounter.\n---\n```\n\n### Step 4: Write Instructions\n\nAdd clear, step-by-step instructions in the markdown body:\n\n```markdown\n## When to use this skill\nActivate when the user needs to [specific task].\n\n## Instructions\n1. First, do this.\n2. Then, do that.\n3. Finally, validate the output.\n\n## Gotchas\n- Scanned PDFs require OCR\n- Password-protected files need additional handling\n```\n\n### Step 5: Add Scripts (Optional)\n\nPlace executable files in a `scripts/` subdirectory. Scripts should be agent-friendly:\n\n```python\n#!/usr/bin/env -S uv run\n# /// script\n# requires-python = \">= 3.11\"\n# dependencies = [\"requests\", \"rich\"]\n# ///\n\nimport sys, json\n\n# Design principles:\n# - Avoid interactive prompts\n# - Use structured output (JSON/CSV)\n# - Write errors to stderr\n# - Exit with meaningful codes\n\nprint(json.dumps({\"result\": \"ok\"}))\n```\n\n## Quality Standards\n\nGood skill descriptions clearly explain what the skill does AND when to activate it:\n\n| Pattern | Example |\n|---------|---------|\n| Good | \"Extracts text and tables from PDF files. Use when working with PDFs, forms, or document extraction.\" |\n| Poor | \"Helps with PDFs.\" |\n\nInclude specific keywords agents would encounter in user requests. Use imperative phrasing like \"Use this skill when...\".\n\n---\n\n<a id='internationalization'></a>\n\n## Internationalization (i18n)\n\n### 相关页面\n\n相关主题：[Component Architecture](#component-architecture), [Next.js Website Structure](#nextjs-structure)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/src/lib/i18n.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/lib/i18n.tsx)\n- [README.es.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.es.md)\n- [README.ja.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ja.md)\n- [README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)\n- [README.zh-CN.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-CN.md)\n- [README.zh-TW.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-TW.md)\n- [website/src/components/Navbar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n</details>\n\n# Internationalization (i18n)\n\n## Overview\n\nThe awesome-agent-skills project implements a comprehensive internationalization system that enables the website and documentation to be presented in multiple languages. The i18n system supports six languages: English (default), Spanish, Japanese, Korean, Simplified Chinese, and Traditional Chinese.\n\nThe architecture leverages Next.js App Router conventions with a centralized translation library that provides type-safe access to localized content across all components.\n\n## Architecture\n\n```mermaid\ngraph TD\n    A[User Interface] --> B[Navbar Component]\n    B --> C{Language Selector}\n    C --> D[Set Language State]\n    D --> E[i18n Context]\n    E --> F[useTranslations Hook]\n    F --> G[Translation Files]\n    \n    H[Localized README Files] --> I[website/public]\n    H --> J[GitHub Repository]\n    \n    K[Spanish] --> G\n    L[Japanese] --> G\n    M[Korean] --> G\n    N[Simplified Chinese] --> G\n    O[Traditional Chinese] --> G\n    P[English] --> G\n```\n\n## Supported Languages\n\nThe project maintains translations for the following languages:\n\n| Language | Code | Flag | README File |\n|----------|------|------|-------------|\n| English | `en` | 🇺🇸 | (default) |\n| Spanish | `es` | 🇪🇸 | `README.es.md` |\n| Japanese | `ja` | 🇯🇵 | `README.ja.md` |\n| Korean | `ko` | 🇰🇷 | `README.ko.md` |\n| Simplified Chinese | `zh-CN` | 🇨🇳 | `README.zh-CN.md` |\n| Traditional Chinese | `zh-TW` | 🇹🇼 | `README.zh-TW.md` |\n\n资料来源：[README.es.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.es.md)  \n资料来源：[README.ja.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ja.md)  \n资料来源：[README.ko.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.ko.md)  \n资料来源：[README.zh-CN.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-CN.md)  \n资料来源：[README.zh-TW.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/README.zh-TW.md)\n\n## Core Components\n\n### i18n Library\n\nThe translation system is implemented in `website/src/lib/i18n.tsx`. This module provides the foundational translation infrastructure used throughout the React application.\n\nKey exports include:\n- Translation context provider\n- `useTranslations()` hook for component-level translations\n- Language configuration constants\n\n资料来源：[website/src/components/Navbar.tsx:3](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n### Language Configuration\n\nThe `LANGUAGES` array defines all supported locales with their metadata:\n\n```typescript\n// Configuration includes:\n{\n  code: string,      // Locale identifier (e.g., 'en', 'zh-CN')\n  flag: string,      // Emoji flag for UI display\n}\n```\n\n资料来源：[website/src/components/Navbar.tsx:1-50](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n## Language Selector Component\n\n### Component Structure\n\nThe language selector is implemented in the `Navbar` component, providing users with an accessible dropdown to change their preferred language.\n\n```mermaid\ngraph LR\n    A[Globe Icon] --> B[Button Click]\n    B --> C{langOpen State}\n    C -->|true| D[Show Dropdown]\n    C -->|false| E[Hide Dropdown]\n    D --> F[Language Options]\n    F --> G[Select Language]\n    G --> H[setLang Function]\n    H --> I[Update Context]\n    I --> J[Close Dropdown]\n```\n\n### Features\n\n| Feature | Description |\n|---------|-------------|\n| Dropdown Toggle | Animated show/hide with `AnimatePresence` |\n| Language List | Renders all languages from `LANGUAGES` array |\n| Flag Display | Shows flag emoji for quick visual identification |\n| State Management | Uses `langRef` for click-outside detection |\n| Accessibility | Includes `aria-label` for screen readers |\n\n资料来源：[website/src/components/Navbar.tsx:1-60](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n### Implementation Details\n\n```tsx\n<div ref={langRef} className=\"relative\">\n  <button\n    onClick={() => setLangOpen(!langOpen)}\n    aria-label=\"Change language\"\n  >\n    <Globe className=\"w-4 h-4\" />\n    <span>{currentLang?.flag}</span>\n  </button>\n  <AnimatePresence>\n    {langOpen && (\n      <motion.div className=\"absolute right-0 top-10 w-44 ...\">\n        {LANGUAGES.map((l) => (\n          <button\n            key={l.code}\n            onClick={() => { setLang(l.code); setLangOpen(false); }}\n          />\n        ))}\n      </motion.div>\n    )}\n  </AnimatePresence>\n</div>\n```\n\n资料来源：[website/src/components/Navbar.tsx:15-40](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Navbar.tsx)\n\n## Usage Patterns\n\n### Component-Level Translations\n\nComponents access translations via the `useTranslations()` hook:\n\n```tsx\nimport { useTranslations } from \"@/lib/i18n\";\n\nexport default function ExampleComponent() {\n  const t = useTranslations();\n  \n  return (\n    <h2>{t.how.title}</h2>\n    <p>{t.how.subtitle}</p>\n  );\n}\n```\n\n资料来源：[website/src/components/sections/HowItWorks.tsx:3-8](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/HowItWorks.tsx)\n\n### Translation Namespace Access\n\nTranslations are organized into namespaces (e.g., `how`, `quality`, `footer`). Components access specific sections:\n\n```tsx\nconst stages = t.how.stages;  // Array of stage data\nconst quality = t.quality;     // Quality section content\nconst footer = t.footer;       // Footer translations\n```\n\n资料来源：[website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)  \n资料来源：[website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)  \n资料来源：[website/src/components/Footer.tsx:1-30](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n## Documentation Localization\n\n### README Translations\n\nThe repository maintains full README translations in all supported languages. Each localized README follows the naming convention `README.{locale}.md`.\n\n| File | Purpose |\n|------|---------|\n| `README.md` | English (default) |\n| `README.es.md` | Spanish documentation |\n| `README.ja.md` | Japanese documentation |\n| `README.ko.md` | Korean documentation |\n| `README.zh-CN.md` | Simplified Chinese documentation |\n| `README.zh-TW.md` | Traditional Chinese documentation |\n\n### Citation Format\n\nThe Footer component displays BibTeX citation format that adapts to the selected language context:\n\n```bibtex\n@misc{awesome-agent-skills,\n  author = {Hailey Cheng (Cheng Hei Lam)},\n  title = {Agent Skill Index},\n  year = {2026},\n  publisher = {GitHub},\n  url = {https://github.com/heilcheng/awesome-agent-skills}\n}\n```\n\n资料来源：[website/src/components/Footer.tsx:20-30](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n\n## Adding New Translations\n\n### Adding a New Language\n\n1. Create a new `README.{code}.md` file in the repository root\n2. Add the language configuration to the `LANGUAGES` array in `i18n.tsx`\n3. Add translation keys to the translation files\n4. Update the language selector dropdown styling if needed\n\n### Translation Key Structure\n\n```typescript\ninterface Translations {\n  nav: {\n    // Navigation translations\n  };\n  how: {\n    title: string;\n    subtitle: string;\n    steps: Array<{\n      step: string;\n      title: string;\n      desc: string;\n    }>;\n  };\n  quality: {\n    // Quality standards translations\n  };\n  footer: {\n    // Footer text including citation label\n  };\n}\n```\n\n## Best Practices\n\n### Type Safety\n\nThe i18n system uses TypeScript to ensure type-safe access to translation keys. Always use the `useTranslations()` hook rather than direct object access to maintain type checking.\n\n### Lazy Loading\n\nTranslation content is loaded on-demand through the Next.js App Router, ensuring minimal bundle impact when users view the site.\n\n### Accessibility\n\nThe language selector includes proper ARIA labels and keyboard navigation support for screen reader users.\n\n## External Resources\n\n- Official specification: [agentskills.io/specification](https://agentskills.io/specification)\n- Project repository: [github.com/heilcheng/awesome-agent-skills](https://github.com/heilcheng/awesome-agent-skills)\n- Agent Skill website: [agent-skill.co](https://agent-skill.co)\n\n资料来源：[website/src/components/WikiSidebar.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/WikiSidebar.tsx)\n\n---\n\n<a id='deployment-config'></a>\n\n## Deployment Configuration\n\n### 相关页面\n\n相关主题：[Next.js Website Structure](#nextjs-structure), [Component Architecture](#component-architecture)\n\n<details>\n<summary>相关源码文件</summary>\n\n以下源码文件用于生成本页说明：\n\n- [website/README.md](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/README.md)\n- [website/package.json](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/package.json)\n- [website/index.html](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/index.html)\n- [website/src/components/Footer.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/Footer.tsx)\n- [website/src/components/sections/Contributing.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/Contributing.tsx)\n- [website/src/components/sections/UsingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/UsingSkills.tsx)\n- [website/src/components/sections/FindingSkills.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/FindingSkills.tsx)\n- [website/src/components/sections/WhatIsIt.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/WhatIsIt.tsx)\n- [website/src/components/sections/QualityStandards.tsx](https://github.com/heilcheng/awesome-agent-skills/blob/main/website/src/components/sections/QualityStandards.tsx)\n</details>\n\n# Deployment Configuration\n\n## Overview\n\nThe **awesome-agent-skills** project is a Next.js application that serves as a comprehensive directory for AI agent skills. The deployment configuration encompasses the build system, runtime environment, and hosting setup required to deploy this web application to production. 资料来源：[website/README.md:1]()\n\nThe project is designed to be deployed on **Vercel**, the platform created by the developers of Next.js, which provides optimized deployment workflows for Next.js applications. 资料来源：[website/README.md:32-34]()\n\n## Project Architecture\n\nThe project follows a modern Next.js architecture using the App Router pattern. This architectural choice impacts how the application is built and deployed. 资料来源：[website/README.md:13]()\n\n```mermaid\ngraph TD\n    A[Source Code] --> B[Next.js Build]\n    B --> C[Static Assets]\n    B --> D[Server Components]\n    D --> E[Vercel Edge Network]\n    C --> E\n    E --> F[End Users]\n    \n    G[Environment Variables] --> B\n    H[Dependencies] --> B\n```\n\n## Build System Configuration\n\n### Package Manager Support\n\nThe project supports multiple package managers for development and dependency installation:\n\n| Package Manager | Command | Notes |\n|----------------|---------|-------|\n| npm | `npm run dev` | Default Node.js package manager |\n| yarn | `yarn dev` | Facebook's package manager |\n| pnpm | `pnpm dev` | Fast, disk space efficient |\n| bun | `bun dev` | JavaScript runtime and toolchain |\n\n资料来源：[website/README.md:7-15]()\n\n### Development Server\n\nThe development server runs locally on `http://localhost:3000` by default. This can be configured through environment variables or the Next.js configuration file. 资料来源：[website/README.md:17]()\n\n```bash\n# Starting the development server\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n### Production Build\n\nThe project uses standard Next.js build commands. When deployed to Vercel, the platform automatically detects the Next.js framework and runs the appropriate build commands. 资料来源：[website/README.md:32-34]()\n\n## Font Optimization\n\nThe project uses `next/font` for automatic font optimization. This feature optimizes fonts and removes layout shifts for improved performance. 资料来源：[website/README.md:21]()\n\n```typescript\n// Example usage from Next.js documentation\nimport { Geist } from \"next/font/google\"\n\n// Configuration is handled automatically by next/font\n```\n\nThe font optimization occurs at build time, embedding font files directly into the application for faster page loads and reduced external requests.\n\n## Theme and Styling Configuration\n\n### Dark/Light Theme Support\n\nThe application implements a CSS custom properties-based theming system that supports both dark and light modes. The theming is defined through CSS variables at the `:root` level. 资料来源：[website/index.html:1-50]()\n\n```css\n:root{\n  --bg:#000;\n  --bg1:rgba(255,255,255,0.03);\n  --bg2:rgba(255,255,255,0.05);\n  --bg3:rgba(255,255,255,0.08);\n  --border:rgba(255,255,255,0.08);\n  --border2:rgba(255,255,255,0.12);\n  --text:rgba(255,255,255,0.95);\n}\n```\n\nThe theme configuration includes:\n\n| Variable | Purpose |\n|----------|---------|\n| `--bg` | Primary background color |\n| `--bg1`, `--bg2`, `--bg3` | Background opacity variations |\n| `--border`, `--border2` | Border and divider colors |\n| `--text` | Primary text color |\n\n资料来源：[website/index.html:8-16]()\n\n### Component-Level Theming\n\nIndividual components implement theme-aware styling using Tailwind CSS utility classes with dark mode variants:\n\n```typescript\n// Example from Footer.tsx\nclassName=\"text-white dark:text-neutral-900\"\nclassName=\"bg-zinc-900 dark:bg-white\"\n```\n\n资料来源：[website/src/components/Footer.tsx:10-12]()\n\n## Environment Configuration\n\n### Public Environment Variables\n\nThe project exposes certain environment variables for public use. These are prefixed with `NEXT_PUBLIC_` and are accessible in both server and client code. 资料来源：[website/README.md:17]()\n\n### Site Metadata\n\nThe deployment includes the following metadata configuration:\n\n| Setting | Value |\n|---------|-------|\n| Site Title | Agent Skill Index |\n| Description | The Ultimate AI Agent Skills List & Tutorials |\n| Language | English (en) |\n| Theme Color | Dark (default) |\n\n资料来源：[website/index.html:2-7]()\n\n## Deployment to Vercel\n\n### Automatic Detection\n\nVercel automatically detects Next.js projects during deployment. The platform performs the following steps:\n\n1. Detects `next` in `package.json` dependencies\n2. Identifies the framework as Next.js\n3. Runs the appropriate build command\n4. Optimizes the output for edge deployment\n\n资料来源：[website/README.md:32-34]()\n\n### Deployment Links\n\nThe project includes configured deployment links for easy access:\n\n| Environment | URL | Purpose |\n|------------|-----|---------|\n| Production | agent-skill.co | Primary production site |\n| Repository | github.com/heilcheng/awesome-agent-skills | Source code hosting |\n\n资料来源：[website/src/components/Footer.tsx:7-13]()\n\n## Linting and Code Quality\n\n### ESLint Configuration\n\nThe project uses ESLint for code quality enforcement. The configuration file is located at `website/eslint.config.mjs`. 资料来源：[查询文件: website/eslint.config.mjs]()\n\nESLint runs during the development process and CI/CD pipelines to ensure code consistency and catch potential issues before deployment.\n\n### Code Style Guidelines\n\nComponents follow consistent coding patterns:\n\n- TypeScript for type safety\n- Tailwind CSS utility classes for styling\n- Dark mode support via `dark:` variants\n- Consistent naming conventions\n\n资料来源：[website/src/components/sections/QualityStandards.tsx:1-20]()\n\n## Post-Processing Configuration\n\n### PostCSS Configuration\n\nThe project uses PostCSS for processing CSS. Configuration is defined in `website/postcss.config.mjs` to support:\n\n- Tailwind CSS\n- Autoprefixer for browser compatibility\n- CSS modules (if used)\n\n资料来源：[查询文件: website/postcss.config.mjs]()\n\n## CI/CD Considerations\n\nThe repository structure supports continuous integration and deployment through GitHub. When changes are pushed to the repository:\n\n1. Vercel automatically pulls the latest changes\n2. Build process runs automatically\n3. Preview deployments are created for pull requests\n4. Production deployment occurs on merges to main\n\n资料来源：[website/src/components/sections/Contributing.tsx:25-35]()\n\n## Development Workflow\n\n```mermaid\ngraph LR\n    A[Local Development] -->|npm run dev| B[Dev Server]\n    B --> C[Code Changes]\n    C --> D[Auto Hot Reload]\n    D --> B\n    \n    E[Git Push] --> F[Vercel]\n    F --> G[Build]\n    G --> H[Preview Deployment]\n    \n    I[Merge to Main] --> F\n    H --> J[Production Deployment]\n```\n\n## Related Documentation\n\nFor additional deployment and development information, refer to:\n\n- [Next.js Documentation](https://nextjs.org/docs) - Official Next.js features and API documentation\n- [Vercel Platform](https://vercel.com/docs) - Deployment platform documentation\n- [Tailwind CSS](https://tailwindcss.com/docs) - Styling framework documentation\n\n## Summary\n\nThe deployment configuration for awesome-agent-skills is straightforward, leveraging Next.js's built-in deployment capabilities with Vercel. Key aspects include:\n\n1. **Framework**: Next.js with App Router\n2. **Hosting**: Vercel (automatic detection and deployment)\n3. **Styling**: Tailwind CSS with dark/light theme support\n4. **Fonts**: Automatic optimization via next/font\n5. **Package Managers**: Supports npm, yarn, pnpm, and bun\n6. **Code Quality**: ESLint integration for consistent code standards\n\nThe configuration is production-ready out of the box and requires minimal additional setup for deployment.\n\n---\n\n---\n\n## Doramagic 踩坑日志\n\n项目：heilcheng/awesome-agent-skills\n\n摘要：发现 10 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：身份坑 - 仓库名和安装名不一致。\n\n## 1. 身份坑 · 仓库名和安装名不一致\n\n- 严重度：medium\n- 证据强度：runtime_trace\n- 发现：仓库名 `awesome-agent-skills` 与安装入口 `skills` 不完全一致。\n- 对用户的影响：用户照着仓库名搜索包或照着包名找仓库时容易走错入口。\n- 建议检查：在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。\n- 复现命令：`npx skills`\n- 防护动作：页面必须同时展示 repo 名和真实安装入口，避免用户搜索错包。\n- 证据：identity.distribution | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | repo=awesome-agent-skills; install=skills\n\n## 2. 配置坑 · 可能修改宿主 AI 配置\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。\n- 对用户的影响：安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。\n- 建议检查：列出会写入的配置文件、目录和卸载/回滚步骤。\n- 防护动作：涉及宿主配置目录时必须给回滚路径，不能只给安装命令。\n- 证据：capability.host_targets | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | host_targets=claude\n\n## 3. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | README/documentation is current enough for a first validation pass.\n\n## 4. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | last_activity_observed missing\n\n## 5. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 6. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 7. 安全/权限坑 · 来源证据：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_dc99192b4a9b4b8089f4f6696f332a7d | https://github.com/heilcheng/awesome-agent-skills/issues/218 | 来源讨论提到 api key 相关条件，需在安装/试用前复核。\n\n## 8. 安全/权限坑 · 来源证据：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_0703404b82014fe3baddd3eaab1100bd | https://github.com/heilcheng/awesome-agent-skills/issues/226 | 来源讨论提到 npm 相关条件，需在安装/试用前复核。\n\n## 9. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | issue_or_pr_quality=unknown\n\n## 10. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | release_recency=unknown\n\n<!-- canonical_name: heilcheng/awesome-agent-skills; human_manual_source: deepwiki_human_wiki -->\n",
      "summary": "DeepWiki/Human Wiki 完整输出，末尾追加 Discovery Agent 踩坑日志。",
      "title": "Human Manual / 人类版说明书"
    },
    "pitfall_log": {
      "asset_id": "pitfall_log",
      "filename": "PITFALL_LOG.md",
      "markdown": "# Pitfall Log / 踩坑日志\n\n项目：heilcheng/awesome-agent-skills\n\n摘要：发现 10 个潜在踩坑项，其中 0 个为 high/blocking；最高优先级：身份坑 - 仓库名和安装名不一致。\n\n## 1. 身份坑 · 仓库名和安装名不一致\n\n- 严重度：medium\n- 证据强度：runtime_trace\n- 发现：仓库名 `awesome-agent-skills` 与安装入口 `skills` 不完全一致。\n- 对用户的影响：用户照着仓库名搜索包或照着包名找仓库时容易走错入口。\n- 建议检查：在 npm/PyPI/GitHub 上确认包名映射和官方 README 说明。\n- 复现命令：`npx skills`\n- 防护动作：页面必须同时展示 repo 名和真实安装入口，避免用户搜索错包。\n- 证据：identity.distribution | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | repo=awesome-agent-skills; install=skills\n\n## 2. 配置坑 · 可能修改宿主 AI 配置\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：项目面向 Claude/Cursor/Codex/Gemini/OpenCode 等宿主，或安装命令涉及用户配置目录。\n- 对用户的影响：安装可能改变本机 AI 工具行为，用户需要知道写入位置和回滚方法。\n- 建议检查：列出会写入的配置文件、目录和卸载/回滚步骤。\n- 防护动作：涉及宿主配置目录时必须给回滚路径，不能只给安装命令。\n- 证据：capability.host_targets | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | host_targets=claude\n\n## 3. 能力坑 · 能力判断依赖假设\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：README/documentation is current enough for a first validation pass.\n- 对用户的影响：假设不成立时，用户拿不到承诺的能力。\n- 建议检查：将假设转成下游验证清单。\n- 防护动作：假设必须转成验证项；没有验证结果前不能写成事实。\n- 证据：capability.assumptions | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | README/documentation is current enough for a first validation pass.\n\n## 4. 维护坑 · 维护活跃度未知\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：未记录 last_activity_observed。\n- 对用户的影响：新项目、停更项目和活跃项目会被混在一起，推荐信任度下降。\n- 建议检查：补 GitHub 最近 commit、release、issue/PR 响应信号。\n- 防护动作：维护活跃度未知时，推荐强度不能标为高信任。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | last_activity_observed missing\n\n## 5. 安全/权限坑 · 下游验证发现风险项\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：下游已经要求复核，不能在页面中弱化。\n- 建议检查：进入安全/权限治理复核队列。\n- 防护动作：下游风险存在时必须保持 review/recommendation 降级。\n- 证据：downstream_validation.risk_items | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 6. 安全/权限坑 · 存在评分风险\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：no_demo\n- 对用户的影响：风险会影响是否适合普通用户安装。\n- 建议检查：把风险写入边界卡，并确认是否需要人工复核。\n- 防护动作：评分风险必须进入边界卡，不能只作为内部分数。\n- 证据：risks.scoring_risks | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | no_demo; severity=medium\n\n## 7. 安全/权限坑 · 来源证据：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：Add Rug Munch Intelligence - Crypto Security & Analytics Agent Skills (x402, Base + Solana)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源问题仍为 open，Pack Agent 需要复核是否仍影响当前版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_dc99192b4a9b4b8089f4f6696f332a7d | https://github.com/heilcheng/awesome-agent-skills/issues/218 | 来源讨论提到 api key 相关条件，需在安装/试用前复核。\n\n## 8. 安全/权限坑 · 来源证据：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n\n- 严重度：medium\n- 证据强度：source_linked\n- 发现：GitHub 社区证据显示该项目存在一个安全/权限相关的待验证问题：⚡ Pay-per-call web search, scraping & AI tools for your agent — VERITY (L402)\n- 对用户的影响：可能影响授权、密钥配置或安全边界。\n- 建议检查：来源显示可能已有修复、规避或版本变化，说明书中必须标注适用版本。\n- 防护动作：不得脱离来源链接放大为确定性结论；需要标注适用版本和复核状态。\n- 证据：community_evidence:github | cevd_0703404b82014fe3baddd3eaab1100bd | https://github.com/heilcheng/awesome-agent-skills/issues/226 | 来源讨论提到 npm 相关条件，需在安装/试用前复核。\n\n## 9. 维护坑 · issue/PR 响应质量未知\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：issue_or_pr_quality=unknown。\n- 对用户的影响：用户无法判断遇到问题后是否有人维护。\n- 建议检查：抽样最近 issue/PR，判断是否长期无人处理。\n- 防护动作：issue/PR 响应未知时，必须提示维护风险。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | issue_or_pr_quality=unknown\n\n## 10. 维护坑 · 发布节奏不明确\n\n- 严重度：low\n- 证据强度：source_linked\n- 发现：release_recency=unknown。\n- 对用户的影响：安装命令和文档可能落后于代码，用户踩坑概率升高。\n- 建议检查：确认最近 release/tag 和 README 安装命令是否一致。\n- 防护动作：发布节奏未知或过期时，安装说明必须标注可能漂移。\n- 证据：evidence.maintainer_signals | github_repo:1124920990 | https://github.com/heilcheng/awesome-agent-skills | release_recency=unknown\n",
      "summary": "用户实践前最可能遇到的身份、安装、配置、运行和安全坑。",
      "title": "Pitfall Log / 踩坑日志"
    },
    "prompt_preview": {
      "asset_id": "prompt_preview",
      "filename": "PROMPT_PREVIEW.md",
      "markdown": "# awesome-agent-skills - Prompt Preview\n\n> Copy the prompt below into your AI host before installing anything.\n> Its purpose is to let you safely feel the project's workflow, not to claim the project has already run.\n\n## Copy this prompt\n\n```text\nYou are using an independent Doramagic capability pack for heilcheng/awesome-agent-skills.\n\nProject:\n- Name: awesome-agent-skills\n- Repository: https://github.com/heilcheng/awesome-agent-skills\n- Summary: Tutorials, Guides and Agent Skills Directories\n- Host target: claude\n\nGoal:\nHelp me evaluate this project for the following task without installing it yet: Tutorials, Guides and Agent Skills Directories\n\nBefore taking action:\n1. Restate my task, success standard, and boundary.\n2. Identify whether the next step requires tools, browser access, network access, filesystem access, credentials, package installation, or host configuration.\n3. Use only the Doramagic Project Pack, the upstream repository, and the source-linked evidence listed below.\n4. If a real command, install step, API call, file write, or host integration is required, mark it as \"requires post-install verification\" and ask for approval first.\n5. If evidence is missing, say \"evidence is missing\" instead of filling the gap.\n\nPreviewable capabilities:\n- Capability 1: Tutorials, Guides and Agent Skills Directories\n\nCapabilities that require post-install verification:\n- Capability 1: Use the source-backed project context to guide one small, checkable workflow step.\n\nCore service flow:\n1. project-introduction: Project Introduction. Produce one small intermediate artifact and wait for confirmation.\n2. quick-start-guide: Quick Start Guide. Produce one small intermediate artifact and wait for confirmation.\n3. compatible-agents: Compatible Agents. Produce one small intermediate artifact and wait for confirmation.\n4. nextjs-structure: Next.js Website Structure. Produce one small intermediate artifact and wait for confirmation.\n5. skill-directories: Skill Directories. Produce one small intermediate artifact and wait for confirmation.\n\nSource-backed evidence to keep in mind:\n- https://github.com/heilcheng/awesome-agent-skills\n- https://github.com/heilcheng/awesome-agent-skills#readme\n- README.md\n- CONTRIBUTING.md\n- website/src/components/sections/HowItWorks.tsx\n- website/src/components/sections/CompatibleAgents.tsx\n- website/next.config.ts\n- website/tsconfig.json\n- website/src/app/layout.tsx\n- website/src/app/page.tsx\n\nFirst response rules:\n1. Start Step 1 only.\n2. Explain the one service action you will perform first.\n3. Ask exactly three questions about my target workflow, success standard, and sandbox boundary.\n4. Stop and wait for my answers.\n\nStep 1 follow-up protocol:\n- After I answer the first three questions, stay in Step 1.\n- Produce six parts only: clarified task, success standard, boundary conditions, two or three options, tradeoffs for each option, and one recommendation.\n- End by asking whether I confirm the recommendation.\n- Do not move to Step 2 until I explicitly confirm.\n\nConversation rules:\n- Advance one step at a time and wait for confirmation after each small artifact.\n- Write outputs as recommendations or planned checks, not as completed execution.\n- Do not claim tests passed, files changed, commands ran, APIs were called, or the project was installed.\n- If the user asks for execution, first provide the sandbox setup, expected output, rollback, and approval checkpoint.\n```\n",
      "summary": "不安装项目也能感受能力节奏的安全试用 Prompt。",
      "title": "Prompt Preview / 安装前试用 Prompt"
    },
    "quick_start": {
      "asset_id": "quick_start",
      "filename": "QUICK_START.md",
      "markdown": "# Quick Start / 官方入口\n\n项目：heilcheng/awesome-agent-skills\n\n## 官方安装入口\n\n### Node.js / npx · 官方安装入口\n\n```bash\nnpx skills\n```\n\n来源：https://github.com/heilcheng/awesome-agent-skills#readme\n\n## 来源\n\n- repo: https://github.com/heilcheng/awesome-agent-skills\n- docs: https://github.com/heilcheng/awesome-agent-skills#readme\n",
      "summary": "从项目官方 README 或安装文档提取的开工入口。",
      "title": "Quick Start / 官方入口"
    }
  },
  "validation_id": "dval_e7849b22030c458ea2d2e6c83b3bd1f6"
}
