shield_lock
金大哥
← 返回 Skill 列表
extension
分类: AI Agent 能力无需 API Key

use-skills-npm-package

用于发现、安装和管理多个编码代理中可重用代理技能的CLI工具。能够从仓库、本地源和社区仓库中高效地发现技能。是发现新的Flutter/Dart技能的重要资源。

person作者: jakexiaohubgithub
open_in_new仓库download下载资源包

Using the Skills NPM Package

The skills npm package is a powerful CLI tool published by Vercel Labs that manages agent skills - reusable instruction sets that extend coding agent capabilities across multiple platforms.

💡 COMPANION SKILL: The official find-skills skill (from vercel-labs/skills package) provides AI-assisted skill discovery and evaluation. Always load it alongside this skill for enhanced discovery capabilities.

What is the Skills Package?

The skills CLI is a unified interface for:

  • Discovering skills from GitHub repositories and other sources
  • Installing skills to multiple coding agents simultaneously
  • Managing skill installations with updates, removal, and listing
  • Creating new skills following the Agent Skills specification
  • Searching skill repositories by keyword or interactively

Official Documentation: https://www.npmjs.com/package/skills

Installation & Setup

Install the CLI

npm install -g skills
# or use npx without installation
npx skills [command]

Verify Installation

skills --version
npx skills --help

Key Features & Capabilities

⭐ Enhanced Discovery with find-skills

Use the official find-skills skill for intelligent skill discovery:

  • AI-powered skill evaluation and recommendations
  • Contextual skill search based on your needs
  • Quality assessment and compatibility checking
  • Integration guidance and best practices

Load this skill when you need to find skills for specific use cases.

1. Discover Skills

Interactive Search - Browse available skills visually:

npx skills find

Keyword Search - Find skills by specific criteria:

npx skills find typescript
npx skills find flutter
npx skills find supabase

2. Install Skills from Repositories

From GitHub (shorthand):

npx skills add vercel-labs/agent-skills

From GitHub (full URL):

npx skills add https://github.com/vercel-labs/agent-skills

Direct skill path:

npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines

From GitLab or other git sources:

npx skills add https://gitlab.com/org/repo
npx skills add git@github.com:owner/repo.git

From local path:

npx skills add ./my-local-skills

3. Installation Options

List available skills without installing:

npx skills add vercel-labs/agent-skills --list

Install specific skills:

npx skills add owner/repo --skill frontend-design --skill skill-creator

Install to specific agents (e.g., GitHub Copilot, Claude Code):

npx skills add vercel-labs/agent-skills -a github-copilot -a claude-code

Install all skills:

npx skills add vercel-labs/agent-skills --all

Global installation (available across projects):

npx skills add vercel-labs/agent-skills -g

Non-interactive (CI/CD friendly):

npx skills add vercel-labs/agent-skills --skill frontend-design -y

4. Manage Installed Skills

List all installed skills:

npx skills list
# or
npx skills ls

Filter by agent:

npx skills ls -a claude-code -a cursor

Check for updates:

npx skills check

Update skills to latest versions:

npx skills update

Remove skills:

npx skills remove my-skill
npx skills remove --all  # Remove all

5. Create New Skills

Create new skill template:

npx skills init my-skill

Skill structure (SKILL.md template):

---
name: my-skill
description: What this skill does and when to use it
---

# My Skill

Introduction and context...

## When to Use

Describe scenarios where this skill should be used.

## Steps

1. First, do this
2. Then, do that

Supported Agents

The skills CLI works with 40+ coding agents including:

  • GitHub Copilot - Copilot in VS Code and other editors
  • Claude Code - Anthropic's Claude Code platform
  • Cursor - Advanced code editor with AI
  • OpenCode - Open-source agent platform
  • Cline - Another popular coding agent
  • Windsurf - Code editor with AI capabilities
  • Continue - Open-source code completion
  • And 30+ more agents (Amp, Kimi CLI, Replit, Codex, etc.)

Each agent stores skills in its own directory:

  • ~/.claude/skills/ (Claude Code - global)
  • .claude/skills/ (Claude Code - project)
  • .cursor/skills/ (Cursor - project)
  • ~/.cursor/skills/ (Cursor - global)
  • Similar patterns for other agents

Skill Discovery Workflow for Flutter

Step 1: Search for Available Skills

# Search for Flutter-related skills
npx skills find flutter

# Search for state management
npx skills find "state management"

# Search for specific integrations
npx skills find supabase

Step 2: List Before Installing

# See what's available in a repository
npx skills add vercel-labs/agent-skills --list

