How to effectively use skills with Coding Agents?

Thursday, April 2, 2026

You can treat skills as reusable “mini-brains” that your coding agents mount into their workspace, then lazy‑load when needed. Below is a practical, opinionated guide to using skills.sh effectively with Claude Code, GitHub Copilot agents, and OpenCode.[1][2]

1. Mental model: what a Skill actually is

At their core, skills are folders that bundle three things for your agent:[3][1]

  • Instructions: SKILL.md, plus optional docs like FORMS.md or REFERENCE.md with workflows and checklists.[1]
  • Code: scripts or tools (bash, Python, Node, etc.) that the agent can execute deterministically.[1]
  • Resources: reference material like API docs, schemas, templates, or large examples.[1]

They’re designed for progressive loading:

  • Level 1: only name and description metadata are always loaded into the system prompt.[1]
  • Level 2: SKILL.md is read only when the skill is triggered.[1]
  • Level 3+: extra files and scripts are accessed only if instructions reference them.[1]

This matters for frontend work because you can ship large design systems, API docs, or test playbooks without blowing the context window.[1]

2. Installing and managing skills with skills.sh

skills.sh is a CLI that implements the open Agent Skills format and gives you a package‑manager feel for skills across tools.[2]

2.1 Install the CLI

On a typical dev machine:

curl -sSL https://skills.sh/install | bash
# or use the install command from the site’s instructions
skills --version

This sets up a global skills command and a default skills directory (commonly under ~/.skills or a configured path).[2]

2.2 Discover and install skills

Use the registry (for example, skills.sh or community repos) to find skills:[2]

# Search for skills
skills search frontend

# Install a skill globally
skills install anthropic/frontend-design
skills install your-handle/react-architecture

You can also clone curated collections, such as Claude Code skill libraries or community repos of Copilot/Claude skills.[4][2]

2.3 Link skills into a project

For project‑scoped behavior, link installed skills into your repo:

cd your-frontend-app
skills link anthropic/frontend-design .skills/frontend-design
skills link your-handle/react-architecture .skills/react-architecture

Now your editor/agent integrations can point to .skills/ and auto‑discover them. Use this per‑repo to keep skills aligned with that codebase’s stack.[1]

3. Designing great frontend skills

A good frontend skill feels like a well‑written internal runbook. Think “team playbook in a folder” instead of “prompt glued into a file”.

3.1 Structure SKILL.md frontmatter wisely

Most skill consumers (Claude Code, Copilot agents, OpenCode plugins) expect SKILL.md with YAML frontmatter:[3][1]

---
name: frontend-design-review
description: |
  Perform UX/UI and semantic HTML reviews for modern web frontends.
user-invocable: true
disable-model-invocation: false
tags: [frontend, design, accessibility]
---

# Goal
You are a frontend design reviewer for React/Next.js apps…

# Workflow
1. Scan the component tree and layout files…
2. Check accessibility (ARIA, landmarks, focus management)…
3. Propose concrete HTML/CSS/JSX changes…

Key flags (as used by Copilot agents and inspired by the spec):[5][3]

  • user-invocable: true – appears as a slash command like /frontend-design-review.[5]
  • disable-model-invocation: true – only runs when you explicitly call it.[5]

Use this to separate “always‑on background skills” (e.g., repo architecture guidance) from “on‑demand utilities” (e.g., Lighthouse‑style audits).

3.2 Bundle scripts and resources

Examples of what to include for frontend work:[1]

  • Scripts:
  • lint_frontend.sh that runs ESLint, stylelint, TypeScript checks.
  • bundle_analyzer.mjs to inspect bundle size and suggest code‑splitting.
  • Resources:
  • DESIGN_SYSTEM.md with your tokens, spacing scales, and component conventions.
  • API_SCHEMA.graphql or OPENAPI.yaml for frontend API clients.

The agent reads these only when referenced in SKILL.md, so you can be generous.[1]

4. Using skills with Claude Code

Claude Code supports custom filesystem‑based skills directly in the environment it spins up.[1]

4.1 Make Claude Code see your skills

In Claude Code’s workspace (local repo or remote container), ensure skills directories are mounted and follow the spec:[1]

# Example layout inside your repo or attached volume
.claude/
  skills/
    frontend-design-review/
      SKILL.md
      DESIGN_SYSTEM.md
      audit-layout.ts
    react-architecture/
      SKILL.md
      patterns/
        state-management.md
        routing.md

Claude Code automatically discovers skills with SKILL.md in those directories when configured to allow skills (via settings or container configuration).[1]

If you’re using skills.sh, you can sync or link them into .claude/skills:

skills link anthropic/frontend-design .claude/skills/frontend-design-review

4.2 Triggering skills in Claude Code

Typical usage patterns:[2][1]

  • Natural language:
    “Use the frontend-design-review skill to audit my DashboardLayout.tsx for accessibility and CSS architecture issues.”

  • Slash commands (where supported):
    /frontend-design-review Check app/layout.tsx and Sidebar.tsx for responsive issues

Claude reads SKILL.md and any referenced files (for example, DESIGN_SYSTEM.md) via bash, then follows that workflow. For scripts, it will run them and only consume the output in context.[1]

4.3 Frontend‑focused skill examples

  • frontend-design: opinionated layout and visual hierarchy review, tied to your design system.[6][2]
  • nextjs-routing: conventions for file‑based routing, dynamic segments, and route groups.
  • perf-web-vitals: audits bundle size, lazy loading, third‑party scripts, and CLS/LCP heuristics using CLI tools wrapped in scripts.

This lets you turn Claude Code into “your team’s front‑end principal engineer in a box” instead of a generic LLM.

5. Using skills with GitHub Copilot agents

