Can I easily customize the brand colors?

Absolutely. The skill provides a centralized tailwind.config.js and a collection of CSS custom properties in globals.css for rapid theme adjustments.

What UI framework does this skill use?

This skill is built on React 18 using Vite as the build tool, Tailwind CSS for styling, and TypeScript for type safety.

Is Framer Motion necessary for this skill to work?

The skill includes Framer Motion patterns for high-end animations, but the core styling and layout rely on Tailwind CSS and can be used independently.

Does this UI system support mobile devices?

Yes, it includes specialized configurations for mobile viewport-fit, safe-area-insets for notched devices, and minimum touch target sizes per accessibility guidelines.

Frontend Dark Theme UI (TypeScript)

Name: Frontend Dark Theme UI (TypeScript)
Author: microsoft

bymicrosoft

•

1,777

•

设计工具

Builds high-performance, dark-themed React interfaces featuring glassmorphism, fluid animations, and a refined aesthetic.

This Claude Code skill provides a comprehensive foundation for developing professional dark-themed applications using a modern tech stack of React, Tailwind CSS, and Framer Motion. It is specifically optimized for creating high-density data dashboards, admin panels, and command centers that require a sophisticated visual style. The skill automates the setup of custom theming, responsive layouts with mobile safe-area support, and standardized motion patterns, allowing developers to focus on functionality while maintaining a consistent, production-grade design system with built-in type safety.

主要功能

01Mobile-first responsive layout with safe-area-inset and touch target optimizations

021,777 GitHub stars

03Pre-configured Tailwind CSS theme with glassmorphism utility classes

04Complete PWA and SEO metadata setup including favicons and Open Graph tags

05Standardized project structure for components, layouts, and global styles

06Standardized Framer Motion variants for page transitions and micro-interactions

使用场景

01Scaffolding modern dark-mode-first internal developer tools

02Building data-rich analytics dashboards and monitoring systems

03Developing sleek SaaS administrative panels and management interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microsoft/skills frontend-ui-dark-ts

For use in Claude.ai and ChatGPT

Download Skill