PnP AI Skills for Agentic Coding Tools

This repo currently provides one skill: spfx-best-practices for SharePoint Framework development.

Skills

• spfx-best-practices: Best practices for SPFx web parts, extensions, and libraries.

Installation

This plugin works with multiple AI coding assistants that support skills.

Claude Code (CLI)

Official Docs

Run these commands inside the Claude Code CLI (the terminal app, not the VSCode extension):

/plugin marketplace add pnp/ai-skills
/plugin install ai-skills

To update:

/plugin marketplace update

GitHub Copilot

Official Docs

Clone or copy skills to your project or global config:

Project-level (recommended):

# Clone to .github/skills/ in your project
git clone https://github.com/pnp/ai-skills.git /tmp/ai-skills
cp -r /tmp/ai-skills/skills/* .github/skills/

Global (all projects):

mkdir -p ~/.copilot/skills
cp -r /tmp/ai-skills/skills/* ~/.copilot/skills/

OpenCode

Official Docs

git clone https://github.com/pnp/ai-skills.git /tmp/ai-skills

# Global installation (directory names must match frontmatter 'name' field)
mkdir -p ~/.config/opencode/skills
for skill_file in /tmp/ai-skills/skills/*/SKILL.md; do
  skill_name=$(grep -m1 "^name:" "$skill_file" | sed 's/name: *//')
  mkdir -p ~/.config/opencode/skills/$skill_name
  cp "$skill_file" ~/.config/opencode/skills/$skill_name/SKILL.md
done

---

Suggested AGENTS.md / CLAUDE.md Snippet

These snippets go in your project root (the root directory of your codebase, next to your .git folder):

• Claude Code: CLAUDE.md
• OpenCode: AGENTS.md

Prerequisite: install/sync the ai-skills plugin in your assistant runtime so the skill name resolves.

# Agent Guidance: ai-skills

Workflow: skim repo patterns -> use spfx-best-practices by name -> implement smallest-change -> note conflicts.

Routing (invoke by name)
- SPFx: spfx-best-practices

Compressed snippet (generated)

Run ./scripts/generate-skill-index-snippets.sh --update-readme to refresh the block below.

[ai-skills]|flow:{skim repo patterns -> use spfx-best-practices by name -> implement smallest-change -> note conflicts}
|route:
|spfx:{spfx-best-practices}

---

How to Use the SPFx Skill

Use the skill for new web parts/extensions, refactors, or reviews. Example prompts:

• “Add a new SPFx React web part to this solution using spfx-best-practices.”
• “Refactor this web part to move data access into services and add localization.”
• “Review this extension for performance, security, and accessibility issues.”

Repository Structure

ai-skills/
├── .claude-plugin/
│   └── plugin.json         # Plugin manifest