Design & Frontend ✓ Microsoft · Official reacttypescripttailwind-cssframer-motionviteglassmorphismdark-theme

Dark Theme React UI System

A reusable foundation for dark React interfaces with Tailwind styling, glassmorphism, and restrained motion.

FollowSkills review · FSRS-2.0
Not recommended
52/ 100 5-point scale 2.6 / 5
Trust16 / 25 · 3.2/5

The skill is primarily for generating local React/Tailwind UI and shows no malware, credential theft, covert exfiltration, or destructive defaults. However, dependencies use broad version ranges, and the skill lacks dependency security review, data-flow disclosure, user-confirmation guidance, rollback guidance, and external-resource risk notes, so substantial points are deducted.

Reliability7 / 20 · 1.8/5

The stack, configuration, and component examples are broadly consistent and include states such as loading, errors, and modal dismissal. However, the documented structure references pages and components not supplied in the evidence, some examples have likely issues such as Badge classes requiring extra configuration and Checkbox animation depending on the checked prop, and the Toast source is truncated. No key-path tests or diagnosable failure procedures are provided, so the static ceiling and uncertainty require a conservative score.

Adaptability10 / 15 · 3.3/5

The audience and scenarios are clear: dark React dashboards, admin panels, and data-rich interfaces, with component, layout, mobile, and animation patterns. Non-fit cases, invocation conditions, input/output boundaries, and accessibility tradeoffs are not clearly stated, and the documentation is mainly English. npm reachability in mainland China is not established, but the evidence does not show that the core function entirely depends on an unreachable overseas service.

Convention9 / 15 · 3.0/5

The skill has front matter, an MIT license, author metadata, version 1.0.0, progressive sections for configuration, components, tokens, and patterns, plus examples. It lacks a changelog, compatibility matrix, explicit maintenance owner, and update path; some referenced files cannot be fully verified from the supplied material, so full marks are not justified.

Effectiveness6 / 15 · 2.0/5

The configuration, CSS tokens, React components, and page templates provide reusable material for common dark administrative UI tasks. However, there is no complete runnable project, some dependencies or referenced files are missing from the evidence, and examples include placeholders and likely integration or runtime issues. Outputs would require meaningful assembly and review, warranting a conservative static score.

Verifiability4 / 10 · 2.0/5

The supplied source is auditable and includes concrete version ranges, code, and configuration examples; the repository README also mentions CI and tests. Nevertheless, no skill-specific test suite, execution result, or third-party reproduction evidence is provided, and some source content is truncated, preventing independent reproduction of key paths.

Evidence confidence:Low Reviewed Jul 20, 2026 Reviewed revision 9ccaf7c3704a
Before you use it
  • Do not treat this SKILL.md as a verified runnable template; complete the missing files and run TypeScript, build, accessibility, and responsive checks.
  • Pin dependency versions and review npm packages and external fonts, icons, and image sources.
  • Validate Badge status classes, controlled versus uncontrolled Checkbox behavior, Dialog accessibility, Toast timer cleanup, and mobile navigation before production use.
Review evidence [1][2][3][4][5][6]
See the full review method →

What it does & when to use it

This is a TypeScript frontend skill from microsoft/agent-skills focused on building dark-themed React applications with Tailwind CSS and Framer Motion. It targets dashboards, admin panels, and data-rich interfaces, and defines conventions for colors, spacing, borders, status states, typography, and motion. The guidance covers Vite setup, routing, PWA metadata, responsive safe-area support, and a suggested component structure. It provides implementation guidance and code snippets rather than a standalone UI component package.

It guides a coding agent through bootstrapping a React TypeScript Vite project and installing Framer Motion, clsx, react-router-dom, Tailwind CSS, PostCSS, and Autoprefixer; organizing public, component, layout, and styles directories; configuring dark theme tokens, Segoe UI fonts, glass utilities, focus states, scrollbar styling, touch-target sizes, and CSS animations; structuring pages with React Router; and implementing fade, slide, hover-scale, stagger, modal, and page-transition patterns with Framer Motion. It includes directly reusable examples for index.html, Tailwind, PostCSS, global CSS, and TSX files.

  1. A frontend developer needs to bootstrap a dark data dashboard in React and TypeScript.
  2. A product team is building an admin panel with a sidebar, cards, dialogs, and settings pages.
  3. A team wants consistent brand purple, status colors, spacing, radii, and border tokens across a web application.
  4. A developer wants glassmorphism surfaces and restrained transitions in a dark-themed interface.

Pros & cons

Pros
  • The stack is explicit: React 18, Vite 5, Tailwind CSS 3, and Framer Motion 11, among other dependencies.
  • It provides copyable theme configuration, glassmorphism utilities, safe-area support, and animation patterns.
  • Its scope is clear for dashboards, admin panels, and data-rich interfaces.
  • It is MIT-licensed, and the collection repository is described as actively maintained with expanding tests.
