Agent Skill

An agent skill that teaches AI coding assistants everything about FlAI — component selection, installation, theming, and provider setup — so you can build AI chat interfaces with natural language.

What is a Skill?

Agent Skills are an open standard for giving AI coding assistants specialized knowledge about tools and frameworks. The FlAI skill follows this standard and works with Claude Code, Cursor, Codex, VS Code Copilot, and 40+ other agents.

Think of it as a context file that makes your AI assistant an expert on FlAI. Instead of copying documentation into your prompts, the skill loads automatically.

What It Enables

With the skill installed, you can use natural language to work with FlAI:

"Add a chat screen to my app" — Claude runs flai init and flai add chat_screen, then wires it into your code
"Set up Anthropic as my AI provider" — Claude installs the provider, configures the API key, and connects it to the chat controller
"Make the theme match my brand colors" — Claude creates a custom FlaiThemeData with your exact colors, typography, and spacing
"Add thinking indicators and tool call cards" — Claude knows which components to install and how they fit together
"Build a complete chat app with auth and settings" — Claude scaffolds the entire app structure with all screens connected

Installation

Install the FlAI skill with one command. Works with Claude Code, Cursor, Codex, and other supported agents.

Using the Skills CLI (recommended)

The Skills CLI auto-detects your installed agents and places the skill in the right directory:

$ npx skills add getflai-dev/flai

Manual installation (Claude Code)

Copy the skill file directly into your Claude Code skills directory:

$ mkdir -p ~/.claude/skills/flai && curl -o ~/.claude/skills/flai/SKILL.md https://raw.githubusercontent.com/getflai-dev/flai/main/packages/flai_skill/skill.md

What the Skill Knows

The skill file teaches Claude about:

Component Library

All 13 components with their names, descriptions, and categories
Component dependencies — which components require other components
Props and configuration options for each component
Code examples for each component

CLI Commands

flai init — Initialize the core foundation
flai add <component> — Install individual components
flai doctor — Health check the project
flai scaffold basic / flai scaffold app — Generate complete app scaffolds

Theme System

The 4 built-in presets: light, dark, iOS, premium
All design tokens: colors, typography, spacing, radius
How to create custom themes with FlaiThemeData
Semantic color tokens and chat-specific tokens

Provider Interface

The AiProvider abstract interface and its methods
OpenAI provider setup with API key, model, and base URL
Anthropic provider setup with thinking and caching support
The ChatEvent sealed class and all event subtypes

Starter Templates

Basic chat — Minimal setup with a single provider
Multi-model — Model switching between providers
Tool calling — Function calling with custom tools
Custom theme — Brand theming with light/dark toggle

Skill vs MCP Server

Both the skill and the MCP server help AI assistants work with FlAI, but they work differently:

Feature	Skill	MCP Server
How it works	Loads knowledge into Claude's context	Provides callable tools over a protocol
Requires Node.js	No	Yes
Runs CLI commands	Claude runs them via terminal	Server runs them via tools
Works with	Claude Code, Cursor, Codex, Copilot, and 40+ agents	Any MCP-compatible agent
Setup effort	One command (`npx skills add`)	Config file edit
Best for	Giving your AI assistant deep FlAI knowledge	Letting your AI assistant run FlAI commands directly

⚡

You can use both the skill and the MCP server together. The skill gives Claude deep knowledge, while the MCP server gives it the ability to call tools directly.

Example Session

Here is what a Claude Code session looks like with the FlAI skill installed:

You: I want to add AI chat to my Flutter app. Use Anthropic
     with Claude Sonnet 4 and a dark theme.

Claude: I'll set up FlAI with Anthropic for you.

[Runs: flai init]
✓ Created lib/flai/core/ with theme, models, and provider interface

[Runs: flai add chat_screen]
✓ Installed chat_screen, message_bubble, input_bar, typing_indicator

[Runs: flai add anthropic_provider]
✓ Installed Anthropic provider

[Runs: flai add thinking_indicator]
✓ Installed thinking indicator for Claude's extended thinking

[Updates main.dart with FlaiTheme, provider config, and chat screen]

Done! Your app now has:
- Dark-themed chat screen with streaming messages
- Anthropic provider configured for Claude Sonnet 4
- Thinking indicator for extended reasoning
- Input bar with send button

Run with: flutter run --dart-define=ANTHROPIC_API_KEY=sk-ant-...

Previous ← MCP Server