Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB), 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, defineFunction, 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).
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB), 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, defineFunction, 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).
AWS Amplify Gen2
Build 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.
For sandbox: npx ampx --version returns a valid version
For mobile: Platform-specific tooling (Xcode, Android Studio, Flutter SDK)
Defaults & Assumptions
When the user does not specify a framework:
Web: Default to React (Vite) and explain the choice.
Mobile: Ask which platform (Flutter, Swift, Android, or React Native) —
there is no universal mobile default, so guessing leads to wasted effort.
Neither specified: If the user says "build an app" without clarifying web
vs. mobile, ask before proceeding — the framework choice affects every
subsequent step.
Backend only: If only backend changes are requested and no frontend
framework is mentioned, skip the frontend integration step entirely.
When the user does not specify tooling or strategy:
Package manager: Default to npm unless the user specifies yarn or pnpm.
Language: Default to TypeScript. Gen2 backends are TypeScript-only;
frontends should follow the project's existing language.
Next.js: Default to App Router unless the user specifies Pages Router.
React Native: Ask whether the user uses Expo or bare React Native CLI.
Auth: You MUST ask which login method the user wants
(email/password, social login, SAML, passwordless, etc.). Do not assume a default.
Data authorization: default to publicApiKey
(allow.publicApiKey()) — this is the starter template default. When
auth is added, switch to owner-based
(allow.owner()) with defaultAuthorizationMode: 'userPool'.
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.
Step 3: Frontend Integration
After configuring backend resources, connect the frontend. Choose by
platform and feature:
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.
Core Concepts
Amplify Gen2 Architecture
Code-first: All backend resources defined in TypeScript under amplify/
Main config:amplify/backend.ts imports and combines all resources via
defineBackend()
Generated output:amplify_outputs.json — consumed by frontend
Amplify.configure(). Gitignored — generated by npx ampx sandbox
(local dev) or npx ampx pipeline-deploy (CI/CD), never committed.
Directory Structure
amplify/ and src/ must be siblings under the project root — placing
them at different directory levels breaks sandbox detection. (Exception: in monorepos, amplify/ may be in a packages/ subdirectory — the key is that amplify_outputs.json must be accessible from the frontend entry point.)
These patterns apply to every web task — not just new projects. Verify
each one before implementing any feature.
Gen2 Detection
Before modifying any code, check if the project is already Gen2:
amplify/ directory exists with backend.ts
@aws-amplify/backend in package.json devDependencies
If both are true, the project is already Gen2 — skip to feature
implementation. If amplify/.config/ exists instead, this is a Gen1
project — do not proceed (requires separate migration skill).
Frontend Configuration
Import the generated outputs and configure Amplify in the correct entry
point for your framework. Placing this in the wrong file causes silent
failures — Amplify API calls return undefined or empty responses with no error.
WARNING:amplify_outputs.json must exist before the app can
compile — without it, the build fails with a module-not-found error.
Run npx ampx sandbox (or npx ampx sandbox --once) first to
generate it. See scaffolding.md for the correct sequence.
Why? In App Router, layout.tsx is a server component. Client components need Amplify.configure() to run in the browser. Without this, you get "Auth UserPool not configured" errors.
Key difference: App Router uses a global client component. Pages Router configures per-file.
<Authenticator.Provider> is required in layout.tsx for auth context.
React Native
React Native uses the same aws-amplify JS package as web frameworks (it is
part of amplify-js, not the native mobile SDKs). All web APIs apply to RN
with the additions below.
import'react-native-get-random-values'; // MUST be firstimport { Amplify } from'aws-amplify';
import outputs from'./amplify_outputs.json';
Amplify.configure(outputs);
React Native Pitfalls
Import order:react-native-get-random-values must be the FIRST
import in the entry file, before aws-amplify. Reversing the order causes
cryptographic failures at runtime.
Missing AsyncStorage: Without
@react-native-async-storage/async-storage, auth tokens are not persisted
and users must re-authenticate on every app restart.
