Agent skill · software engineering · aiskillstore
frontend-ui-dark-ts
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.
Why this skill is useful
Provides a modern UI framework with specific Tailwind CSS and Framer Motion configurations that enhance React applications for dashboards and data-rich interfaces.
What it needs
Requires autoprefixer, postcss, tailwindcss, vite installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Quick Start Project Structure Configuration index.html The HTML entry point with mobile viewport, favicons, and social meta tags: public/site.webmanifest PWA manifest for installable web apps: tailwind.config.js postcss.config.js src/styles/globals.css src/main.tsx src/App.tsx Animation Patterns Framer Motion Variants Page Transition Wrapper Glass Effect Patterns Glass Card Glass Panel (Sidebar) Glass Modal Overlay 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 Color Usage Use Case Color Class ---------- ------- ------- Primary action Brand purple bg-brand text-white Primary hover Brand hover hover:bg-brand-hover Page background Neutral bg1 bg-neutral-bg1 Card background Neutral bg2 bg-neutral-bg2 Elevated surface Neutral bg3 bg-neutral-bg3 Input background Neutral bg2 bg-neutral-bg2 Input focus Neutral bg3 focus:bg-neutral-bg3 Border default Border default border-border Border subtle Border subtle border-border-subtle Success Status success text-status-success Warning Status warning text-status-warning Error Status error text-status-error Related Files Design Tokens — Complete color system, spacing, typography scales Components — Button, Card, Input, Dialog, Tabs, and more Patterns — Page layouts, naviga …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-ui-dark-ts