GitHub Copilot’s agent skills follow the same “folder of instructions, scripts, and resources” pattern and can be used in VS Code and via the Copilot CLI.[7][3][5]

5.1 Wiring skills.sh into Copilot

Copilot expects skills in .github/skills/ within your repo. Using skills.sh you can:[8][5]

cd your-frontend-app
mkdir -p .github/skills
skills link anthropic/frontend-design .github/skills/frontend-design
skills link your-handle/react-architecture .github/skills/react-architecture

VS Code’s Copilot agents will then discover them as Agent Skills.[3][5]

5.2 Using skills inside VS Code

In Copilot Chat (VS Code):[5]

  • Type / to see available skills, then pick /frontend-design or /react-architecture.[5]
  • Or reference by name:
    “Use the react-architecture skill to refactor this feature into a proper slice‑based state structure.”

Copilot will:[5]

  1. Read name and description to match questions to skills.
  2. Load SKILL.md when the skill is invoked.
  3. Only access other files (templates, scripts) if the skill instructions refer to them.[5]

Use frontmatter flags to control whether Copilot can auto‑invoke the skill vs requiring a slash command.[5]

5.3 Copilot CLI and repo‑wide workflows

Copilot CLI also supports agent skills for repository‑level tasks. This is ideal for:[7]

  • “Run the perf-web-vitals skill on this repo and summarize the main bundle bottlenecks.”
  • “Use design-system-enforcement to find components violating token usage.”

You get consistent behavior across editor and CLI because the skills live in the repo.[8][7]

6. Using skills with OpenCode

OpenCode is a CLI‑first coding agent that supports skills via community plugins (for example, opencode-skillful) that implement the Agent Skills spec and lazy loading.[9][10][11]

6.1 Enable skills support

Install the skills plugin (such as opencode-skillful) as documented in its repo:[10]

# Example, actual command may differ
opencode plugins install zenobi-us/opencode-skillful

This plugin interprets skills directories and injects them lazily into prompts.[10]

6.2 Place or link skills for OpenCode

OpenCode skills are often discovered from a configured skills directory or from the repo (depending on plugin config):[10]

# Global skills
skills install your-handle/git-commit
skills link your-handle/git-commit ~/.opencode/skills/git-commit

# Project skills
cd your-frontend-app
skills link anthropic/frontend-design .skills/frontend-design

The git-commit skill example shows how you can teach OpenCode to generate commit messages by examining current changes.[9]

6.3 Invoking skills in OpenCode

You can:

  • Explicitly reference a skill:
    opencode "Use the git-commit skill to draft commit messages for staged changes"[9]
  • Or rely on auto‑activation where supported: prompts like “Commit the current open changes” can trigger the skill when the plugin recognizes the intent.[9]

Lazy loading means OpenCode will only bring the relevant skill instructions into the context when needed.[11][10]

7. Strategy: how to effectively use skills as a frontend dev

Here’s a practical pattern you can adopt for your own workflow and content:

7.1 Define a core skill stack per repo

For each frontend repo, pick 3–7 high‑leverage skills:

  • Architecture: component boundaries, state management, routing patterns.
  • UI/UX: design reviews, accessibility, responsive patterns.
  • Quality: test strategy, lint rules, performance budgets.
  • Tooling: commit messages, PR templates, release notes.

Install them via skills.sh and link them into .claude/skills, .github/skills, and/or .skills depending on your tools.[8][10][2][1]

7.2 Normalize on slash commands and “named workflows”

Train yourself (and your team) to call skills by name:

  • /frontend-design-review, /react-architecture, /perf-web-vitals in Copilot/Claude.
  • “Use git-commit skill” or “Use release-notes skill” in OpenCode.[10][9][5]

This reduces prompt variance and makes behavior more predictable.

7.3 Iterate on skills like code

Treat skills as versioned, reviewable artifacts:

  • Store them in Git, with PRs and reviews.
  • Keep SKILL.md small and focused; push large docs into separate files.
  • Refine them whenever the agent output shows repeated misunderstandings.

As your skills mature, your coding agents start to feel like well‑trained team members instead of generic assistants.

Sources [1] Agent Skills - Claude API Docs https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview [2] What are Agent Skills? How I use skills with my AI Coding Agents https://www.youtube.com/watch?v=RHAd6TUUIE [3] About agent skills - GitHub Docs https://docs.github.com/en/copilot/concepts/agents/about-agent-skills [4] alirezarezvani/claude-skills: 220+ Claude Code skills & agent … https://github.com/alirezarezvani/claude-skills [5] Use Agent Skills in VS Code https://code.visualstudio.com/docs/copilot/customization/agent-skills [6] Claude Code Skills & skills.sh - Crash Course - YouTube https://www.youtube.com/watch?v=rcRS8-7OgBo [7] Creating agent skills for GitHub Copilot CLI https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/create-skills [8] Creating agent skills for GitHub Copilot https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/create-skills [9] Skills in opencode : r/opencodeCLI - Reddit https://www.reddit.com/r/opencodeCLI/comments/1q5te73/skillsinopencode/ [10] zenobi-us/opencode-skillful: OpenCode Skills Plugin - GitHub https://github.com/zenobi-us/opencode-skillful [11] OpenCode Skills Feature - The Lazy Loading Game Changer https://www.youtube.com/watch?v=M0PwzJPxMU [12] Skills.sh - LEVEL UP Your Claude Code Agents! - YouTube https://www.youtube.com/watch?v=vDBUf533eM [13] Can anyone summarize the "skills" + Claude Code or others agents … https://www.reddit.com/r/ClaudeCode/comments/1qg1rbh/cananyonesummarizetheskillsclaudecodeor/ [14] [PDF] The Complete Guide to Building Skills for Claude | Anthropic https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf [15] Agent Skills | Cursor Docs https://cursor.com/docs/skills

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)