Cloudscape Design

---
name: cloudscape-design
description: AWS design system for building cloud applications and services
license: Apache-2.0
compatibility: opencode
metadata:
  provider: aws
  framework: react
  domain: cloud-applications
---

## What I do

I provide comprehensive knowledge and implementation guidance for Cloudscape Design System, AWS's official design system for cloud applications. I help you:

- Implement AWS-native UI patterns and components
- Follow AWS design principles and guidelines
- Build consistent, accessible cloud applications
- Integrate with AWS services and workflows
- Maintain design consistency across AWS products

## When to use me

Load this skill when you're:
- Building AWS cloud applications or admin interfaces
- Creating dashboards for AWS services
- Need to follow AWS design standards
- Implementing data-heavy interfaces with tables, forms, and charts
- Building applications that integrate with AWS Console patterns
- Ensuring accessibility compliance for enterprise applications

## How I work

I use the Context7 MCP to fetch the latest documentation and examples from Cloudscape Design System. This ensures you always get current information about:

- Complete component library and APIs
- Design patterns and usage guidelines
- Accessibility standards and implementation
- Integration with AWS services
- Theming and customization options
- Migration guides and updates

## Key Areas of Expertise

### Core Components
- **Navigation**: Top navigation, side navigation, breadcrumbs
- **Layout**: App layout, container, grid, space between
- **Forms**: Form field, input, select, multiselect, date picker
- **Data Display**: Table, cards, key-value pairs, status indicators
- **Feedback**: Flash messages, alerts, modals, progress indicators

### AWS-Specific Patterns
- **Service Integration**: Patterns for AWS service interfaces
- **Data Management**: Large dataset handling and pagination
- **Permissions**: IAM-aware component patterns
- **Monitoring**: CloudWatch integration patterns
- **Resource Management**: CRUD operations for AWS resources

### Design Principles
- **Clarity**: Clear information hierarchy and content organization
- **Efficiency**: Streamlined workflows for complex tasks
- **Consistency**: Unified experience across AWS services
- **Accessibility**: WCAG 2.1 AA compliance by default

### Advanced Features
- **Theming**: Custom themes and brand integration
- **Internationalization**: Multi-language support
- **Performance**: Optimized for large datasets
- **Testing**: Component testing strategies

## Usage Instructions

When you load this skill, I will:

1. **Research First**: Use `context7_resolve-library-id` to find the correct Cloudscape Design library ID
2. **Query Documentation**: Use `context7_query-docs` to fetch relevant information based on your specific needs
3. **Provide Context**: Give you current, accurate information about components, patterns, and best practices
4. **Generate Examples**: Create implementation examples based on the latest documentation

## Example Queries I Can Help With

- "How do I set up Cloudscape Design System in a React application?"
- "Show me how to create a data table with sorting, filtering, and pagination"
- "What are the best practices for building an AWS service dashboard?"
- "How do I implement proper navigation patterns for a multi-page AWS application?"
- "What components should I use for displaying AWS resource status and metrics?"
- "How do I customize Cloudscape themes for my organization's branding?"

## AWS Integration Patterns

I provide guidance for:
- **AWS Console Integration**: Matching AWS Console UX patterns
- **Service-Specific UIs**: EC2, S3, Lambda, CloudFormation interfaces
- **Monitoring Dashboards**: CloudWatch metrics and alarms
- **Resource Management**: CRUD operations with proper feedback
- **Permission-Aware UIs**: Components that respect IAM policies

## Accessibility & Compliance

Cloudscape Design System is built with enterprise accessibility requirements:
- WCAG 2.1 Level AA compliance
- Screen reader optimization
- Keyboard navigation support
- High contrast mode support
- Focus management for complex interactions

## Integration Notes

This skill works best when combined with:
- `react-expert` skill for React-specific implementation
- `typescript-advanced-types` skill for type-safe component usage
- `accessibility-expert` skill for advanced accessibility requirements
- AWS-specific knowledge for service integration patterns

Always use Context7 to get the most current information about components, design patterns, and AWS integration guidelines rather than relying on potentially outdated knowledge.