Limitations
  • It is an implementation guide, not a complete published implementation of the listed Button, Card, Dialog, and other components.
  • The source provides no dedicated test scenarios or coverage evidence for this individual skill.
  • It requires Node.js/npm and several frontend dependencies, so it does not replace a finished UI component library.
  • Its dark, glassmorphic visual direction may require substantial adaptation for projects with a different design language.

How to install

Run npx skills add microsoft/skills and select the needed skill in the wizard. The collection installs into the selected agent's directory, such as .github/skills/ for GitHub Copilot, and may be symlinked for multiple agents. The source does not document a command to select frontend-ui-dark-ts directly. The README also describes cloning https://github.com/microsoft/skills.git and copying selected skills, but does not provide a copy command for this plugin path specifically.

How to use

With the skill loaded in a coding agent, use a prompt such as: Create a dark-themed React TypeScript admin panel with Tailwind CSS and Framer Motion, including a sidebar, dashboard cards, settings page, glass surfaces, and page transitions. The skill supplies the project structure, configuration, global styles, routing pattern, and animation examples.

FAQ

Is this a complete installable component library?
No. The source shows a component directory structure and usage examples, but not complete implementations or a standalone component package.
What are the main dependencies?
The source lists React, react-dom, react-router-dom, Framer Motion, clsx, Tailwind CSS, Vite, and TypeScript, with npm installation commands for the core setup.
Does it require MCP or Azure permissions?
The individual SKILL.md does not require MCP, Azure service calls, or Azure permission configuration.
What interfaces is it best suited for?
It is best suited to dark-themed React dashboards, admin panels, and data-rich applications; other visual directions require customization.

More skills from this repository

All from microsoft/agent-skills

Dev & Engineering ✓ Microsoft · Official

Azure Identity for Python

A practical skill for securing Python Azure applications with Microsoft Entra ID credentials.

Dev & Engineering ✓ Microsoft · Official

Azure Event Hubs Java Skill

Build production-oriented Java event streaming applications on Azure Event Hubs.

Dev & Engineering ✓ Microsoft · Official

Azure Tables for Python

A practical guide to building authenticated Azure Tables applications with Python entity CRUD, queries, and partition-scoped batch operations.

Dev & Engineering ✓ Microsoft · Official

Azure Identity for TypeScript

Configure secure, flexible Microsoft Entra ID authentication for TypeScript Azure applications.

Automation & Ops ✓ Microsoft · Official

Azure Reliability Advisor

Assess and improve reliability for Azure Functions and App Service.

Dev & Engineering ✓ Microsoft · Official

Azure Cloud Architect

Guides coding agents through production-grade Azure architecture design and review using Azure Architecture Center practices.

Dev & Engineering ✓ Microsoft · Official

Azure AI Text Analytics for Python

Guides Python developers through Azure-powered text analysis and NLP workflows.

Automation & Ops ✓ Microsoft · Official

Azure Resource Architecture Visualizer

Analyze Azure resource groups and turn their dependencies into detailed Mermaid architecture diagrams.

Dev & Engineering ✓ Microsoft · Official

Azure Maps for .NET

Build .NET location features for search, routing, maps, geolocation, and weather.

Dev & Engineering ✓ Microsoft · Official

Azure AI Vision Image Analysis

Guides Python coding agents in implementing Azure AI Vision image understanding.

Dev & Engineering ✓ Microsoft · Official

Azure Blob Storage for Python

Guides secure, production-minded Blob Storage operations in Python.

Dev & Engineering ✓ Microsoft · Official

Azure Queue Storage for Python

Gives coding agents reliable Python patterns for secure Azure Queue Storage messaging and asynchronous task processing.

Automation & Ops ✓ Microsoft · Official

Azure AI Gateway Governance

Use Azure API Management to govern traffic across AI models, MCP tools, and agents.

Automation & Ops ✓ Microsoft · Official

AKS Automatic Readiness

Assess Kubernetes workloads for AKS Automatic compatibility and identify migration blockers before you switch.

Dev & Engineering ✓ Microsoft · Official

Azure Cosmos DB ARM for .NET

Provision and manage Azure Cosmos DB resources from .NET through ARM.

Dev & Engineering ✓ Microsoft · Official

Azure Playwright Workspace Manager

Provision and manage Microsoft Playwright Testing workspaces with .NET and Azure Resource Manager.

Dev & Engineering ✓ Microsoft · Official

Azure Cosmos DB for Python

A practical guide for building reliable Python applications on Azure Cosmos DB’s NoSQL API.

Dev & Engineering ✓ Microsoft · Official

Azure Key Vault SDK for Python

Gives Python coding agents practical guidance for securely managing Azure Key Vault secrets, keys, and certificates.

Dev & Engineering ✓ Microsoft · Official

Azure API Management for Python

Gives coding agents practical Python SDK patterns for managing Azure API Management services, APIs, products, subscriptions, and policies.

Dev & Engineering ✓ Microsoft · Official

Azure Monitor Query for Python

Generate Python code for querying Azure Monitor logs and metrics.

Related skills