# Filter to specific skills
npx skills add some-org/flutter-skills --list

Step 3: Preview Skill Content

When considering a skill:

  1. View the source repository
  2. Read the SKILL.md file directly on GitHub
  3. Assess relevance and quality
  4. Check last update date

Step 4: Install Selected Skills

# Install specific Flutter-related skills
npx skills add my-flutter-repo/skills --skill "flutter-testing" --skill "performance-optimization"

# Install to project scope (committed with code)
npx skills add my-flutter-repo/skills --skill "flutter-testing"

# Install globally (available everywhere)
npx skills add my-flutter-repo/skills -g

Step 5: Verify Installation

npx skills ls -a github-copilot

Finding Flutter & Supabase Skills

Official Skill Repositories

Vercel Labs Agent Skills:

  • Repository: https://github.com/vercel-labs/agent-skills
  • Command: npx skills add vercel-labs/agent-skills
  • Contains frontend, backend, and general development skills

Skills Directory:

  • Browse: https://skills.sh/
  • Search and filter by topic, agent, and category
  • Community-contributed and curated skills

Searching for Specific Technologies

Search patterns:

npx skills find flutter
npx skills find supabase
npx skills find "firebase integration"
npx skills find "state management"
npx skills find testing

GitHub search for skill repositories:

  • Search GitHub for "agent-skills" + technology
  • Look for repositories with multiple SKILL.md files
  • Check .github/skills/, skills/, or .claude/skills/ directories

Important: Always Check Current Documentation

⚠️ This skill description is based on skills v1.4.1

The npm package updates frequently with new features and agent support. When using this skill:

  1. Always check the latest documentation:

    • https://www.npmjs.com/package/skills
    • GitHub repo: https://github.com/vercel-labs/skills

  2. Verify agent compatibility:

    • New agents are added regularly
    • Agent paths may change
    • Check latest supported agents list

  3. Check for new search features:

    • The CLI evolves with new commands
    • Search capabilities expand over time
    • New installation options may be available

  4. Review breaking changes:

    • Before major version updates
    • Especially if using in CI/CD pipelines
    • Check release notes on npm

Best Practices

✅ DOs

  • Use --list first to preview available skills before installing
  • Search multiple sources - Not all skills are in one repository
  • Keep skills updated - Run npx skills update regularly
  • Organize by scope - Use project scope for team-specific skills, global for personal tools
  • Version control - Commit symlink information or skill references
  • Document reasoning - Note why a skill was installed and what it does

❌ DON'Ts

  • Don't install all skills indiscriminately - Clutter reduces clarity
  • Don't skip the --list preview - Avoid installing irrelevant skills
  • Don't ignore skill sources - Verify repository credibility
  • Don't forget to read SKILL.md - Understand what you're installing
  • Don't use outdated repositories - Watch for abandoned projects

Troubleshooting

"No skills found"

# Ensure you're searching valid repositories
npx skills add owner/repo --list

# Check for typos in repository name
# Verify repository contains SKILL.md files

Skill not loading in agent

  • Verify installation path: npx skills ls
  • Check agent's skill directory exists
  • Ensure SKILL.md has proper YAML frontmatter
  • Try reinstalling: npx skills add source --skill name -y

Permission errors

# For global installation
npx skills add repo -g

# Or use --copy instead of symlink
npx skills add repo --copy

Conflicting skills

  • Skills can have same name across agents
  • Use -a flag to target specific agents
  • Remove first if upgrading: npx skills remove old-skill

Integration with Flutter Development

Recommended Workflow

  1. When starting new project or feature:

    npx skills find flutter
npx skills add flutter-community/skills --list

  2. When exploring new patterns:

    npx skills find "state management"
npx skills find "testing"

  3. When integrating external services:

    npx skills find supabase
npx skills find firebase
npx skills find stripe

  4. Keep skills current:

    npx skills check
npx skills update

Commands Quick Reference

| Command | Purpose | |---------|---------| | npx skills add <repo> | Install skills from repository | | npx skills find [query] | Search for skills | | npx skills list | List installed skills | | npx skills check | Check for updates | | npx skills update | Update all skills | | npx skills remove <skill> | Remove a skill | | npx skills init [name] | Create new skill template |

Resources

  • Official find-skills Skill: https://github.com/vercel-labs/skills/tree/main/skills/find-skills
  • npm Package: https://www.npmjs.com/package/skills
  • GitHub Repository: https://github.com/vercel-labs/skills
  • Skills Directory: https://skills.sh/
  • Agent Skills Spec: https://agentskills.io/
  • Vercel Blog: https://vercel.com/blog