Labsco
microsoft logo

frontend-ui-dark-ts

✓ Official★ 2,700

by microsoft · part of microsoft/skills

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards,…

🔥🔥🔥✓ VerifiedFreeNeeds API keys
#cloud#git#translation#video-editing
🧩 One of 7 skills in the microsoft/skills package — works on its own, and pairs well with its siblings.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards,…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by microsoft

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards,… npx skills add https://github.com/microsoft/agent-skills --skill frontend-ui-dark-ts Download ZIPGitHub2.7k

Frontend UI Dark Theme (TypeScript)

A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.

Stack

Package Version Purpose react ^18.x UI framework react-dom ^18.x DOM rendering react-router-dom ^6.x Routing framer-motion ^11.x Animations clsx ^2.x Class merging tailwindcss ^3.x Styling vite ^5.x Build tool typescript ^5.x Type safety

Project Structure

Copy & paste — that's it
public/
├── favicon.ico # Classic favicon (32x32)
├── favicon.svg # Modern SVG favicon
├── apple-touch-icon.png # iOS home screen (180x180)
├── og-image.png # Social sharing image (1200x630)
└── site.webmanifest # PWA manifest
src/
├── assets/
│ └── fonts/
│ ├── Segoe UI.ttf
│ ├── Segoe UI Bold.ttf
│ ├── Segoe UI Italic.ttf
│ └── Segoe UI Bold Italic.ttf
├── components/
│ ├── ui/
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Input.tsx
│ │ ├── Badge.tsx
│ │ ├── Dialog.tsx
│ │ ├── Tabs.tsx
│ │ └── index.ts
│ └── layout/
│ ├── AppShell.tsx
│ ├── Sidebar.tsx
│ └── PageHeader.tsx
├── styles/
│ └── globals.css
├── App.tsx
└── main.tsx

Animation Patterns

Framer Motion Variants

Copy & paste — that's it
// Fade in on mount
export const fadeIn = {
 initial: { opacity: 0 },
 animate: { opacity: 1 },
 exit: { opacity: 0 },
 transition: { duration: 0.2 },
};

// Slide up on mount
export const slideUp = {
 initial: { opacity: 0, y: 20 },
 animate: { opacity: 1, y: 0 },
 exit: { opacity: 0, y: 20 },
 transition: { duration: 0.3, ease: 'easeOut' },
};

// Scale on hover (for buttons/cards)
export const scaleOnHover = {
 whileHover: { scale: 1.02 },
 whileTap: { scale: 0.98 },
 transition: { type: 'spring', stiffness: 400, damping: 17 },
};

// Stagger children
export const staggerContainer = {
 hidden: { opacity: 0 },
 visible: {
 opacity: 1,
 transition: {
 staggerChildren: 0.05,
 delayChildren: 0.1,
 },
 },
};

export const staggerItem = {
 hidden: { opacity: 0, y: 10 },
 visible: {
 opacity: 1,
 y: 0,
 transition: { duration: 0.2, ease: 'easeOut' },
 },
};

Page Transition Wrapper

Copy & paste — that's it
import { motion } from 'framer-motion';
import { ReactNode } from 'react';

interface PageTransitionProps {
 children: ReactNode;
}

export function PageTransition({ children }: PageTransitionProps) {
 return (
 
 {children}
 
 );
}

Glass Effect Patterns

Glass Card

Copy & paste — that's it

## Card Title

Card content goes here.

Glass Panel (Sidebar)

Copy & paste — that's it
 
 
 {/* Navigation items */}

Glass Modal Overlay

Copy & paste — that's it
 
 
 {/* Modal content */}

Typography

Element Classes Page title text-2xl font-semibold text-text-primary Section title text-lg font-semibold text-text-primary Card title text-base font-medium text-text-primary Body text text-sm text-text-secondary Caption text-xs text-text-muted Label text-sm font-medium text-text-secondary

Related Files

  • Design Tokens — Complete color system, spacing, typography scales

  • Components — Button, Card, Input, Dialog, Tabs, and more

  • Patterns — Page layouts, navigation, lists, forms