[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SC38F8NTHZXC546CPMQR3":3,"skill-same:01M71SC38F8NTHZXC546CPMQR3":73},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":13,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":58,"install":59,"resources":72},"01M71SC38F8NTHZXC546CPMQR3","frontend-ui-dark-ts",null,"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...","javiertarazon\u002Fide-agente-free-jt7-","javiertarazon","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153141207?v=4","01M71R52TB3S9HXKH6WSNT8A7V","01M71R52VG5KS2DKDDH4GDQ30A",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Ffrontend-ui-dark-ts\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"frontend ui dark ts","ui","dark","frontend","applications","glassmorphism","animations","rich","dashboards","framer","data","react","framer motion","unknown","when","effects","panels","Tailwind","css","community","2026-11-10 13:02:02",false,"---\nname: frontend-ui-dark-ts\ndescription: \"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...\"\nrisk: unknown\nsource: community\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","# 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",{"name":5,"risk":41,"source":47,"description":7},"release\u002Fv4.2.11-panel-pro","a92ea02bcf7e2b3dbaf46d49696c29a3cb490d4f",".github\u002Fskills\u002Ffrontend-ui-dark-ts","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-","https:\u002F\u002Fgithub.com\u002Fjaviertarazon","2026-07-12 07:10:45",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add javiertarazon\u002Fide-agente-free-jt7- --skill frontend-ui-dark-ts",{"tool":65,"command":66},"bunx","bunx skills add javiertarazon\u002Fide-agente-free-jt7- --skill frontend-ui-dark-ts",{"tool":68,"command":69},"pnpm","pnpm dlx skills add javiertarazon\u002Fide-agente-free-jt7- --skill frontend-ui-dark-ts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Ffrontend-ui-dark-ts\u002FSKILL.md",true,[],[74,98,125,145,160,182],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":81,"publishedAt":48},"01M71TQ7Q6Z10VWF3C2H5X1KW9","zustand-store-ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reacti...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzustand-store-ts\u002FSKILL.md",[80],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[82,83,84,47,85,86,87,88,42,41,39,89,90,91,92,93,94,95,96,97],"zustand","store","zustand store ts","middleware","implementing","use","react state management","with","state","create","state management","typescript","action","management","separation","global",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":107,"publishedAt":48},"01M71TQ5EAR40G6W0MV5ZDVEZT","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoom-automation\u002FSKILL.md",[104],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[108,109,110,47,111,112,113,114,115,41,116,117,118,119,120,121,122,123,95,124],"zoom automation","zoom","automation","creation","for","search","schemas","MCP","first","via","meeting","search tools","tracking","webinars","composio","recordings","Tools",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":48},"01M71TQ29B1EYBCEAP1ZBGXQ1A","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzoho-crm-automation\u002FSKILL.md",[131],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},[133,134,110,135,136,137,47,138,139,112,140,113,114,141,115,41,142,143,144,91],"crm automation","zoho crm automation","crm","zoho crm","zoho","leads","manage leads","manage","records","convert","tasks","contacts",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":152,"publishedAt":48},"01M71TPZPMN60DH0XV58KVHY23","zendesk-automation","Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzendesk-automation\u002FSKILL.md",[151],{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},[153,110,154,47,112,113,114,115,155,41,143,156,157,116,117,158,119,122,124,159],"zendesk automation","zendesk","organizations","replies","users","tickets","automate",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":166,"publishedAt":48},"01M71TPXDWKHKG4N6TVEPXWD0N","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity ...","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fzapier-make-patterns\u002FSKILL.md",[],[167,168,169,170,171,172,173,174,175,110,176,41,177,178,179,180,181,159],"zapier make patterns","zapier","patterns","make","No-Code","complexity","writing","spawner","business","workflow","code","integromat","apache","processes","but",{"skillNo":183,"name":184,"nameZh":6,"description":185,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":186,"categories":187,"keywords":191,"publishedAt":48},"01M71TPT5T10WXNKW9G7ZXZ27W","youtube-summarizer","Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks","https:\u002F\u002Fgithub.com\u002Fjaviertarazon\u002Fide-agente-free-jt7-\u002Fblob\u002Frelease\u002Fv4.2.11-panel-pro\u002F.github\u002Fskills\u002Fyoutube-summarizer\u002FSKILL.md",[188],{"categoryNo":189,"categoryName":190,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[192,193,194,195,47,196,197,198,199,200,201,202,177,203,204,205,206,207,208,209],"summarizer","youtube","youtube summarizer","Video","content-analysis","frameworks","copilot","2025","github-copilot","extract transcripts","analysis","codex","cli","summaries","github","generate","summarization","2026"]