cloudscape-codegen

Cloudscape Codegen 是一項專為開發者設計的代理技能，旨在利用 AWS Cloudscape Design System 加速建構專業且具備無障礙功能的 UI。該技能主要針對在 React、TypeScript 和 Vite 專案中工作的前端工程師，提供快速建構企業級介面樣式的能力。透過遵循官方的 Cloudscape 元件庫與設計令牌，此工具能確保生成的程式碼符合高度無障礙標準，在各種螢幕尺寸下保持響應式佈局，並有效實現如 CRUD 表格、引導式精靈 (Wizard) 及數據密集型詳情頁面等複雜模式。

本技能專注於現代 React 開發，提供完整的模組化 TSX 片段，涵蓋載入、空資料與錯誤狀態等處理邏輯。無論您是在遷移舊有 React 元件、構建新管理後台，還是建立多步驟配置流程，此工具都能提供穩固的基礎結構，減少冗餘程式碼並確保設計的一致性。

• 生成功能齊全的 Cloudscape 元件，如 AppLayout、ContentLayout、Table、Wizard、Form 與 Flashbar 等。

• 強制執行嚴格的無障礙預設配置，包括 ARIA 標籤、鍵盤操作安全性以及明確的回饋機制。

• 管理複雜資料模式的狀態，為非同步操作、表單輸入驗證及使用者回饋提供基礎骨架。

• 簡化 CRUD 清單視圖、多步驟配置精靈以及包含麵包屑與中繼資料的詳情頁面的創建流程。

• 提供可直接匯入的模組，無縫整合至標準的 React/TypeScript 開發工作流程中。

• 使用此技能來構建儀表板、資源管理頁面以及複雜的設定流程。

• 提供高品質輸出：包含完整的元件程式碼、必要的匯入項目以及真實的模擬資料處理。

• 非常適合採用 AWS 原生設計模式的團隊，避免手動實作底層 UI 元件。

• 限制：技能假設專案環境使用 Cloudscape；它會避免捏造不存在的 API，並優先使用官方元件屬性而非自定義 CSS。

• 若要獲得最佳結果，請提供關於專案路由或狀態管理庫的上下文，以便代理程式適應專案結構。