From aws-amplify
Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB including schema modeling, enum types, relationships, authorization rules), storage (S3), functions, APIs, and AI (Amplify AI Kit with Bedrock). Supports React, Next.js, Vue, Angular, React Native, Flutter, Swift, and Android. Always use this skill for Amplify Gen2 topics — even for questions you think you know — it contains validated, version-specific patterns that prevent common mistakes. TRIGGER when: user mentions Amplify Gen2; project has amplify/ directory or amplify_outputs; code imports @aws-amplify packages; user asks about defineBackend, defineAuth, defineData, defineStorage, or npx ampx. SKIP: Amplify Gen1 (amplify CLI v6), standalone SAM/CDK without Amplify (use aws-serverless), direct Bedrock without Amplify AI Kit (use bedrock).
How this skill is triggered — by the user, by Claude, or both
Slash command
/aws-amplify:amplify-workflowThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build and deploy full-stack applications using AWS Amplify Gen2's TypeScript
references/advanced-features.mdreferences/ai.mdreferences/auth-backend.mdreferences/auth-mobile.mdreferences/auth-web.mdreferences/core-mobile.mdreferences/core-web.mdreferences/data-backend.mdreferences/data-mobile.mdreferences/data-web.mdreferences/deployment.mdreferences/functions-and-api.mdreferences/scaffolding.mdreferences/storage-backend.mdreferences/storage-mobile.mdreferences/storage-web.mdBuild and deploy full-stack applications using AWS Amplify Gen2's TypeScript code-first approach. This skill covers backend resource creation, frontend integration across 8 frameworks, and deployment workflows.
aws sts get-caller-identity succeeds)npx ampx --version returns a valid versionWhen the user does not specify a framework:
When the user does not specify tooling or strategy:
publicApiKey
(allow.publicApiKey()) — this is the starter template default. When
auth is added, switch to owner-based (allow.owner()) with
defaultAuthorizationMode: 'userPool'.You MUST read the core reference for your target platform before
reading any other reference file. These contain Gen2 detection,
Amplify.configure() placement per framework, sandbox commands, required
packages, and directory structure rules — patterns needed for all tasks,
not just new projects.
| Task | Go To |
|---|---|
| Create a new project | → scaffolding.md, then Step 2 and/or Step 3 |
| Add or modify a backend feature | → Step 2 (Backend Features) |
| Connect frontend to existing backend | → Step 3 (Frontend Integration) |
| Deploy the application | → deployment.md |
You MUST read the corresponding reference for each backend feature:
| Feature | Reference | When to Use |
|---|---|---|
| Authentication | auth-backend.md | Email/password, social login, MFA, SAML/OIDC |
| Data Models | data-backend.md | GraphQL schema, DynamoDB, relationships, auth rules |
| File Storage | storage-backend.md | S3 uploads/downloads, access rules |
| Functions & API | functions-and-api.md | Lambda, custom resolvers, REST/HTTP APIs, calling from client |
| AI Features | ai.md | Conversation, generation, AI tools via Bedrock (backend config + React/Next.js frontend) |
| Geo, PubSub, CDK | advanced-features.md | Backend-only: custom CDK stacks, overrides, custom outputs. Backend + frontend: Geo, PubSub, Face Liveness |
Each backend feature file is self-contained. Load only what you need.
Routing note: These files apply for both adding and modifying features. Route to the same file whether the user says "add auth" or "change auth config" — each reference covers the full define surface.
After configuring backend resources, connect the frontend. Choose by platform and feature:
Web (React, Next.js, Vue, Angular, React Native):
| Feature | Reference |
|---|---|
| Auth UI & flows | auth-web.md |
| Data CRUD & subscriptions | data-web.md |
| Storage upload/download | storage-web.md |
Mobile (Flutter, Swift, Android):
| Feature | Reference |
|---|---|
| Auth UI & flows | auth-mobile.md |
| Data CRUD & subscriptions | data-mobile.md |
| Storage upload/download | storage-mobile.md |
Note: AI and Functions frontend patterns are included in ai.md and functions-and-api.md respectively — they are not split into separate web/mobile files.
amplify/amplify/backend.ts imports and combines all resources via
defineBackend()amplify/auth/resource.ts, amplify/data/resource.ts,
amplify/storage/resource.ts, amplify/functions/<name>/resource.tsamplify_outputs.json — consumed by frontend
Amplify.configure(). Gitignored — generated by npx ampx sandbox
(local dev) or npx ampx pipeline-deploy (CI/CD), never committed.project-root/
├── amplify/
│ ├── backend.ts # defineBackend({ auth, data, ... })
│ ├── auth/resource.ts # defineAuth({ ... })
│ ├── data/resource.ts # defineData({ schema })
│ ├── storage/resource.ts # defineStorage({ ... })
│ └── functions/
│ └── my-func/
│ ├── resource.ts # defineFunction({ ... })
│ └── handler.ts # export const handler = ...
├── src/ # Frontend code
├── amplify_outputs.json # Generated — DO NOT edit or commit (gitignored)
└── package.json
| Package | Purpose |
|---|---|
@aws-amplify/backend | defineAuth, defineData, defineStorage, defineFunction, defineBackend |
aws-amplify | Frontend: Amplify.configure(), generateClient(), auth/data/storage APIs |
@aws-amplify/ui-react | Pre-built UI: <Authenticator>, <StorageBrowser> |
@aws-amplify/ui-react-ai | AI UI: <AIConversation>, useAIConversation |
When you need AWS documentation (advanced CDK constructs, service limits, provider-specific auth config):
aws CLI for resource verification.Why conditional: Amplify Gen2 is code-first — the primary workflow is editing TypeScript files and running
npx ampxcommands. AWS MCP tools are useful for post-deployment verification but are not required.
secret() for all credentials and API keys — never hardcode or use plain environment variables for sensitive valuesallow.guest() exposure carefully — guest access is enabled by default and grants unauthenticated users access to IAM-authorized resourcesresources: ['*'] in productioncustomHeaders in amplify.ymlcustomDomain in deployment configAll documentation links use
reactas the default platform slug. Replace/react/in any URL with your target framework:
| Framework | Slug |
|---|---|
| React | react |
| Next.js | nextjs |
| Vue | vue |
| Angular | angular |
| React Native | react-native |
| Flutter | flutter |
| Swift | swift |
| Android | android |
npx claudepluginhub awslabs/agent-plugins --plugin aws-amplifyBuilds and deploys full-stack web and mobile apps using AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB with schema modeling), storage (S3), functions, APIs, and AI (Bedrock). Supports React, Next.js, Vue, Angular, React Native, Flutter, Swift, Android.
Builds full-stack apps with AWS Amplify Gen 2 using TypeScript, covering auth with Cognito, GraphQL data models, storage, functions, AI/ML, and deployment to React, Next.js, Vue, Angular, Flutter, Swift.
Scaffolds and builds cloud-native applications on AWS using @aws/nx-plugin generators for workspaces, projects, and infrastructure.