Frontend Ui Dark Ts
Scaffold a dark glassmorphism React + TypeScript dashboard UI with Tailwind CSS, Framer Motion, and Vite conventions from the skill’s stack table.
Overview
Frontend UI Dark Theme (TypeScript) is an agent skill for the Build phase that guides dark glassmorphism React dashboards using Tailwind CSS, Framer Motion, and a Vite TypeScript starter layout.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill frontend-ui-dark-tsWhat is this skill?
- Dark-themed React UI with glassmorphism and motion for dashboards and admin panels
- Stack table: React 18, Tailwind 3, Framer Motion 11, Vite 5, TypeScript 5, react-router-dom 6
- Vite react-ts quick start with framer-motion, clsx, and Tailwind init steps
- Public asset checklist: favicon, apple-touch-icon, og-image, site.webmanifest
- Opinionated src layout with assets/fonts and component-oriented structure
- 8-row dependency stack table (react through typescript)
- 4 public marketing asset types listed (favicon, apple-touch, og-image, manifest)
Adoption & trust: 719 installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a credible dark admin or dashboard UI but lack a consistent Tailwind + motion stack and folder conventions for a Vite React TS app.
Who is it for?
Indie SaaS builders starting a data-rich SPA or admin console who want Tailwind dark glass styling with motion out of the box.
Skip if: Native mobile apps, light-only marketing sites that reject dark UI, or teams standardized on Next.js App Router without Vite.
When should I use this skill?
Building dashboards, admin panels, or data-rich dark-themed React TypeScript UIs with Tailwind and Framer Motion.
What do I get? / Deliverables
You get a initialized Vite react-ts project structure, dependencies, and dark UI patterns ready for feature screens and routing.
- Vite react-ts project with Tailwind and motion dependencies
- Dark UI component and asset folder conventions
Recommended Skills
Journey fit
How it compares
Skill-packaged UI system conventions—not a hosted component marketplace or Figma-to-code plugin.
Common Questions / FAQ
Who is frontend-ui-dark-ts for?
Solo builders creating React TypeScript dashboards or admin tools who want Tailwind and Framer Motion baked into project setup and dark UI guidance.
When should I use frontend-ui-dark-ts?
During the build frontend subphase when scaffolding Vite apps, defining dark theme layouts, or adding glassmorphism and motion to data-heavy screens.
Is frontend-ui-dark-ts safe to install?
Community-sourced styling guidance only; verify package versions yourself and review the Security Audits panel on this Prism page before install.
SKILL.md
READMESKILL.md - Frontend Ui Dark Ts
# 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 ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm install framer-motion clsx react-router-dom npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` ## Project Structure ``` 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 ``` ## Configuration ### index.html The HTML entry point with mobile viewport, favicons, and social meta tags: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <!-- Favicons --> <link rel="icon" href="/favicon.ico" sizes="32x32" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <!-- Theme color for mobile browser chrome --> <meta name="theme-color" content="#18181B" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:title" content="App Name" /> <meta property="og:description" content="App description" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:url" content="https://example.com" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="App Name" /> <meta name="twitter:description" content="App description" /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <title>App Name</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html> ``` ### public/site.webmanifest PWA manifest for installable web apps: ```json { "name": "App Name", "short_name": "App", "icons": [ { "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" }, { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" } ], "theme_color": "#18181B", "background_color": "#18181B", "display": "standalone" } ``` ### tailwind.config.js ```js /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { fontFamily: { sans: ['Segoe UI', 'sy