AutoGineer
Generated banner for Amplify Workflow
Generated logo for Amplify Workflow

Amplify Workflow

AWS LabsOfficialPublished by AWS Labs

  • Skill
  • Tool integration
  • Software development
  • Apache-2.0
  • Low risk
Download ZIP

From the author

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).
— the description by AWS Labs

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured workflow for developing full-stack applications with AWS Amplify Gen2. It covers the entire lifecycle, from scaffolding and backend resource definition (Auth, Data, Storage, Functions, AI) to frontend integration across multiple frameworks and final deployment. It emphasizes a code-first TypeScript approach, ensuring developers use validated, version-specific patterns to avoid common configuration errors.

What it does

  • Defines backend resources using TypeScript code-first patterns.
  • Integrates backend services with web and mobile frontends.
  • Configures authentication, data models, storage, and AI features via Bedrock.
  • Provides deployment workflows for full-stack applications.
  • Ensures correct usage of Amplify Gen2 APIs like defineBackend and defineData.
  • Offers security best practices for cloud-native application development.

When to use it

  • When starting a new full-stack project using AWS Amplify Gen2.
  • When adding or modifying backend features like Auth, Data, or Storage.
  • When connecting a frontend framework to an existing Amplify Gen2 backend.
  • When deploying an Amplify Gen2 application to AWS.
  • When troubleshooting configuration issues in an amplify/ directory.

Advantages

  • Prevents common configuration mistakes through validated patterns.
  • Supports a wide range of web and mobile frameworks.
  • Streamlines backend-to-frontend connectivity.
  • Provides clear, modular documentation for specific backend features.
  • Enforces security best practices by default.

Usage examples

“How do I set up a new Amplify Gen2 project with React?”
The agent will guide you through the scaffolding process, including initializing the project, setting up the amplify/ directory, and configuring the initial backend.
“Add a new data model with owner-based authorization to my existing Gen2 backend.”
The agent will provide the TypeScript code for defining the data model in amplify/data/resource.ts using the appropriate authorization rules.
“How do I integrate my Flutter app with an existing Amplify Gen2 backend?”
The agent will explain how to use the amplify_outputs.json file and the Amplify Flutter library to connect your mobile frontend to the backend.
“How can I add an AI conversation route to my data schema?”
The agent will show you how to define an a.conversation() route in your schema, including model selection and system prompt configuration.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/awslabs/amplify-workflow/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip amplify-workflow.zip -d .agents/skills

Documentation by AWS Labs

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.

Prerequisites

  • Node.js ^18.19.0 || ^20.6.0 || >=22 and npm

  • AWS credentials configured (aws sts get-caller-identity succeeds)

  • 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: You SHOULD default to React (Vite) and explain the choice.

  • Mobile: You MUST ask which platform the user wants (Flutter, Swift, Android, or React Native). There is no universal mobile default.

  • Neither specified: If the user says "build an app" without clarifying web vs. mobile, you MUST ask before proceeding.

  • 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: You SHOULD default to npm unless the user specifies yarn or pnpm.

  • Language: You SHOULD default to TypeScript. Gen2 backends are TypeScript-only; frontends SHOULD follow the project's existing language.

  • Next.js: You SHOULD default to App Router unless the user specifies Pages Router.

  • React Native: Ask the user whether they use 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'.

Quick Start — Route to the Right Reference

Step 0: Read Core Reference (ALWAYS)

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.

  • Web (React, Next.js, Vue, Angular, React Native): You MUST read core-web.md

  • Mobile (Flutter, Swift, Android): You MUST read core-mobile.md

  • Backend only (no frontend work): Skip to Step 1.

Step 1: Identify the Task Type
TaskGo 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
Step 2: Backend Features

You MUST read the corresponding reference for each backend feature:

