App Name

{ "schema": "https://ai-atoms.com/schemas/skill-v1.json", "type": "skill", "id": "skill/frontend-ui-dark-ts", "version": "1.0.0", "name": "Frontend Ui Dark Ts", "description": "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...", "system_prompt_fragment": "# Frontend UI Dark Theme (TypeScript)\n\nA 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.\n\n## Stack\n\n| Package | Version | Purpose |\n|---------|---------|---------|\n| `react` | ^18.x | UI framework |\n| `react-dom` | ^18.x | DOM rendering |\n| `react-router-dom` | ^6.x | Routing |\n| `framer-motion` | ^11.x | Animations |\n| `clsx` | ^2.x | Class merging |\n| `tailwindcss` | ^3.x | Styling |\n| `vite` | ^5.x | Build tool |\n| `typescript` | ^5.x | Type safety |\n\n## Quick Start\n\n```bash\nnpm create vite@latest my-app -- --template react-ts\ncd my-app\nnpm install framer-motion clsx react-router-dom\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n## Project Structure\n\n```\npublic/\n├── favicon.ico # Classic favicon (32x32)\n├── favicon.svg # Modern SVG favicon\n├── apple-touch-icon.png # iOS home screen (180x180)\n├── og-image.png # Social sharing image (1200x630)\n└── site.webmanifest # PWA manifest\nsrc/\n├── assets/\n│ └── fonts/\n│ ├── Segoe UI.ttf\n│ ├── Segoe UI Bold.ttf\n│ ├── Segoe UI Italic.ttf\n│ └── Segoe UI Bold Italic.ttf\n├── components/\n│ ├── ui/\n│ │ ├── Button.tsx\n│ │ ├── Card.tsx\n│ │ ├── Input.tsx\n│ │ ├── Badge.tsx\n│ │ ├── Dialog.tsx\n│ │ ├── Tabs.tsx\n│ │ └── index.ts\n│ └── layout/\n│ ├── AppShell.tsx\n│ ├── Sidebar.tsx\n│ └── PageHeader.tsx\n├── styles/\n│ └── globals.css\n├── App.tsx\n└── main.tsx\n```\n\n## Configuration\n\n### index.html\n\nThe HTML entry point with mobile viewport, favicons, and social meta tags:\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n App Name\n \n \n

\n \n \n\n```\n\n### public/site.webmanifest\n\nPWA manifest for installable web apps:\n\n```json\n{\n \"name\": \"App Name\",\n \"short_name\": \"App\",\n \"icons\": [\n { \"src\": \"/favicon.ico\", \"sizes\": \"32x32\", \"type\": \"image/x-icon\" },\n { \"src\": \"/apple-touch-icon.png\", \"sizes\": \"180x180\", \"type\": \"image/png\" }\n ],\n \"theme_color\": \"#18181B\",\n \"background_color\": \"#18181B\",\n \"display\": \"standalone\"\n}\n```\n\n### tailwind.config.js\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Segoe UI', 'system-ui', 'sans-serif'],\n },\n colors: {\n brand: {\n DEFAULT: '#8251EE',\n hover: '#9366F5',\n light: '#A37EF5',\n subtle: 'rgba(130, 81, 238, 0.15)',\n },\n neutral: {\n bg1: 'hsl(240, 6%, 10%)',\n bg2: 'hsl(240, 5%, 12%)',\n bg3: 'hsl(240, 5%, 14%)',\n bg4: 'hsl(240, 4%, 18%)',\n bg5: 'hsl(240, 4%, 22%)',\n bg6: 'hsl(240, 4%, 26%)',\n },\n text: {\n primary: '#FFFFFF',\n secondary: '#A1A1AA',\n muted: '#71717A',\n },\n border: {\n subtle: 'hsla(0, 0%, 100%, 0.08)',\n DEFAULT: 'hsla(0, 0%, 100%, 0.12)',\n strong: 'hsla(0, 0%, 100%, 0.20)',\n },\n status: {\n success: '#10B981',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#3B82F6',\n },\n dataviz: {\n purple: '#8251EE',\n blue: '#3B82F6',\n green: '#10B981',\n yellow: '#F59E0B',\n red: '#EF4444',\n pink: '#EC4899',\n cyan: '#06B6D4',\n },\n },\n borderRadius: {\n DEFAULT: '0.5rem',\n lg: '0.75rem',\n xl: '1rem',\n },\n boxShadow: {\n glow: '0 0 20px rgba(130, 81, 238, 0.3)',\n 'glow-lg': '0 0 40px rgba(130, 81, 238, 0.4)',\n },\n backdropBlur: {\n xs: '2px',\n },\n animation: {\n 'fade-in': 'fadeIn 0.3s ease-out',\n 'slide-up': 'slideUp 0.3s ease-out',\n 'slide-down': 'slideDown 0.3s ease-out',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n slideUp: {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n slideDown: {\n '0%': { opacity: '0', transform: 'translateY(-10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n },\n // Mobile: safe area insets for notched devices\n spacing: {\n 'safe-top': 'env(safe-area-inset-top)',\n 'safe-bottom': 'env(safe-area-inset-bottom)',\n 'safe-left': 'env(safe-area-inset-left)',\n 'safe-right': 'env(safe-area-inset-right)',\n },\n // Mobile: minimum touch target sizes (44px per Apple/Google guidelines)\n minHeight: {\n 'touch': '44px',\n },\n minWidth: {\n 'touch': '44px',\n },\n },\n },\n plugins: [],\n};\n```\n\n### postcss.config.js\n\n```js\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n### src/styles/globals.css\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Font faces */\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Bold.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Italic.ttf') format('truetype');\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Bold Italic.ttf') format('truetype');\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n}\n\n/* CSS Custom Properties */\n:root {\n /* Brand colors */\n --color-brand: #8251EE;\n --color-brand-hover: #9366F5;\n --color-brand-light: #A37EF5;\n --color-brand-subtle: rgba(130, 81, 238, 0.15);\n\n /* Neutral backgrounds */\n --color-bg-1: hsl(240, 6%, 10%);\n --color-bg-2: hsl(240, 5%, 12%);\n --color-bg-3: hsl(240, 5%, 14%);\n --color-bg-4: hsl(240, 4%, 18%);\n --color-bg-5: hsl(240, 4%, 22%);\n --color-bg-6: hsl(240, 4%, 26%);\n\n /* Text colors */\n --color-text-primary: #FFFFFF;\n --color-text-secondary: #A1A1AA;\n --color-text-muted: #71717A;\n\n /* Border colors */\n --color-border-subtle: hsla(0, 0%, 100%, 0.08);\n --color-border-default: hsla(0, 0%, 100%, 0.12);\n --color-border-strong: hsla(0, 0%, 100%, 0.20);\n\n /* Status colors */\n --color-success: #10B981;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* Spacing */\n --spacing-xs: 0.25rem;\n --spacing-sm: 0.5rem;\n --spacing-md: 1rem;\n --spacing-lg: 1.5rem;\n --spacing-xl: 2rem;\n --spacing-2xl: 3rem;\n\n /* Border radius */\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n\n /* Transitions */\n --transition-fast: 150ms ease;\n --transition-normal: 200ms ease;\n --transition-slow: 300ms ease;\n}\n\n/* Base styles */\nhtml {\n color-scheme: dark;\n}\n\nbody {\n @apply bg-neutral-bg1 text-text-primary font-sans antialiased;\n min-height: 100vh;\n}\n\n/* Focus styles */\n*:focus-visible {\n @apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;\n}\n\n/* Scrollbar styling */\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-track {\n @apply bg-neutral-bg2;\n}\n\n::-webkit-scrollbar-thumb {\n @apply bg-neutral-bg5 rounded-full;\n}\n\n::-webkit-scrollbar-thumb:hover {\n @apply bg-neutral-bg6;\n}\n\n/* Glass utility classes */\n@layer components {\n .glass {\n @apply backdrop-blur-md bg-white/5 border border-white/10;\n }\n\n .glass-card {\n @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl;\n }\n\n .glass-panel {\n @apply backdrop-blur-lg bg-black/40 border border-white/5;\n }\n\n .glass-overlay {\n @apply backdrop-blur-sm bg-black/60;\n }\n\n .glass-input {\n @apply backdrop-blur-sm bg-white/5 border border-white/10 focus:border-brand focus:bg-white/10;\n }\n}\n\n/* Animation utilities */\n@layer utilities {\n .animate-in {\n animation: fadeIn 0.3s ease-out, slideUp 0.3s ease-out;\n }\n}\n```\n\n### src/main.tsx\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\nimport './styles/globals.css';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n \n \n);\n```\n\n### src/App.tsx\n\n```tsx\nimport { Routes, Route } from 'react-router-dom';\nimport { AnimatePresence } from 'framer-motion';\nimport { AppShell } from './components/layout/AppShell';\nimport { Dashboard } from './pages/Dashboard';\nimport { Settings } from './pages/Settings';\n\nexport default function App() {\n return (\n \n \n \n } />\n } />\n \n \n \n );\n}\n```\n\n## Animation Patterns\n\n### Framer Motion Variants\n\n```tsx\n// Fade in on mount\nexport const fadeIn = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.2 },\n};\n\n// Slide up on mount\nexport const slideUp = {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 20 },\n transition: { duration: 0.3, ease: 'easeOut' },\n};\n\n// Scale on hover (for buttons/cards)\nexport const scaleOnHover = {\n whileHover: { scale: 1.02 },\n whileTap: { scale: 0.98 },\n transition: { type: 'spring', stiffness: 400, damping: 17 },\n};\n\n// Stagger children\nexport const staggerContainer = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: {\n staggerChildren: 0.05,\n delayChildren: 0.1,\n },\n },\n};\n\nexport const staggerItem = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: { duration: 0.2, ease: 'easeOut' },\n },\n};\n```\n\n### Page Transition Wrapper\n\n```tsx\nimport { motion } from 'framer-motion';\nimport { ReactNode } from 'react';\n\ninterface PageTransitionProps {\n children: ReactNode;\n}\n\nexport function PageTransition({ children }: PageTransitionProps) {\n return (\n \n {children}\n \n );\n}\n```\n\n## Glass Effect Patterns\n\n### Glass Card\n\n```tsx\n

Card Title

Card content goes here.

\n```\n\n### Glass Panel (Sidebar)\n\n```tsx\n\n```\n\n### Glass Modal Overlay\n\n```tsx\n\n \n {/* Modal content */}\n \n\n```\n\n## Typography\n\n| Element | Classes |\n|---------|---------|\n| Page title | `text-2xl font-semibold text-text-primary` |\n| Section title | `text-lg font-semibold text-text-primary` |\n| Card title | `text-base font-medium text-text-primary` |\n| Body text | `text-sm text-text-secondary` |\n| Caption | `text-xs text-text-muted` |\n| Label | `text-sm font-medium text-text-secondary` |\n\n## Color Usage\n\n| Use Case | Color | Class |\n|----------|-------|-------|\n| Primary action | Brand purple | `bg-brand text-white` |\n| Primary hover | Brand hover | `hover:bg-brand-hover` |\n| Page background | Neutral bg1 | `bg-neutral-bg1` |\n| Card background | Neutral bg2 | `bg-neutral-bg2` |\n| Elevated surface | Neutral bg3 | `bg-neutral-bg3` |\n| Input background | Neutral bg2 | `bg-neutral-bg2` |\n| Input focus | Neutral bg3 | `focus:bg-neutral-bg3` |\n| Border default | Border default | `border-border` |\n| Border subtle | Border subtle | `border-border-subtle` |\n| Success | Status success | `text-status-success` |\n| Warning | Status warning | `text-status-warning` |\n| Error | Status error | `text-status-error` |\n\n## Related Files\n\n- Design Tokens — Complete color system, spacing, typography scales\n- Components — Button, Card, Input, Dialog, Tabs, and more\n- Patterns — Page layouts, navigation, lists, forms\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.", "applicable_domains": [ "frontend" ], "category": "frontend", "invocation": [ "/frontend-ui-dark-ts" ], "authored_by": "claudeskills.in community", "source_url": "https://claudeskills.in/skill/frontend-ui-dark-ts", "provenance": { "source": "claudeskills.in", "source_url": "https://claudeskills.in/skill/frontend-ui-dark-ts", "license": "unknown", "imported_at": "2026-09-03", "notes": "Aggregated by claudeskills.in from community GitHub lists." }, "tags": [ "claudeskills", "frontend" ], "lifecycle": "draft" }