cloudscape-codegen

Cloudscape Codegen is a specialized developer agent skill designed to accelerate the construction of professional, accessible UIs using the AWS Cloudscape Design System. It targets frontend engineers working on React, TypeScript, and Vite-based projects who need to quickly scaffold consistent, enterprise-grade interface patterns. By adhering to official Cloudscape component libraries and design tokens, this skill ensures that generated code meets high accessibility standards, remains responsive across device breakpoints, and implements complex patterns like CRUD tables, guided wizards, and data-heavy detail views effectively.

The skill is built to handle the nuances of modern React development, providing complete, modular TSX snippets that include loading, empty, and error states. Whether you are migrating legacy React components, building new admin dashboards, or creating multi-step configuration flows, this tool provides a structural foundation that minimizes boilerplate and enforces design consistency. It is intended for use when rapid prototyping or project expansion requires adherence to specific design system constraints.

• Generates fully functional Cloudscape components like AppLayout, ContentLayout, Table, Wizard, Form, and Flashbar.

• Enforces strict accessibility defaults including ARIA labels, keyboard-safe interactions, and perceivable feedback mechanisms.

• Manages state for complex data patterns, offering scaffolding for async operations, input validation, and user feedback.

• Simplifies the creation of page scaffolds such as CRUD list views, multi-step configuration wizards, and detail pages with breadcrumbs and metadata.

• Integrates seamlessly with standard React/TypeScript development workflows by providing ready-to-import modules.

• Use this skill to build dashboards, resource management pages, and complex configuration flows in React.

• Provides high-fidelity output: expect full component code with required imports and realistic mock data handling.

• Ideal for teams standardizing on AWS-native design patterns who want to avoid manual implementation of low-level UI primitives.

• Constraints: The skill assumes a project environment utilizing Cloudscape; it avoids fabricating non-existent APIs and prioritizes official component props over custom CSS.

• For optimal results, provide existing context about your project routing or state management library to allow the agent to adapt code structure.