aws-amplify

Guides AWS Amplify Gen2 TypeScript backend and frontend integration across frameworks.

Updated May 12, 2026
One-click install
npx skills add https://github.com/mreferre/aws-agent-toolkit-skills --skill aws-amplify-mreferre
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: aws-amplify
Source: https://github.com/mreferre/aws-agent-toolkit-skills/tree/main/.kiro/skills/aws-amplify
Command: npx skills add https://github.com/mreferre/aws-agent-toolkit-skills --skill aws-amplify-mreferre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Amplify Gen2 development is easy to get wrong because backend and frontend must follow version-specific, code-first conventions, and small setup mistakes can cause silent runtime failures or build issues.

Core Features & Use Cases

  • End-to-end Amplify Gen2 workflow: Define backend resources in TypeScript under amplify/ and wire frontend using amplify_outputs.json.
  • Backend feature guidance: Authentication (Cognito), data models (AppSync/DynamoDB), storage (S3), functions and APIs (Lambda/AppSync, REST/HTTP), and AI (Amplify AI Kit with Bedrock).
  • Cross-framework integration: Patterns for React, Next.js (App Router and Pages Router), Vue, Angular, React Native, Flutter, Swift, and Android, including common pitfalls like missing SSR client configuration and incorrect auth/data authorization modes.
  • Validated defaults and guardrails: Explicit Gen2 detection rules and “always use this skill” guidance for Amplify Gen2 topics to avoid Gen1 or non-Amplify patterns.

Quick Start

Tell the AI: “Set up an Amplify Gen2 backend with defineAuth for email + social login and add a Todo data model with owner-based authorization, then show how to configure it in my React app using amplify_outputs.json.”

Frequently Asked Questions about aws-amplify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up an AWS Amplify Gen2 backend with TypeScript code-first configuration?

To set up an AWS Amplify Gen2 backend, define your infrastructure in TypeScript under the amplify/ directory and wire resources using the defineBackend function in amplify/backend.ts to generate the amplify_outputs.json file for frontend integration.

Why does my Amplify Gen2 frontend integration fail with silent runtime errors?

Amplify Gen2 silent runtime failures often occur due to incorrect frontend integration patterns, such as missing SSR client configuration or applying wrong authorization modes for data and auth, rather than following the required framework-specific Amplify.configure placement.

Can I use AWS Amplify Gen2 with Next.js App Router and React Native?

Yes, AWS Amplify Gen2 supports cross-framework integration across Next.js App Router, Pages Router, React Native, Flutter, Swift, and Android, providing specific patterns to avoid common pitfalls like missing SSR client configuration.

What's the best way to add authentication and a data model in Amplify Gen2?

The best way to add authentication and data models in Amplify Gen2 is using the code-first defineAuth function for Cognito and defining data models for AppSync/DynamoDB with appropriate owner-based authorization constraints.

How do I integrate Amazon Bedrock AI routes into an Amplify Gen2 application?

You integrate Amazon Bedrock AI routes into Amplify Gen2 by utilizing the Amplify AI Kit, which allows you to define custom functions and APIs within your TypeScript backend configuration to handle AI-driven requests.

Does AWS Amplify Gen2 replace the need for manual AWS infrastructure deployment workflows?

AWS Amplify Gen2 replaces manual infrastructure deployment by using a code-first backend configuration approach, automatically provisioning resources like Cognito, AppSync, DynamoDB, and S3 through TypeScript definitions.