Authoring WhatsApp Business Flows with validation, component guidance, and server integration patterns. Use when building conversational experiences, collecting user data, implementing conditional logic, or integrating with backend endpoints.
View on GitHubmberg/claude-skills
cortex
skills/whatsapp-flows/SKILL.md
January 20, 2026
Select agents to install to:
npx add-skill https://github.com/mberg/claude-skills/blob/main/skills/whatsapp-flows/SKILL.md -a claude-code --skill whatsapp-flowsInstallation paths:
.claude/skills/whatsapp-flows/# WhatsApp Flows Skill
Build conversational WhatsApp experiences with dynamic forms, conditional logic, and server integration.
## Quick Start
### What are WhatsApp Flows?
WhatsApp Flows are structured conversations that collect user input through a series of screens. Use them to:
- Collect information (forms, surveys)
- Implement conditional logic (eligibility checks, branching)
- Display dynamic data (products, prices, inventory)
- Validate user input server-side
- Complete multi-step processes
### 5 Key Concepts
1. **Screens** - Individual steps in your flow. Each has a unique ID and layout.
2. **Components** - Building blocks (TextInput, Dropdown, Footer, If, etc.)
3. **Form Data** - User input via `${form.field_name}` binding
4. **Server Data** - Dynamic data via `${data.field_name}` binding
5. **Actions** - What happens: navigate, data_exchange, complete, update_data, open_url
### Minimal Example
```json
{
"version": "7.1",
"screens": [
{
"id": "GREETING",
"title": "Greeting",
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "TextHeading",
"text": "Welcome!"
},
{
"type": "TextBody",
"text": "Please tell us your name to proceed.",
"markdown": true
},
{
"type": "TextInput",
"name": "name",
"label": "What's your name?",
"required": true
},
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "CONFIRMATION"
}
}
}
]
}
},
{
"id": "CONFIRMATION",
"title": "Confirmation",
"terminal": true,
"success": true,
"layout": {
"type": "SingleColumnLayout",
"children": [