Frontend UI Dark Theme (TypeScript)
Skill Verifiziert AktivBuild 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.
Funktionen
- 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
Anwendungsfälle
- 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
Nicht-Ziele
- Providing backend services or API integrations
- Handling application logic beyond UI presentation
- Offering light-themed or alternative color palettes
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add microsoft/skills/plugin install azure-sdk-typescript@skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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.
Frontend Design
99Erstellen Sie unverwechselbare Frontend-Oberflächen in Produktionsqualität mit hoher Designqualität. Verwenden Sie diese Fähigkeit, wenn der Benutzer auffordert, Webkomponenten, Seiten oder Anwendungen zu erstellen. Generiert kreativen, polierten Code, der generische KI-Ästhetik vermeidet.
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.