Frontend UI Dark Theme (TypeScript)
技能 已验证 活跃Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
Build dark-themed React applications with a refined aesthetic, leveraging custom theming, glassmorphism, and animations for modern dashboards and interfaces.
功能
- Dark-themed React components (Button, Card, Input, Dialog, etc.)
- Tailwind CSS for styling with custom dark theme
- Glassmorphism effects and animations
- Reusable UI patterns and layouts
- TypeScript support and design tokens
使用场景
- Creating modern dark-themed dashboards and admin panels
- Developing data-rich interfaces with a refined aesthetic
- Rapidly prototyping UI designs with pre-built components
- Establishing a consistent design system for React applications
非目标
- Providing backend services or API integrations
- Handling application logic beyond UI presentation
- Offering light-themed or alternative color palettes
安装
请先添加 Marketplace
/plugin marketplace add microsoft/skills/plugin install azure-sdk-typescript@skills质量评分
已验证类似扩展
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
前端设计
99通过高设计质量创建独特、生产级的面向接口。当用户要求构建 Web 组件、页面或应用程序时，请使用此技能。生成富有创意、精美的代码，避免通用的 AI 美学。
Refactoring UI
98Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.