AgentSkillsCN

cloudscape-design

AWS设计体系，助力云上应用与服务的构建。

SKILL.md
--- frontmatter
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.