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.