FeatureReferenceWhen to Use
Authenticationauth-backend.mdEmail/password, social login, MFA, SAML/OIDC
Data Modelsdata-backend.mdGraphQL schema, DynamoDB, relationships, auth rules
File Storagestorage-backend.mdS3 uploads/downloads, access rules
Functions & APIfunctions-and-api.mdLambda, custom resolvers, REST/HTTP APIs, calling from client
AI Featuresai.mdConversation, generation, AI tools via Bedrock (backend config + React/Next.js frontend)
Geo, PubSub, CDKadvanced-features.mdBackend-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.

Step 3: Frontend Integration

After configuring backend resources, connect the frontend. Choose by platform and feature:

Web (React, Next.js, Vue, Angular, React Native):

FeatureReference
Auth UI & flowsauth-web.md
Data CRUD & subscriptionsdata-web.md
Storage upload/downloadstorage-web.md

Mobile (Flutter, Swift, Android):

FeatureReference
Auth UI & flowsauth-mobile.md
Data CRUD & subscriptionsdata-mobile.md
Storage upload/downloadstorage-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.

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()

  • Resource files: amplify/auth/resource.ts, amplify/data/resource.ts, amplify/storage/resource.ts, amplify/functions/<name>/resource.ts

  • 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
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
Key APIs
PackagePurpose
@aws-amplify/backenddefineAuth, defineData, defineStorage, defineFunction, defineBackend
aws-amplifyFrontend: Amplify.configure(), generateClient(), auth/data/storage APIs
@aws-amplify/ui-reactPre-built UI: <Authenticator>, <StorageBrowser>
@aws-amplify/ui-react-aiAI UI: <AIConversation>, useAIConversation

Documentation & Resource Verification

When you need AWS documentation (advanced CDK constructs, service limits, provider-specific auth config):

  1. If AWS documentation tools are available (e.g., via AWS MCP), you SHOULD use them to search and retrieve relevant documentation pages.

  2. If AWS documentation tools are unavailable, you MUST fall back to web search or the aws CLI for resource verification.

Why conditional: Amplify Gen2 is code-first — the primary workflow is editing TypeScript files and running npx ampx commands. AWS MCP tools are useful for post-deployment verification but are not required.

Security Considerations

  • Use secret() for all credentials and API keys — never hardcode or use plain environment variables for sensitive values

  • Review allow.guest() exposure carefully — guest access is enabled by default and grants unauthenticated users access to IAM-authorized resources

  • Scope IAM policies to specific resource ARNs — avoid resources: ['*'] in production

  • Never log secrets or include them in error messages

  • Enable CloudTrail and CloudWatch alarms for monitoring Amplify-deployed resources; enable access logging on S3, AppSync, and API Gateway

  • Configure security headers for web apps — set CSP, HSTS, X-Frame-Options, and X-Content-Type-Options via customHeaders in amplify.yml

  • Attach AWS WAF to public-facing AppSync APIs and API Gateway endpoints for defense in depth

  • Enable throttling and rate limiting on API Gateway and AppSync APIs to prevent abuse

  • Use IAM roles with ephemeral credentials for CI/CD pipelines and Lambda execution roles — never long-lived access keys

  • Encrypt CloudWatch Logs groups with KMS (aws:kms) when they may contain PII, tokens, or secrets; enable log retention policies

  • Enable AppSync schema validation and API Gateway request validators to reject malformed input at the edge

  • Use ACM-managed TLS certificates for custom domains on Amplify Hosting — configure via customDomain in deployment config

Links

All documentation links use react as the default platform slug. Replace /react/ in any URL with your target framework:

FrameworkSlug
Reactreact
Next.jsnextjs
Vuevue
Angularangular
React Nativereact-native
Flutterflutter
Swiftswift
Androidandroid

Files

references/advanced-features.md

Advanced Features

Geo (Location) — Backend + Frontend

Add map display and location search using CDK constructs in amplify/backend.ts:

import { defineBackend } from '@aws-amplify/backend';
import * as geo from 'aws-cdk-lib/aws-location';

const backend = defineBackend({ auth });
const geoStack = backend.createStack('GeoStack');

