[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6RTXRA4C4CFDJZP319TN1KP":3,"skill-same:01M6RTXRA4C4CFDJZP319TN1KP":78},{"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":30,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":13,"repositoryHtmlUrl":61,"repositoryHomepageUrl":6,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M6RTXRA4C4CFDJZP319TN1KP","data-scraper-agent",null,"Build a fully automated AI-powered data collection agent for any public source — job boards, prices, news, GitHub, sports, anything. Scrapes on a schedule, enriches data with a free LLM (Gemini Flash), stores results in Notion\u002FSheets\u002FSupabase, and learns from user feedback. Runs 100% free on GitHub Actions. Use when the user wants to monitor, collect, or track any public data automatically.","sakamoto-family-smile\u002Fagent_monorepo","sakamoto-family-smile","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F132812403?v=4","01M6RTAT3H8PMWX5SJ65KP3VYF","01M6RTAV321WB5RAHCWTZMX5CV",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fecc\u002Fdata-scraper-agent\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],"data","scraper","data scraper agent","community","when","track","sports","source","prices","data collection","free","gemini","schedule","flash","feedback","collection","github actions","actions","supabase","notion","2026-11-10 10:12:30",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 with a refined dark aesthetic.\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](.\u002Freferences\u002Fdesign-tokens.md) — Complete color system, spacing, typography scales\n- [Components](.\u002Freferences\u002Fcomponents.md) — Button, Card, Input, Dialog, Tabs, and more\n- [Patterns](.\u002Freferences\u002Fpatterns.md) — Page layouts, navigation, lists, forms\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](.\u002Freferences\u002Fdesign-tokens.md) — Complete color system, spacing, typography scales\n- [Components](.\u002Freferences\u002Fcomponents.md) — Button, Card, Input, Dialog, Tabs, and more\n- [Patterns](.\u002Freferences\u002Fpatterns.md) — Page layouts, navigation, lists, forms\n",{"name":56,"description":57},"frontend-ui-dark-ts","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 with a refined dark aesthetic.","main","fbf4d3f6fb9300cbe74e1bea7d4e177911f3499b",".claude\u002Fskills\u002Fecc\u002Fdata-scraper-agent","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile","2026-11-08 20:29:14",{"source":8,"skillName":56,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add sakamoto-family-smile\u002Fagent_monorepo --skill frontend-ui-dark-ts",{"tool":70,"command":71},"bunx","bunx skills add sakamoto-family-smile\u002Fagent_monorepo --skill frontend-ui-dark-ts",{"tool":73,"command":74},"pnpm","pnpm dlx skills add sakamoto-family-smile\u002Fagent_monorepo --skill frontend-ui-dark-ts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fecc\u002Fdata-scraper-agent\u002FSKILL.md",true,[],[79,112,120,138,159,187],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":91,"publishedAt":51},"01M6RW50THEFSKK42YNR8XFZA1","remotion-video-creation","Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more.","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fecc\u002Fremotion-video-creation\u002FSKILL.md",[85,88],{"categoryNo":86,"categoryName":87,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":89,"categoryName":90,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111],"Video","remotion video","remotion video creation","creation","Remotion","Charts","Captions","Audio","3D","Composition","Animation","best practices","more","animations","domain-specific","domain","three","Rules","Lottie","for",{"skillNo":113,"name":114,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":51},"01M6VCJ23NPECPSZJKGY691F75","hotcook-recipes","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002Fhotcook-agent\u002Fdata\u002Fskills\u002Fhotcook-recipes\u002FSKILL.md",[],[118,119],"hotcook recipes","recipes",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":132,"publishedAt":51},"01M6VCHHE00X5XHSDRD1KH1BW2","code-helper","Code review and assistance skill","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002Fagent-system-2\u002Fskills\u002Fcode-helper\u002Fskill.md",[126,129],{"categoryNo":127,"categoryName":128,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":130,"categoryName":131,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000030","开发工程师",[133,134,135,136,137],"code helper","helper","code","code review","review",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":148,"publishedAt":51},"01M6VCH3Q31A20H6SQ1H0J7JB2","research-assistant","Web research assistant skill using Brave Search MCP","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002Fagent-system-1\u002Fskills\u002Fresearch-assistant\u002Fskill.md",[144,147],{"categoryNo":145,"categoryName":146,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000021","资料检索与研究",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[149,150,151,152,153,154,155,156,157,158],"research assistant","research","assistant","MCP","web","search","brave search","web research","brave","web research assistant",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":51},"01M6VCGZZGPNVJSCZ1JTMNZAHY","x-api","X\u002FTwitter API integration for posting tweets, threads, reading timelines, search, and analytics. Covers OAuth auth patterns, rate limits, and platform-native content posting. Use when the user wants to interact with X programmatically.","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fecc\u002Fx-api\u002FSKILL.md",[165,168],{"categoryNo":166,"categoryName":167,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":130,"categoryName":131,"taxonomyType":28,"taxonomyTypeDesc":29},[170,171,172,35,173,174,111,175,176,177,178,179,180,181,182,183,184,185,154,186],"x api","api","with","limits","rate","threads","reading","native","posting","platform","patterns","api integration","twitter","use","auth","analytics","OAuth",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":194,"publishedAt":51},"01M6VCGVX6DGB1FKTA53QBBCQB","workspace-surface-audit","Audit the active repo, MCP servers, plugins, connectors, env surfaces, and harness setup, then recommend the highest-value ECC-native skills, hooks, agents, and operator workflows. Use when the user wants help setting up Claude Code or understanding what capabilities are actually available in their environment.","https:\u002F\u002Fgithub.com\u002Fsakamoto-family-smile\u002Fagent_monorepo\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fecc\u002Fworkspace-surface-audit\u002FSKILL.md",[193],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[195,196,197,198,152,199,200,135,201,202,203,204,183,205,206,207,208,177,209,35],"workspace surface audit","workspace","audit","hooks","workflows","connectors","capabilities","harness","repo","environment","up","harness setup","active","env","value"]