widgets-ui
從 JSON 生成宣告式 UI 小工具
代理程式在呈現複雜的使用者介面時遇到困難。這項技能讓 Claude 能夠從簡單的 JSON 結構生成豐富的互動式 React 元件。
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "widgets-ui". Create a login form with email and password fields
Erwartetes Ergebnis:
類型為 'ui' 的 Widget JSON，asForm 設為 true，包含一個具有電子郵件輸入框、密碼輸入框和提交按鈕的欄位
Verwendung von "widgets-ui". Make a notification card with success badge
Erwartetes Ergebnis:
具有 gradient-ocean 背景、padding 4、radius lg 的方塊小工具，包含標題、成功徽章和關閉按鈕
Sicherheitsaudit
SicherAll 34 static findings are false positives from documentation patterns. The external_commands detections are TypeScript code examples in markdown blocks, not executable commands. Network URLs are legitimate project documentation links. No cryptographic weakness exists - flags were triggered by markdown table syntax. This is pure documentation for a React component library with no executable code.
Probleme mit niedrigem Risiko (1)
Qualitätsbewertung
Was du bauen kannst
代理程式生成表單
Claude 根據使用者需求建立動態多步驟表單。代理程式生成 JSON 小工具定義，呈現為具有驗證功能的完整表單。
資料視覺化卡片
將結構化資料轉換為具有圖示、徽章和佈局的視覺卡片。顯示航班資訊、產品詳情或使用者個人資料。
互動式儀表板
透過組合多個小工具建構儀表板介面。建立按鈕、統計資料和資料顯示的列和欄。
Probiere diese Prompts
Create a contact form widget with name, email, and message fields. Add a submit button with default variant.
Generate a product card widget with an ocean gradient background. Include a product title, price badge, and purchase button.
Create a flight status widget showing departure and arrival airports in a row layout. Add a plane icon between the locations.
Build a column layout with three sections: a header with title, a form with email and password inputs, and a footer with copyright text.
Bewährte Verfahren
- 始終將根小工具的 'type' 欄位定義為 'ui'，以啟用正確的轉譯
- 使用語義化名稱命名表單輸入框（email、password、message）以改善表單資料處理
- 結合方塊和列/欄佈局來建立回應式、結構化的介面
- 利用預先定義的漸層如 'gradient-ocean' 和 'gradient-sunset' 來保持一致的樣式
Vermeiden
- 不要將小工具巢狀嵌套超過 4 層，這會使維護和效能變得複雜
- 避免無明確結構目的地混合不同的佈局類型（列和欄）
- 切勿在小工具 JSON 中包含敏感資料，因為它會在用戶端轉譯
- 不要使用定義外的小工具結構描述的自訂屬性，因為它們會被忽略