const placeIndex = new geo.CfnPlaceIndex(geoStack, 'PlaceIndex', {
  dataSource: 'Esri',
  indexName: 'myPlaceIndex',
});

const map = new geo.CfnMap(geoStack, 'Map', {
  mapName: 'myMap',
  configuration: { style: 'VectorEsriNavigation' },
});

backend.addOutput({
  geo: {
    aws_region: geoStack.region,
    maps: { items: { [map.mapName]: { style: 'VectorEsriNavigation' } } },
    search_indices: { items: [placeIndex.indexName] },
  },
});

Grant authenticated users access via IAM policy on the geo resources.

Frontend: Install @aws-amplify/geo and maplibre-gl-js-amplify. Use Amplify.Geo.searchByText() for search and AmplifyMapLibreRequest for rendering maps. See AWS Amplify Geo docs for full client setup.

PubSub — Backend + Frontend

Real-time messaging via AWS IoT Core. Configure an IoT endpoint and attach an IAM policy for authenticated users in amplify/backend.ts:

import * as iam from 'aws-cdk-lib/aws-iam';

const pubsubStack = backend.createStack('PubSubStack');

backend.auth.resources.authenticatedUserIamRole.addToPrincipalPolicy(
  new iam.PolicyStatement({
    actions: ['iot:Connect', 'iot:Publish', 'iot:Subscribe', 'iot:Receive'],
    resources: [
      `arn:aws:iot:*:*:client/\${cognito-identity.amazonaws.com:sub}`,
      `arn:aws:iot:*:*:topic/amplify/*`,
      `arn:aws:iot:*:*:topicfilter/amplify/*`,
    ],
  })
);

backend.addOutput({
  custom: { iotEndpoint: 'your-iot-endpoint.iot.region.amazonaws.com' },
});

Frontend — subscribe and publish:

import { PubSub } from '@aws-amplify/pubsub';

const sub = PubSub.subscribe({ topics: ['myTopic'] }).subscribe({
  next: (data) => console.log('Message:', data),
  error: (err) => console.error(err),
});

await PubSub.publish({ topics: ['myTopic'], message: { msg: 'hello' } });
sub.unsubscribe();  // MUST unsubscribe to prevent leaks

When using subscriptions in React, MUST wrap in useEffect and return cleanup function to call .unsubscribe().

Retrieve the IoT endpoint programmatically: aws iot describe-endpoint --endpoint-type iot:Data-ATS. See AWS Amplify PubSub docs for connection configuration.

Custom CDK Stacks — Backend Only

Create additional CloudFormation stacks for resources not natively supported by Amplify:

const backend = defineBackend({ auth, data });
const customStack = backend.createStack('AnalyticsStack');

// Use any CDK construct in the custom stack
import * as sns from 'aws-cdk-lib/aws-sns';
const topic = new sns.Topic(customStack, 'NotificationTopic');

// Access Amplify resources from custom stack
const userPool = backend.auth.resources.userPool;

Stack names MUST be unique within the backend — duplicate names cause deployment failures. Use descriptive names like 'EmailStack', 'AnalyticsStack'.

Backend Overrides — Backend Only

Access and modify underlying CloudFormation resources when Amplify's high-level API does not expose a needed property:

const backend = defineBackend({ auth, data });

// Auth override: Access the underlying CFN user pool resource
const cfnUserPool = backend.auth.resources.cfnResources.cfnUserPool;
cfnUserPool.policies = {
  passwordPolicy: {
    minimumLength: 12,
    requireLowercase: true,
    requireUppercase: true,
    requireNumbers: true,
    requireSymbols: true,
  },
};

// DynamoDB override: Access underlying CFN resources
const { cfnResources } = backend.data.resources;

// Enable point-in-time recovery
cfnResources.amplifyDynamoDbTables['Todo'].pointInTimeRecoveryEnabled = true;

// Change billing mode
cfnResources.amplifyDynamoDbTables['Todo'].billingMode = 'PAY_PER_REQUEST';

