frontend-ui-dark-ts
建立深色主題 React UI
使用 Tailwind CSS、磨砂玻璃效果和流暢的 Framer Motion 動畫，建立現代化的深色主題 React 應用程式儀表板和管理面板。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-ui-dark-ts". Create a dark-themed button component with brand purple background
النتيجة المتوقعة:
使用 bg-brand 搭配 hover:bg-brand-hover 的按鈕元件，具有適當的焦點環樣式和觸控友善的尺寸
استخدام "frontend-ui-dark-ts". Build a sidebar with glassmorphic panel effect
النتيجة المتوقعة:
使用 glass-panel 類別的側邊欄，具有 backdrop-blur-lg、深色背景和精細邊框樣式
استخدام "frontend-ui-dark-ts". Add a fade-in animation to a modal component
النتيجة المتوقعة:
模態框從初始 opacity 0 動畫到 opacity 1，使用 Framer Motion 搭配 0.3s easeOut 轉場
التدقيق الأمني
آمنStatic analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
عوامل الخطر
⚡ يحتوي على سكربتات (1)
⚙️ الأوامر الخارجية (53)
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (4)
درجة الجودة
ماذا يمكنك بناءه
建立深色模式管理儀表板
使用深色主題模式建立具有側邊欄導航、資料表格和狀態指示器的專業管理面板。
設計資料視覺化介面
使用磨砂玻璃卡片、流暢轉場和自訂顏色 tokens 建立豐富資料的儀表板，以進行資料視覺化。
實作現代化登入頁面
建立具有動畫區塊、磨砂玻璃覆蓋模態框和精緻微互動的時尚登入頁面。
جرّب هذه الموجهات
使用 frontend-ui-dark-ts 技能設定具有 Tailwind CSS 深色主題配置的新 React 專案。包含自訂品牌顏色、中性背景和文字顏色 tokens。
使用 frontend-ui-dark-ts 模式建立磨砂玻璃卡片元件。包含背景模糊、精細邊框和適當的深色主題顏色。
使用 Framer Motion 實作流暢的頁面轉場。從 frontend-ui-dark-ts 技能使用淡入和向上滑動變體進行路由變更。
建立具有應用程式殼層、側邊欄導航、頁面標題和響應式磨砂玻璃卡片的完整儀表板版面配置。包含狀態標籤和資料視覺化顏色 tokens。
أفضل الممارسات
- 使用語意化顏色 tokens（text-primary、text-secondary）而非硬編碼顏色以保持可維護性
- 謹慎使用磨砂效果 - 過度使用會降低可讀性和效能
- 在實際裝置上測試動畫 - 應尊重減少動畫的偏好設定
تجنب
- 避免使用純黑色背景 - 使用中性背景顏色並保持適當的對比度
- 不要對所有元素應用磨砂效果 - 保留給浮起的表面和覆蓋層使用
- 避免過度複雜的動畫以免影響頁面載入或互動回應速度