Skill Creator

Skill Creator

This skill guides you through creating effective, reusable AI agent skills.

Core Principles

1. Concise is Key: Only add context the agent doesn't already have. Challenge each piece: "Does this justify its token cost?"
2. Appropriate Freedom: Match specificity to task fragility - use guardrails for fragile operations, flexibility for adaptable tasks.
3. Progressive Disclosure: Keep SKILL.md lean (

This creates a skill directory with SKILL.md template and resource directories.

### Step 3: Write the SKILL.md

#### Frontmatter (Required)

```yaml
---
name: skill-name
description: What the skill does AND when to use it. Include specific triggers.
---

Critical: The description is the primary trigger mechanism. Include:

• What the skill does
• Specific scenarios that trigger it
• File types or task patterns it handles

Body Structure

Choose a structure based on skill type:

Workflow-Based (sequential processes):

# Skill Title
## Overview
## Workflow Decision Tree
## Step 1: [Action]
## Step 2: [Action]

Task-Based (tool collections):

# Skill Title
## Overview
## Quick Start
## Task: [Operation 1]
## Task: [Operation 2]

Step 4: Add Resources (If Needed)

• scripts/: For code that's rewritten repeatedly or needs deterministic reliability
• references/: For detailed docs that should load only when needed
• assets/: For templates, images, or files used in output

Step 5: Install the Skill

npx skills add ./ -y

This copies the skill to personal-skills and configures all detected agent applications.

Quality Checklist

Before finishing, verify:

• [ ] Description clearly states WHEN to use the skill
• [ ] Instructions are actionable and specific
• [ ] No redundant explanations (trust agent intelligence)
• [ ] Examples are concrete and realistic
• [ ] Resource files are referenced from SKILL.md
• [ ] Unused resource directories are deleted

Example: Creating a Skill from Task

Task completed: Set up a React project with TypeScript, ESLint, and Tailwind CSS

Skill creation:

---
name: react-ts-setup
description: Initialize React projects with TypeScript, ESLint, and Tailwind CSS. Use when creating new React applications, setting up frontend projects, or when user asks for React + TypeScript + Tailwind setup.
---

# React TypeScript Setup

## Overview
Quickly scaffold a React project with TypeScript, ESLint, and Tailwind CSS configured.

## Instructions

1. Create project with Vite:
   ```bash
   npm create vite@latest {project-name} -- --template react-ts
   cd {project-name}
   ```

2. Install Tailwind:
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```

3. Configure tailwind.config.js:
   ```js
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]
   ```

4. Add Tailwind directives to src/index.css:
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

5. Install ESLint plugins:
   ```bash
   npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
   ```

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: LiuYihey
• Source: LiuYihey/Auto-agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.