// Set TTL
cfnResources.amplifyDynamoDbTables['Todo'].timeToLiveAttribute = {
  attributeName: 'ttl',
  enabled: true,
};

The entry point for DynamoDB table overrides is backend.data.resources.cfnResources.amplifyDynamoDbTables['ModelName'], which exposes L1 CFN properties directly.

To add a Global Secondary Index, use .secondaryIndexes() in the schema definition (the Amplify-native approach) rather than CDK overrides:

const schema = a.schema({
  Todo: a.model({
    content: a.string(),
    status: a.string(),
    createdAt: a.datetime(),
  })
  .secondaryIndexes(index => [
    index('status').sortKeys(['createdAt']),
  ])
  .authorization(allow => [allow.owner()]),
});

See AWS Amplify Override docs for the full override API.

Custom Outputs — Backend Only

Expose custom resource values to the frontend via amplify_outputs.json:

backend.addOutput({
  custom: {
    analyticsTopicArn: topic.topicArn,
    apiEndpoint: 'https://api.example.com',
  },
});

Values appear under the custom key in amplify_outputs.json. Frontend reads them from the Amplify configuration after Amplify.configure().

Face Liveness — Backend + Frontend

Verify user identity with Amazon Rekognition Face Liveness. Add IAM permissions in amplify/backend.ts:

import * as iam from 'aws-cdk-lib/aws-iam';

backend.auth.resources.authenticatedUserIamRole.addToPrincipalPolicy(
  new iam.PolicyStatement({
    actions: [
      'rekognition:CreateFaceLivenessSession',
      'rekognition:StartFaceLivenessSession',
      'rekognition:GetFaceLivenessSessionResults',
    ],
    resources: ['*'], // Rekognition session ARNs are generated at runtime — scope with conditions if needed
  })
);

Frontend (React):

npm install @aws-amplify/ui-react-liveness
import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness';

<FaceLivenessDetector
  sessionId={sessionId}
  region="us-east-1"
  onAnalysisComplete={async () => { /* fetch results */ }}
/>

Create the session server-side via Rekognition SDK or a Lambda function, then pass the sessionId to the component. See AWS Amplify Liveness docs for the full integration guide.

Frontend (Swift — iOS 14+):

Requires the amplify-ui-swift-liveness package and camera permission (NSCameraUsageDescription in Info.plist). Add the package via Xcode SPM: https://github.com/aws-amplify/amplify-ui-swift-liveness.

The backend must include a Cognito Identity Pool with an IAM role that grants rekognition:StartFaceLivenessSession and rekognition:GetFaceLivenessSessionResults.

See Swift Liveness docs for the full SwiftUI integration guide.

Frontend (Android — API 24+):

Add the dependency to app/build.gradle.kts:

dependencies {
    implementation("com.amplifyframework.ui:liveness:1.+")
}

Requires Jetpack Compose. The backend must include a Cognito Identity Pool with an IAM role that grants rekognition:StartFaceLivenessSession and rekognition:GetFaceLivenessSessionResults.

See Android Liveness docs for the full Compose integration guide.

Pitfalls

  • Duplicate stack names: backend.createStack() names MUST be unique across the entire backend — reusing a name causes deployment failures.

  • Missing IAM permissions: Geo, PubSub, and Face Liveness all require explicit IAM policies — Amplify does not auto-grant access to these services.

  • Geo CDK setup: Geo (maps, place search, geofencing) requires CDK constructs — there is no defineGeo() in Amplify Gen2. Use aws-cdk-lib/aws-location directly as shown above.

  • PubSub endpoint: You MUST configure the correct IoT endpoint for your region; using the wrong endpoint type causes silent connection failures.

Links

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an API key, Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
AWS Labs
Publisher
AWS Labs (Official)
Source
awslabs/agent-plugins · plugins/aws-amplify/skills/amplify-workflow · commit fbefb37
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • NOTICE (added by AutoGineer from NOTICE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Also distributed in
cline/skills

AutoGineer is not affiliated with or endorsed by AWS Labs.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download amplify-workflow.zip