Setup & Installation
npx skills add https://github.com/microsoft/skills --skill frontend-ui-dark-ts
https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts
View on GitHubWhat This Skill Does
A React UI starter built around a dark color system, glassmorphism utility classes, and Framer Motion animation variants. It ships with a Tailwind config that defines brand purples, layered neutral backgrounds, status colors, and dataviz tokens. The layout includes an app shell, sidebar, and page transition wrapper.
Instead of assembling dark theme tokens, glass utilities, animation variants, and layout components from scratch, you get a coordinated system where colors, transitions, and component classes are already wired together.
When to use it
- Scaffolding a dark-themed admin dashboard with a sidebar and page routing
- Adding glassmorphism card and modal components to an existing React app
- Applying consistent Framer Motion page transitions and stagger animations across routes
- Setting up a Tailwind dark theme with layered background tokens and border opacity scales
- Building a data-rich interface that needs purple brand accents and status color indicators