ui-handler
實作 UI 元件和登陸頁面
手動建置 UI 元件需要大量時間。此技能利用 Shadcn MCP 和 21st.dev MCP 快速生成按鈕、對話框和複雜的登陸頁面區塊。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "ui-handler". Add a pricing card component with toggle for monthly and yearly billing.
Résultat attendu:
- Generated pricing card with monthly/yearly toggle switch
- Added to src/components/ui/pricing-card.tsx
- Integrated CSS variables for dark mode compatibility
- Imported framer-motion for smooth toggle animations
Audit de sécurité
SûrThis is a prompt-based skill containing only markdown documentation. All 38 static findings are false positives: backticks in markdown are code formatting syntax, not shell commands. No cryptographic algorithms, path traversal, or network calls exist. The skill provides instructions for using Shadcn MCP and 21st.dev MCP tools.
Facteurs de risque
⚙️ Commandes externes (22)
📁 Accès au système de fichiers (2)
🌐 Accès réseau (1)
Score de qualité
Ce que vous pouvez construire
新增 UI 元件
使用 Shadcn MCP 快速為您的 React 專案新增按鈕、表單和對話框
生成登陸頁面
使用 21st.dev MCP 建立具有主視覺區塊的專業 SaaS 登陸頁面
維護主題一致性
使用 CSS 變數和 Shadcn MCP 跨應用程式套用和更新主題
Essayez ces prompts
使用 Shadcn MCP 新增一個按鈕元件。我需要一個主要按鈕，支援圖示和載入狀態。
使用 21st.dev MCP 生成一個具有深色漸變背景、郵件收集表單和響應式設計的現代 SaaS 主視覺區塊。
使用 Shadcn MCP 將應用程式主題更新為以鋅色為中性基底，藍色為主要色彩。
建立一個具有標頭、側邊欄和主要內容區域的儀表板布局。使用來自 @/components/ui 的原子，並將元件放置在適當的目錄中。
Bonnes pratiques
- 在建立自訂元件之前，先使用 Shadcn MCP 生成基礎原子元件
- 將生成的區塊放置在 src/components/sections/ 目錄中
- 始終使用語義化色彩變數（bg-background、text-primary）以支援深色模式
Éviter
- 手動編寫 Shadcn 或 21st.dev 庫中已存在的元件
- 使用硬編碼色彩而非 CSS 變數
- 將頁面特定元件建立在共用的 ui/ 目錄而非 _components/ 中
Foire aux questions
此技能支援哪些工具？
哪些 React 框架可與此搭配使用？
可以使用自訂 CSS 而非 Tailwind 嗎？
我的專案資料安全嗎？
元件無法正確生成
這與手動安裝 Shadcn 有什麼不同？
Détails du développeur
Structure de fichiers
📄 SKILL.md