frontend-ui-dark-ts
Build Dark-Themed React UIs
Create modern dark-themed React applications with Tailwind CSS, glassmorphism effects, and smooth Framer Motion animations for dashboards and admin panels.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-ui-dark-ts」。 Create a dark-themed button component with brand purple background
預期結果:
A button component using bg-brand with hover:bg-brand-hover, proper focus ring styles, and touch-friendly sizing
正在使用「frontend-ui-dark-ts」。 Build a sidebar with glassmorphic panel effect
預期結果:
A sidebar using glass-panel class with backdrop-blur-lg, dark background, and subtle border styling
正在使用「frontend-ui-dark-ts」。 Add a fade-in animation to a modal component
預期結果:
Modal with initial opacity 0, animate to opacity 1, using Framer Motion with 0.3s easeOut transition
安全審計
安全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)
品質評分
你能建構什麼
Build a dark-mode admin dashboard
Create a professional admin panel with sidebar navigation, data tables, and status indicators using the dark theme patterns.
Design a data visualization interface
Build a data-rich dashboard with glassmorphic cards, smooth transitions, and custom color tokens for data visualization.
Implement a modern landing page
Create a sleek landing page with animated sections, glass overlay modals, and polished micro-interactions.
試試這些提示
Use the frontend-ui-dark-ts skill to set up a new React project with Tailwind CSS dark theme configuration. Include custom brand colors, neutral backgrounds, and text color tokens.
Create a glassmorphic card component using the frontend-ui-dark-ts patterns. Include backdrop blur, subtle borders, and proper dark theme colors.
Implement smooth page transitions using Framer Motion. Use the fade-in and slide-up variants from the frontend-ui-dark-ts skill for route changes.
Build a complete dashboard layout with app shell, sidebar navigation, page header, and responsive glass cards. Include status badges and data visualization color tokens.
最佳實務
- Use semantic color tokens (text-primary, text-secondary) instead of hardcoded colors for maintainability
- Apply glass effects sparingly - overuse can reduce readability and performance
- Test animations on actual devices - reduce motion preferences should be respected
避免
- Avoid using pure black backgrounds - use neutral-bg colors with proper contrast ratios
- Do not apply glass effect to all elements - reserve for elevated surfaces and overlays
- Avoid excessive animation complexity that impacts page load or interaction responsiveness