Skip to content

Built-in Skills

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:

  1. getRelevantSkills(tokenBudget) returns XML-tagged list: <skill name="id" description="desc"/>
  2. This is injected into the system prompt
  3. The system prompt instructs the AI: "you MUST first call list_skills to check if a relevant skill exists"
  4. If a skill matches, the AI calls get_skill with the skill name
  5. 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:

#NameDescriptionPriority
1api-integrationAPI integration patterns including REST, GraphQL, WebSocket connections, and data fetching best practices
2react-best-practicesReact best practices including hooks, state management, performance optimization, and component architecture
3frontend-designProfessional frontend design skill for creating beautiful, responsive UI components with modern CSS and accessibility
4docxGenerate a downloadable Word (.docx) document directly in chat by wrapping full markdown content in a docxartifact tag90

Design skills

The 8 design skills bundled with Amplify:

#NameDescriptionTemplate
1react-native-componentCreate single React Native / Expo component (NOT full app)Expo App
2appwrite (appwrite-typescript)Appwrite TypeScript SDK — auth, database, storage, real-time, server-side admin
3react-componentCreate single React component / UI widget (NOT full app)Vite React / Vite Shadcn
4mobile-app-developmentBuild full mobile app with Expo Router, screens, navigationExpo App
5webapp-builderBuild full web application with routing, forms, backendMultiple (Vite React, NextJS, Astro, etc.)
6docx (docx-generation)Generate .docx files using the docx npm package in WebContainerblank
7supabase-backendSupabase backend — SQL migrations, RLS, auth, security
8html-pageCreate standalone HTML page / single-file websiteblank
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:

markdown
---
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):

json
{
  "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:

    1. Reads each subdirectory
    2. Looks for SKILL.md file
    3. Tries manifest.json first, falls back to YAML frontmatter
    4. If neither: uses first non-heading, non-empty line as description
    5. Stores in _skills Map keyed by lowercase name
    6. Also supports legacy single .md files (non-user dirs only)

Skill tools

The AI can call these tools to discover and use skills:

ToolPurposeDefined In
list_skillsLists available skill names and descriptionsstream-text.ts
get_skillLoads full skill content by namestream-text.ts
read_skillReads a skill's SKILL.mdstream-text.ts
list_design_systemsLists available design systems by categorystream-text.ts
get_design_systemLoads full design system DESIGN.md contentstream-text.ts
inject_templateInjects starter template into workspacestream-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:

SectionPurpose
PurposeWhy this skill exists and when to use it
Architecture NotesStructural guidance for the domain
Implementation RulesMandatory patterns and constraints
Common PitfallsMistakes to avoid
Recommended APIsPreferred libraries and approaches
Code StandardsFormatting and naming conventions
ReferencesLinks to docs, examples, and resources
Suggested ToolsExternal tools that complement the skill

Learn about context and memory management