[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-31f58a9c-984d-4d77-87a2-9547dc92c544":3,"$fJ3DB1_bjRsEh6IqUc-qZ1PssI212xuzR_h92anfhne0":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"31f58a9c-984d-4d77-87a2-9547dc92c544","frontend-ui-dark-ts","一个使用Tailwind CSS和Framer Motion的现代暗色主题React UI系统。专为仪表盘、管理面板和数据丰富的应用程序设计，具有玻璃质感和精致的动画效果。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: frontend-ui-dark-ts\ndescription: \"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.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# 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\u002F\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\u002F\n├── assets\u002F\n│   └── fonts\u002F\n│       ├── Segoe UI.ttf\n│       ├── Segoe UI Bold.ttf\n│       ├── Segoe UI Italic.ttf\n│       └── Segoe UI Bold Italic.ttf\n├── components\u002F\n│   ├── ui\u002F\n│   │   ├── Button.tsx\n│   │   ├── Card.tsx\n│   │   ├── Input.tsx\n│   │   ├── Badge.tsx\n│   │   ├── Dialog.tsx\n│   │   ├── Tabs.tsx\n│   │   └── index.ts\n│   └── layout\u002F\n│       ├── AppShell.tsx\n│       ├── Sidebar.tsx\n│       └── PageHeader.tsx\n├── styles\u002F\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\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\" \u002F>\n    \n    \u003C!-- Favicons -->\n    \u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico\" sizes=\"32x32\" \u002F>\n    \u003Clink rel=\"icon\" href=\"\u002Ffavicon.svg\" type=\"image\u002Fsvg+xml\" \u002F>\n    \u003Clink rel=\"apple-touch-icon\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n    \u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\" \u002F>\n    \n    \u003C!-- Theme color for mobile browser chrome -->\n    \u003Cmeta name=\"theme-color\" content=\"#18181B\" \u002F>\n    \n    \u003C!-- Open Graph -->\n    \u003Cmeta property=\"og:type\" content=\"website\" \u002F>\n    \u003Cmeta property=\"og:title\" content=\"App Name\" \u002F>\n    \u003Cmeta property=\"og:description\" content=\"App description\" \u002F>\n    \u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fexample.com\u002Fog-image.png\" \u002F>\n    \u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fexample.com\" \u002F>\n    \n    \u003C!-- Twitter Card -->\n    \u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" \u002F>\n    \u003Cmeta name=\"twitter:title\" content=\"App Name\" \u002F>\n    \u003Cmeta name=\"twitter:description\" content=\"App description\" \u002F>\n    \u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fexample.com\u002Fog-image.png\" \u002F>\n    \n    \u003Ctitle>App Name\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n    \u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fmain.tsx\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### public\u002Fsite.webmanifest\n\nPWA manifest for installable web apps:\n\n```json\n{\n  \"name\": \"App Name\",\n  \"short_name\": \"App\",\n  \"icons\": [\n    { \"src\": \"\u002Ffavicon.ico\", \"sizes\": \"32x32\", \"type\": \"image\u002Fx-icon\" },\n    { \"src\": \"\u002Fapple-touch-icon.png\", \"sizes\": \"180x180\", \"type\": \"image\u002Fpng\" }\n  ],\n  \"theme_color\": \"#18181B\",\n  \"background_color\": \"#18181B\",\n  \"display\": \"standalone\"\n}\n```\n\n### tailwind.config.js\n\n```js\n\u002F** @type {import('tailwindcss').Config} *\u002F\nexport default {\n  content: ['.\u002Findex.html', '.\u002Fsrc\u002F**\u002F*.{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      \u002F\u002F 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      \u002F\u002F Mobile: minimum touch target sizes (44px per Apple\u002FGoogle 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\u002Fstyles\u002Fglobals.css\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\u002F* Font faces *\u002F\n@font-face {\n  font-family: 'Segoe UI';\n  src: url('..\u002Fassets\u002Ffonts\u002FSegoe 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('..\u002Fassets\u002Ffonts\u002FSegoe 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('..\u002Fassets\u002Ffonts\u002FSegoe 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('..\u002Fassets\u002Ffonts\u002FSegoe UI Bold Italic.ttf') format('truetype');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n\n\u002F* CSS Custom Properties *\u002F\n:root {\n  \u002F* Brand colors *\u002F\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  \u002F* Neutral backgrounds *\u002F\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  \u002F* Text colors *\u002F\n  --color-text-primary: #FFFFFF;\n  --color-text-secondary: #A1A1AA;\n  --color-text-muted: #71717A;\n\n  \u002F* Border colors *\u002F\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  \u002F* Status colors *\u002F\n  --color-success: #10B981;\n  --color-warning: #F59E0B;\n  --color-error: #EF4444;\n  --color-info: #3B82F6;\n\n  \u002F* Spacing *\u002F\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  \u002F* Border radius *\u002F\n  --radius-sm: 0.375rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 0.75rem;\n  --radius-xl: 1rem;\n\n  \u002F* Transitions *\u002F\n  --transition-fast: 150ms ease;\n  --transition-normal: 200ms ease;\n  --transition-slow: 300ms ease;\n}\n\n\u002F* Base styles *\u002F\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\u002F* Focus styles *\u002F\n*:focus-visible {\n  @apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;\n}\n\n\u002F* Scrollbar styling *\u002F\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\u002F* Glass utility classes *\u002F\n@layer components {\n  .glass {\n    @apply backdrop-blur-md bg-white\u002F5 border border-white\u002F10;\n  }\n\n  .glass-card {\n    @apply backdrop-blur-md bg-white\u002F5 border border-white\u002F10 rounded-xl;\n  }\n\n  .glass-panel {\n    @apply backdrop-blur-lg bg-black\u002F40 border border-white\u002F5;\n  }\n\n  .glass-overlay {\n    @apply backdrop-blur-sm bg-black\u002F60;\n  }\n\n  .glass-input {\n    @apply backdrop-blur-sm bg-white\u002F5 border border-white\u002F10 focus:border-brand focus:bg-white\u002F10;\n  }\n}\n\n\u002F* Animation utilities *\u002F\n@layer utilities {\n  .animate-in {\n    animation: fadeIn 0.3s ease-out, slideUp 0.3s ease-out;\n  }\n}\n```\n\n### src\u002Fmain.tsx\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom\u002Fclient';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from '.\u002FApp';\nimport '.\u002Fstyles\u002Fglobals.css';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003CReact.StrictMode>\n    \u003CBrowserRouter>\n      \u003CApp \u002F>\n    \u003C\u002FBrowserRouter>\n  \u003C\u002FReact.StrictMode>\n);\n```\n\n### src\u002FApp.tsx\n\n```tsx\nimport { Routes, Route } from 'react-router-dom';\nimport { AnimatePresence } from 'framer-motion';\nimport { AppShell } from '.\u002Fcomponents\u002Flayout\u002FAppShell';\nimport { Dashboard } from '.\u002Fpages\u002FDashboard';\nimport { Settings } from '.\u002Fpages\u002FSettings';\n\nexport default function App() {\n  return (\n    \u003CAppShell>\n      \u003CAnimatePresence mode=\"wait\">\n        \u003CRoutes>\n          \u003CRoute path=\"\u002F\" element={\u003CDashboard \u002F>} \u002F>\n          \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n        \u003C\u002FRoutes>\n      \u003C\u002FAnimatePresence>\n    \u003C\u002FAppShell>\n  );\n}\n```\n\n## Animation Patterns\n\n### Framer Motion Variants\n\n```tsx\n\u002F\u002F 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\u002F\u002F 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\u002F\u002F Scale on hover (for buttons\u002Fcards)\nexport const scaleOnHover = {\n  whileHover: { scale: 1.02 },\n  whileTap: { scale: 0.98 },\n  transition: { type: 'spring', stiffness: 400, damping: 17 },\n};\n\n\u002F\u002F 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    \u003Cmotion.div\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      {children}\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n## Glass Effect Patterns\n\n### Glass Card\n\n```tsx\n\u003Cdiv className=\"glass-card p-6\">\n  \u003Ch2 className=\"text-lg font-semibold text-text-primary\">Card Title\u003C\u002Fh2>\n  \u003Cp className=\"text-text-secondary mt-2\">Card content goes here.\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n### Glass Panel (Sidebar)\n\n```tsx\n\u003Caside className=\"glass-panel w-64 h-screen p-4\">\n  \u003Cnav className=\"space-y-2\">\n    {\u002F* Navigation items *\u002F}\n  \u003C\u002Fnav>\n\u003C\u002Faside>\n```\n\n### Glass Modal Overlay\n\n```tsx\n\u003Cmotion.div\n  className=\"fixed inset-0 glass-overlay flex items-center justify-center z-50\"\n  initial={{ opacity: 0 }}\n  animate={{ opacity: 1 }}\n  exit={{ opacity: 0 }}\n>\n  \u003Cmotion.div\n    className=\"glass-card p-6 max-w-md w-full mx-4\"\n    initial={{ scale: 0.95, opacity: 0 }}\n    animate={{ scale: 1, opacity: 1 }}\n    exit={{ scale: 0.95, opacity: 0 }}\n  >\n    {\u002F* Modal content *\u002F}\n  \u003C\u002Fmotion.div>\n\u003C\u002Fmotion.div>\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.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,147,1199,"2026-05-16 13:19:37",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"6376bf44-2d2e-4b4c-810e-570ca97df615","1.0.0","frontend-ui-dark-ts.zip",5043,"uploads\u002Fskills\u002F31f58a9c-984d-4d77-87a2-9547dc92c544\u002Ffrontend-ui-dark-ts.zip","5bf0b58174a5e7c71ceda2de0e039cc25c345b5f6a45d9952052cfb05572440f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":15062}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]