MR
Mayur Rathi
@mayurrathi
⭐ 40.7k GitHub stars

Frontend Ui Dark Ts

Frontend Ui Dark Ts is an design AI skill with a core value of Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. It helps developers solve real-world problems in the design domain, boosting efficiency, automating repetitive tasks, and optimizing workflows.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...

Last verified on: 2026-07-07

Quick Facts

Category design
Works With Claude
Source sickn33/antigravity-awesome-skills
Stars ⭐ 40.7k
Last Verified 2026-07-07
Risk Level Low
mkdir -p ./skills/frontend-ui-dark-ts && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/frontend-ui-dark-ts/SKILL.md -o ./skills/frontend-ui-dark-ts/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# 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


text 
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', 'system-ui', 'sans-serif'],
      },
      colors: {
        brand: {
          DEFAULT: '#8251EE',
          hover: '#9366F5',
          light: '#A37EF5',
          subtle: 'rgba(130, 81, 238, 0.15)',
        },
        neutral: {
          bg1: 'hsl(240, 6%, 10%)',
          bg2: 'hsl(240, 5%, 12%)',

🎯 Best For

  • UI designers
  • Product designers
  • Claude users
  • Designers
  • Creative professionals

💡 Use Cases

  • Generating component mockups
  • Creating design system tokens
  • Design system documentation
  • Component specification creation

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply Frontend Ui Dark Ts to Your Work

    Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.

  4. 4

    Review and Refine

    Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.

❓ Frequently Asked Questions

Does this work with Figma?

Some design skills integrate with Figma plugins. Check the Works With section for supported tools.

Does Frontend Ui Dark Ts generate production-ready design specs?

It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.

How do I install Frontend Ui Dark Ts?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/frontend-ui-dark-ts/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Skipping usability testing

AI-generated designs should be validated with real users before development.

Not reading the full skill

Skills contain important context and edge cases beyond the quick start.

🔗 Related Skills

3d-web-experience 3d-web-experienceangular-ui-patterns Angular Ui Patternsreact-ui-patterns React Ui Patternsui-ux-pro-max Ui Ux Pro Maxweb-artifacts-builder Web Artifacts Buildernextjs-tailwind Nextjs-Tailwind