Dark Theme React UI System
A reusable foundation for dark React interfaces with Tailwind styling, glassmorphism, and restrained motion.
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.
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.
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.
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.
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.
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.
- 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.
What does this skill do, and when should you 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.
- A frontend developer needs to bootstrap a dark data dashboard in React and TypeScript.
- A product team is building an admin panel with a sidebar, cards, dialogs, and settings pages.
- A team wants consistent brand purple, status colors, spacing, radii, and border tokens across a web application.
- A developer wants glassmorphism surfaces and restrained transitions in a dark-themed interface.
What are this skill's strengths and limitations?
- 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.
- 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 do you install this skill?
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 do you use this skill?
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.