Amplify's skills system extends AI capabilities with purpose-built domain expertise. Skills are loaded from three directories and injected into the system prompt to guide the AI's behavior for specific tasks.
Skills overview
Skills are instruction files (SKILL.md) that tell the AI how to approach specific domains — React patterns, mobile development, API design, document generation, and more. When a skill is active, the AI follows its instructions precisely.
The SkillLoader singleton (app/lib/services/skillLoader.ts) loads skills from three directories and injects them into the system prompt via the <available_skills> section.
How skills affect AI behavior
When skills are loaded:
getRelevantSkills(tokenBudget)returns XML-tagged list:<skill name="id" description="desc"/>- This is injected into the system prompt
- The system prompt instructs the AI: "you MUST first call
list_skillsto check if a relevant skill exists" - If a skill matches, the AI calls
get_skillwith the skill name - Full SKILL.md content is loaded and the AI FOLLOWS the instructions precisely
Three skill directories
Skills are organized in three directories with different purposes:
Core skills
The 4 core skills that are always loaded:
| # | Name | Description | Priority |
| 1 | api-integration | API integration patterns including REST, GraphQL, WebSocket connections, and data fetching best practices | — |
| 2 | react-best-practices | React best practices including hooks, state management, performance optimization, and component architecture | — |
| 3 | frontend-design | Professional frontend design skill for creating beautiful, responsive UI components with modern CSS and accessibility | — |
| 4 | docx | Generate a downloadable Word (.docx) document directly in chat by wrapping full markdown content in a docxartifact tag | 90 |
Design skills
The 8 design skills bundled with Amplify:
| # | Name | Description | Template |
| 1 | react-native-component | Create single React Native / Expo component (NOT full app) | Expo App |
| 2 | appwrite (appwrite-typescript) | Appwrite TypeScript SDK — auth, database, storage, real-time, server-side admin | — |
| 3 | react-component | Create single React component / UI widget (NOT full app) | Vite React / Vite Shadcn |
| 4 | mobile-app-development | Build full mobile app with Expo Router, screens, navigation | Expo App |
| 5 | webapp-builder | Build full web application with routing, forms, backend | Multiple (Vite React, NextJS, Astro, etc.) |
| 6 | docx (docx-generation) | Generate .docx files using the docx npm package in WebContainer | blank |
| 7 | supabase-backend | Supabase backend — SQL migrations, RLS, auth, security | — |
| 8 | html-page | Create standalone HTML page / single-file website | blank |
Design systems
In addition to design skills, Amplify loads 120+ design system references from design/design-systems/. Each contains a DESIGN.md file describing a visual style inspired by real products (Apple, Stripe, Vercel, Spotify, Airbnb, Notion, Linear, shadcn, etc.). The AI can call list_design_systems and get_design_system to apply specific visual styles.
Skill definition format
Each skill is defined by a SKILL.md file with optional manifest.json.
SKILL.md format:
---
name: react-best-practices
description: >
React best practices including hooks, state management,
performance optimization, and component architecture
priority: 50
tags: react, frontend, hooks
---
# Skill: React Best Practices
## Purpose
Guide the AI to write clean, performant React code...
## Architecture Notes
...
## Implementation Rules
...
## Common Pitfalls
...
## Recommended APIs
...
## Code Standards
...
manifest.json (optional):
{
"name": "react-best-practices",
"description": "React best practices including hooks...",
"version": "1.0.0",
"priority": 50
}
If manifest.json exists, it overrides frontmatter values for name and description.
Skill loading process
The SkillLoader scans each directory:
- Reads each subdirectory
- Looks for
SKILL.mdfile - Tries
manifest.jsonfirst, falls back to YAML frontmatter - If neither: uses first non-heading, non-empty line as description
- Stores in
_skillsMap keyed by lowercase name - Also supports legacy single
.mdfiles (non-user dirs only)
Skill tools
The AI can call these tools to discover and use skills:
| Tool | Purpose | Defined In |
list_skills | Lists available skill names and descriptions | stream-text.ts |
get_skill | Loads full skill content by name | stream-text.ts |
read_skill | Reads a skill's SKILL.md | stream-text.ts |
list_design_systems | Lists available design systems by category | stream-text.ts |
get_design_system | Loads full design system DESIGN.md content | stream-text.ts |
inject_template | Injects starter template into workspace | stream-text.ts |
Project-specific filtering: getProjectSkills(projectId) from projectSkillsStore can filter which skills are available per project. Skills can be toggled on/off per project via the settings UI.
Creating custom skills
You can create custom skills in three ways:
SKILL.md recommended sections:
| Section | Purpose |
| Purpose | Why this skill exists and when to use it |
| Architecture Notes | Structural guidance for the domain |
| Implementation Rules | Mandatory patterns and constraints |
| Common Pitfalls | Mistakes to avoid |
| Recommended APIs | Preferred libraries and approaches |
| Code Standards | Formatting and naming conventions |
| References | Links to docs, examples, and resources |
| Suggested Tools | External tools that complement the skill |
Learn about context and memory management