[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D9GFDGPRVT8EW5TQ2SBH83":3,"skill-same:01M6D9GFDGPRVT8EW5TQ2SBH83":100},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":55,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6D9GFDGPRVT8EW5TQ2SBH83","senior-frontend",null,"Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.","oabdelmaksoud\u002FAgention","oabdelmaksoud","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50699149?v=4","01M6D5CVVN778ZCDP1WHS816SP","Omar Abdelmaksoud","01M6D8A4TE76V3DCSH3D94VG1V",2,"MIT","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"senior frontend","frontend","analyzing","scaffolding","next","frontend development","use","projects","Next.js","Tailwind","applications","code","development","code quality","react components","react","components","performance","typescript","css","2026-11-10 10:12:30",false,"---\nname: senior-frontend\ndescription: Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.\n---\n\n# Senior Frontend\n\nFrontend development patterns, performance optimization, and automation tools for React\u002FNext.js applications.\n\n## Table of Contents\n\n- [Project Scaffolding](#project-scaffolding)\n- [Component Generation](#component-generation)\n- [Bundle Analysis](#bundle-analysis)\n- [React Patterns](#react-patterns)\n- [Next.js Optimization](#nextjs-optimization)\n- [Accessibility and Testing](#accessibility-and-testing)\n\n---\n\n## Project Scaffolding\n\nGenerate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.\n\n### Workflow: Create New Frontend Project\n\n1. Run the scaffolder with your project name and template:\n   ```bash\n   python scripts\u002Ffrontend_scaffolder.py my-app --template nextjs\n   ```\n\n2. Add optional features (auth, api, forms, testing, storybook):\n   ```bash\n   python scripts\u002Ffrontend_scaffolder.py dashboard --template nextjs --features auth,api\n   ```\n\n3. Navigate to the project and install dependencies:\n   ```bash\n   cd my-app && npm install\n   ```\n\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n### Scaffolder Options\n\n| Option | Description |\n|--------|-------------|\n| `--template nextjs` | Next.js 14+ with App Router and Server Components |\n| `--template react` | React + Vite with TypeScript |\n| `--features auth` | Add NextAuth.js authentication |\n| `--features api` | Add React Query + API client |\n| `--features forms` | Add React Hook Form + Zod validation |\n| `--features testing` | Add Vitest + Testing Library |\n| `--dry-run` | Preview files without creating them |\n\n### Generated Structure (Next.js)\n\n```\nmy-app\u002F\n├── app\u002F\n│   ├── layout.tsx        # Root layout with fonts\n│   ├── page.tsx          # Home page\n│   ├── globals.css       # Tailwind + CSS variables\n│   └── api\u002Fhealth\u002Froute.ts\n├── components\u002F\n│   ├── ui\u002F               # Button, Input, Card\n│   └── layout\u002F           # Header, Footer, Sidebar\n├── hooks\u002F                # useDebounce, useLocalStorage\n├── lib\u002F                  # utils (cn), constants\n├── types\u002F                # TypeScript interfaces\n├── tailwind.config.ts\n├── next.config.js\n└── package.json\n```\n\n---\n\n## Component Generation\n\nGenerate React components with TypeScript, tests, and Storybook stories.\n\n### Workflow: Create a New Component\n\n1. Generate a client component:\n   ```bash\n   python scripts\u002Fcomponent_generator.py Button --dir src\u002Fcomponents\u002Fui\n   ```\n\n2. Generate a server component:\n   ```bash\n   python scripts\u002Fcomponent_generator.py ProductCard --type server\n   ```\n\n3. Generate with test and story files:\n   ```bash\n   python scripts\u002Fcomponent_generator.py UserProfile --with-test --with-story\n   ```\n\n4. Generate a custom hook:\n   ```bash\n   python scripts\u002Fcomponent_generator.py FormValidation --type hook\n   ```\n\n### Generator Options\n\n| Option | Description |\n|--------|-------------|\n| `--type client` | Client component with 'use client' (default) |\n| `--type server` | Async server component |\n| `--type hook` | Custom React hook |\n| `--with-test` | Include test file |\n| `--with-story` | Include Storybook story |\n| `--flat` | Create in output dir without subdirectory |\n| `--dry-run` | Preview without creating files |\n\n### Generated Component Example\n\n```tsx\n'use client';\n\nimport { useState } from 'react';\nimport { cn } from '@\u002Flib\u002Futils';\n\ninterface ButtonProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function Button({ className, children }: ButtonProps) {\n  return (\n    \u003Cdiv className={cn('', className)}>\n      {children}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Bundle Analysis\n\nAnalyze package.json and project structure for bundle optimization opportunities.\n\n### Workflow: Optimize Bundle Size\n\n1. Run the analyzer on your project:\n   ```bash\n   python scripts\u002Fbundle_analyzer.py \u002Fpath\u002Fto\u002Fproject\n   ```\n\n2. Review the health score and issues:\n   ```\n   Bundle Health Score: 75\u002F100 (C)\n\n   HEAVY DEPENDENCIES:\n     moment (290KB)\n       Alternative: date-fns (12KB) or dayjs (2KB)\n\n     lodash (71KB)\n       Alternative: lodash-es with tree-shaking\n   ```\n\n3. Apply the recommended fixes by replacing heavy dependencies.\n\n4. Re-run with verbose mode to check import patterns:\n   ```bash\n   python scripts\u002Fbundle_analyzer.py . --verbose\n   ```\n\n### Bundle Score Interpretation\n\n| Score | Grade | Action |\n|-------|-------|--------|\n| 90-100 | A | Bundle is well-optimized |\n| 80-89 | B | Minor optimizations available |\n| 70-79 | C | Replace heavy dependencies |\n| 60-69 | D | Multiple issues need attention |\n| 0-59 | F | Critical bundle size problems |\n\n### Heavy Dependencies Detected\n\nThe analyzer identifies these common heavy packages:\n\n| Package | Size | Alternative |\n|---------|------|-------------|\n| moment | 290KB | date-fns (12KB) or dayjs (2KB) |\n| lodash | 71KB | lodash-es with tree-shaking |\n| axios | 14KB | Native fetch or ky (3KB) |\n| jquery | 87KB | Native DOM APIs |\n| @mui\u002Fmaterial | Large | shadcn\u002Fui or Radix UI |\n\n---\n\n## React Patterns\n\nReference: `references\u002Freact_patterns.md`\n\n### Compound Components\n\nShare state between related components:\n\n```tsx\nconst Tabs = ({ children }) => {\n  const [active, setActive] = useState(0);\n  return (\n    \u003CTabsContext.Provider value={{ active, setActive }}>\n      {children}\n    \u003C\u002FTabsContext.Provider>\n  );\n};\n\nTabs.List = TabList;\nTabs.Panel = TabPanel;\n\n\u002F\u002F Usage\n\u003CTabs>\n  \u003CTabs.List>\n    \u003CTabs.Tab>One\u003C\u002FTabs.Tab>\n    \u003CTabs.Tab>Two\u003C\u002FTabs.Tab>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Panel>Content 1\u003C\u002FTabs.Panel>\n  \u003CTabs.Panel>Content 2\u003C\u002FTabs.Panel>\n\u003C\u002FTabs>\n```\n\n### Custom Hooks\n\nExtract reusable logic:\n\n```tsx\nfunction useDebounce\u003CT>(value: T, delay = 500): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\n\u002F\u002F Usage\nconst debouncedSearch = useDebounce(searchTerm, 300);\n```\n\n### Render Props\n\nShare rendering logic:\n\n```tsx\nfunction DataFetcher({ url, render }) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));\n  }, [url]);\n\n  return render({ data, loading });\n}\n\n\u002F\u002F Usage\n\u003CDataFetcher\n  url=\"\u002Fapi\u002Fusers\"\n  render={({ data, loading }) =>\n    loading ? \u003CSpinner \u002F> : \u003CUserList users={data} \u002F>\n  }\n\u002F>\n```\n\n---\n\n## Next.js Optimization\n\nReference: `references\u002Fnextjs_optimization_guide.md`\n\n### Server vs Client Components\n\nUse Server Components by default. Add 'use client' only when you need:\n- Event handlers (onClick, onChange)\n- State (useState, useReducer)\n- Effects (useEffect)\n- Browser APIs\n\n```tsx\n\u002F\u002F Server Component (default) - no 'use client'\nasync function ProductPage({ params }) {\n  const product = await getProduct(params.id);  \u002F\u002F Server-side fetch\n\n  return (\n    \u003Cdiv>\n      \u003Ch1>{product.name}\u003C\u002Fh1>\n      \u003CAddToCartButton productId={product.id} \u002F>  {\u002F* Client component *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F Client Component\n'use client';\nfunction AddToCartButton({ productId }) {\n  const [adding, setAdding] = useState(false);\n  return \u003Cbutton onClick={() => addToCart(productId)}>Add\u003C\u002Fbutton>;\n}\n```\n\n### Image Optimization\n\n```tsx\nimport Image from 'next\u002Fimage';\n\n\u002F\u002F Above the fold - load immediately\n\u003CImage\n  src=\"\u002Fhero.jpg\"\n  alt=\"Hero\"\n  width={1200}\n  height={600}\n  priority\n\u002F>\n\n\u002F\u002F Responsive image with fill\n\u003Cdiv className=\"relative aspect-video\">\n  \u003CImage\n    src=\"\u002Fproduct.jpg\"\n    alt=\"Product\"\n    fill\n    sizes=\"(max-width: 768px) 100vw, 50vw\"\n    className=\"object-cover\"\n  \u002F>\n\u003C\u002Fdiv>\n```\n\n### Data Fetching Patterns\n\n```tsx\n\u002F\u002F Parallel fetching\nasync function Dashboard() {\n  const [user, stats] = await Promise.all([\n    getUser(),\n    getStats()\n  ]);\n  return \u003Cdiv>...\u003C\u002Fdiv>;\n}\n\n\u002F\u002F Streaming with Suspense\nasync function ProductPage({ params }) {\n  return (\n    \u003Cdiv>\n      \u003CProductDetails id={params.id} \u002F>\n      \u003CSuspense fallback={\u003CReviewsSkeleton \u002F>}>\n        \u003CReviews productId={params.id} \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Accessibility and Testing\n\nReference: `references\u002Ffrontend_best_practices.md`\n\n### Accessibility Checklist\n\n1. **Semantic HTML**: Use proper elements (`\u003Cbutton>`, `\u003Cnav>`, `\u003Cmain>`)\n2. **Keyboard Navigation**: All interactive elements focusable\n3. **ARIA Labels**: Provide labels for icons and complex widgets\n4. **Color Contrast**: Minimum 4.5:1 for normal text\n5. **Focus Indicators**: Visible focus states\n\n```tsx\n\u002F\u002F Accessible button\n\u003Cbutton\n  type=\"button\"\n  aria-label=\"Close dialog\"\n  onClick={onClose}\n  className=\"focus-visible:ring-2 focus-visible:ring-blue-500\"\n>\n  \u003CXIcon aria-hidden=\"true\" \u002F>\n\u003C\u002Fbutton>\n\n\u002F\u002F Skip link for keyboard users\n\u003Ca href=\"#main-content\" className=\"sr-only focus:not-sr-only\">\n  Skip to main content\n\u003C\u002Fa>\n```\n\n### Testing Strategy\n\n```tsx\n\u002F\u002F Component test with React Testing Library\nimport { render, screen } from '@testing-library\u002Freact';\nimport userEvent from '@testing-library\u002Fuser-event';\n\ntest('button triggers action on click', async () => {\n  const onClick = vi.fn();\n  render(\u003CButton onClick={onClick}>Click me\u003C\u002FButton>);\n\n  await userEvent.click(screen.getByRole('button'));\n  expect(onClick).toHaveBeenCalledTimes(1);\n});\n\n\u002F\u002F Test accessibility\ntest('dialog is accessible', async () => {\n  render(\u003CDialog open={true} title=\"Confirm\" \u002F>);\n\n  expect(screen.getByRole('dialog')).toBeInTheDocument();\n  expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');\n});\n```\n\n---\n\n## Quick Reference\n\n### Common Next.js Config\n\n```js\n\u002F\u002F next.config.js\nconst nextConfig = {\n  images: {\n    remotePatterns: [{ hostname: 'cdn.example.com' }],\n    formats: ['image\u002Favif', 'image\u002Fwebp'],\n  },\n  experimental: {\n    optimizePackageImports: ['lucide-react', '@heroicons\u002Freact'],\n  },\n};\n```\n\n### Tailwind CSS Utilities\n\n```tsx\n\u002F\u002F Conditional classes with cn()\nimport { cn } from '@\u002Flib\u002Futils';\n\n\u003Cbutton className={cn(\n  'px-4 py-2 rounded',\n  variant === 'primary' && 'bg-blue-500 text-white',\n  disabled && 'opacity-50 cursor-not-allowed'\n)} \u002F>\n```\n\n### TypeScript Patterns\n\n```tsx\n\u002F\u002F Props with children\ninterface CardProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\n\u002F\u002F Generic component\ninterface ListProps\u003CT> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n  return \u003Cul>{items.map(renderItem)}\u003C\u002Ful>;\n}\n```\n\n---\n\n## Resources\n\n- React Patterns: `references\u002Freact_patterns.md`\n- Next.js Optimization: `references\u002Fnextjs_optimization_guide.md`\n- Best Practices: `references\u002Ffrontend_best_practices.md`\n","# Senior Frontend\n\nFrontend development patterns, performance optimization, and automation tools for React\u002FNext.js applications.\n\n## Table of Contents\n\n- [Project Scaffolding](#project-scaffolding)\n- [Component Generation](#component-generation)\n- [Bundle Analysis](#bundle-analysis)\n- [React Patterns](#react-patterns)\n- [Next.js Optimization](#nextjs-optimization)\n- [Accessibility and Testing](#accessibility-and-testing)\n\n---\n\n## Project Scaffolding\n\nGenerate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.\n\n### Workflow: Create New Frontend Project\n\n1. Run the scaffolder with your project name and template:\n   ```bash\n   python scripts\u002Ffrontend_scaffolder.py my-app --template nextjs\n   ```\n\n2. Add optional features (auth, api, forms, testing, storybook):\n   ```bash\n   python scripts\u002Ffrontend_scaffolder.py dashboard --template nextjs --features auth,api\n   ```\n\n3. Navigate to the project and install dependencies:\n   ```bash\n   cd my-app && npm install\n   ```\n\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n### Scaffolder Options\n\n| Option | Description |\n|--------|-------------|\n| `--template nextjs` | Next.js 14+ with App Router and Server Components |\n| `--template react` | React + Vite with TypeScript |\n| `--features auth` | Add NextAuth.js authentication |\n| `--features api` | Add React Query + API client |\n| `--features forms` | Add React Hook Form + Zod validation |\n| `--features testing` | Add Vitest + Testing Library |\n| `--dry-run` | Preview files without creating them |\n\n### Generated Structure (Next.js)\n\n```\nmy-app\u002F\n├── app\u002F\n│   ├── layout.tsx        # Root layout with fonts\n│   ├── page.tsx          # Home page\n│   ├── globals.css       # Tailwind + CSS variables\n│   └── api\u002Fhealth\u002Froute.ts\n├── components\u002F\n│   ├── ui\u002F               # Button, Input, Card\n│   └── layout\u002F           # Header, Footer, Sidebar\n├── hooks\u002F                # useDebounce, useLocalStorage\n├── lib\u002F                  # utils (cn), constants\n├── types\u002F                # TypeScript interfaces\n├── tailwind.config.ts\n├── next.config.js\n└── package.json\n```\n\n---\n\n## Component Generation\n\nGenerate React components with TypeScript, tests, and Storybook stories.\n\n### Workflow: Create a New Component\n\n1. Generate a client component:\n   ```bash\n   python scripts\u002Fcomponent_generator.py Button --dir src\u002Fcomponents\u002Fui\n   ```\n\n2. Generate a server component:\n   ```bash\n   python scripts\u002Fcomponent_generator.py ProductCard --type server\n   ```\n\n3. Generate with test and story files:\n   ```bash\n   python scripts\u002Fcomponent_generator.py UserProfile --with-test --with-story\n   ```\n\n4. Generate a custom hook:\n   ```bash\n   python scripts\u002Fcomponent_generator.py FormValidation --type hook\n   ```\n\n### Generator Options\n\n| Option | Description |\n|--------|-------------|\n| `--type client` | Client component with 'use client' (default) |\n| `--type server` | Async server component |\n| `--type hook` | Custom React hook |\n| `--with-test` | Include test file |\n| `--with-story` | Include Storybook story |\n| `--flat` | Create in output dir without subdirectory |\n| `--dry-run` | Preview without creating files |\n\n### Generated Component Example\n\n```tsx\n'use client';\n\nimport { useState } from 'react';\nimport { cn } from '@\u002Flib\u002Futils';\n\ninterface ButtonProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function Button({ className, children }: ButtonProps) {\n  return (\n    \u003Cdiv className={cn('', className)}>\n      {children}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Bundle Analysis\n\nAnalyze package.json and project structure for bundle optimization opportunities.\n\n### Workflow: Optimize Bundle Size\n\n1. Run the analyzer on your project:\n   ```bash\n   python scripts\u002Fbundle_analyzer.py \u002Fpath\u002Fto\u002Fproject\n   ```\n\n2. Review the health score and issues:\n   ```\n   Bundle Health Score: 75\u002F100 (C)\n\n   HEAVY DEPENDENCIES:\n     moment (290KB)\n       Alternative: date-fns (12KB) or dayjs (2KB)\n\n     lodash (71KB)\n       Alternative: lodash-es with tree-shaking\n   ```\n\n3. Apply the recommended fixes by replacing heavy dependencies.\n\n4. Re-run with verbose mode to check import patterns:\n   ```bash\n   python scripts\u002Fbundle_analyzer.py . --verbose\n   ```\n\n### Bundle Score Interpretation\n\n| Score | Grade | Action |\n|-------|-------|--------|\n| 90-100 | A | Bundle is well-optimized |\n| 80-89 | B | Minor optimizations available |\n| 70-79 | C | Replace heavy dependencies |\n| 60-69 | D | Multiple issues need attention |\n| 0-59 | F | Critical bundle size problems |\n\n### Heavy Dependencies Detected\n\nThe analyzer identifies these common heavy packages:\n\n| Package | Size | Alternative |\n|---------|------|-------------|\n| moment | 290KB | date-fns (12KB) or dayjs (2KB) |\n| lodash | 71KB | lodash-es with tree-shaking |\n| axios | 14KB | Native fetch or ky (3KB) |\n| jquery | 87KB | Native DOM APIs |\n| @mui\u002Fmaterial | Large | shadcn\u002Fui or Radix UI |\n\n---\n\n## React Patterns\n\nReference: `references\u002Freact_patterns.md`\n\n### Compound Components\n\nShare state between related components:\n\n```tsx\nconst Tabs = ({ children }) => {\n  const [active, setActive] = useState(0);\n  return (\n    \u003CTabsContext.Provider value={{ active, setActive }}>\n      {children}\n    \u003C\u002FTabsContext.Provider>\n  );\n};\n\nTabs.List = TabList;\nTabs.Panel = TabPanel;\n\n\u002F\u002F Usage\n\u003CTabs>\n  \u003CTabs.List>\n    \u003CTabs.Tab>One\u003C\u002FTabs.Tab>\n    \u003CTabs.Tab>Two\u003C\u002FTabs.Tab>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Panel>Content 1\u003C\u002FTabs.Panel>\n  \u003CTabs.Panel>Content 2\u003C\u002FTabs.Panel>\n\u003C\u002FTabs>\n```\n\n### Custom Hooks\n\nExtract reusable logic:\n\n```tsx\nfunction useDebounce\u003CT>(value: T, delay = 500): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\n\u002F\u002F Usage\nconst debouncedSearch = useDebounce(searchTerm, 300);\n```\n\n### Render Props\n\nShare rendering logic:\n\n```tsx\nfunction DataFetcher({ url, render }) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));\n  }, [url]);\n\n  return render({ data, loading });\n}\n\n\u002F\u002F Usage\n\u003CDataFetcher\n  url=\"\u002Fapi\u002Fusers\"\n  render={({ data, loading }) =>\n    loading ? \u003CSpinner \u002F> : \u003CUserList users={data} \u002F>\n  }\n\u002F>\n```\n\n---\n\n## Next.js Optimization\n\nReference: `references\u002Fnextjs_optimization_guide.md`\n\n### Server vs Client Components\n\nUse Server Components by default. Add 'use client' only when you need:\n- Event handlers (onClick, onChange)\n- State (useState, useReducer)\n- Effects (useEffect)\n- Browser APIs\n\n```tsx\n\u002F\u002F Server Component (default) - no 'use client'\nasync function ProductPage({ params }) {\n  const product = await getProduct(params.id);  \u002F\u002F Server-side fetch\n\n  return (\n    \u003Cdiv>\n      \u003Ch1>{product.name}\u003C\u002Fh1>\n      \u003CAddToCartButton productId={product.id} \u002F>  {\u002F* Client component *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F Client Component\n'use client';\nfunction AddToCartButton({ productId }) {\n  const [adding, setAdding] = useState(false);\n  return \u003Cbutton onClick={() => addToCart(productId)}>Add\u003C\u002Fbutton>;\n}\n```\n\n### Image Optimization\n\n```tsx\nimport Image from 'next\u002Fimage';\n\n\u002F\u002F Above the fold - load immediately\n\u003CImage\n  src=\"\u002Fhero.jpg\"\n  alt=\"Hero\"\n  width={1200}\n  height={600}\n  priority\n\u002F>\n\n\u002F\u002F Responsive image with fill\n\u003Cdiv className=\"relative aspect-video\">\n  \u003CImage\n    src=\"\u002Fproduct.jpg\"\n    alt=\"Product\"\n    fill\n    sizes=\"(max-width: 768px) 100vw, 50vw\"\n    className=\"object-cover\"\n  \u002F>\n\u003C\u002Fdiv>\n```\n\n### Data Fetching Patterns\n\n```tsx\n\u002F\u002F Parallel fetching\nasync function Dashboard() {\n  const [user, stats] = await Promise.all([\n    getUser(),\n    getStats()\n  ]);\n  return \u003Cdiv>...\u003C\u002Fdiv>;\n}\n\n\u002F\u002F Streaming with Suspense\nasync function ProductPage({ params }) {\n  return (\n    \u003Cdiv>\n      \u003CProductDetails id={params.id} \u002F>\n      \u003CSuspense fallback={\u003CReviewsSkeleton \u002F>}>\n        \u003CReviews productId={params.id} \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Accessibility and Testing\n\nReference: `references\u002Ffrontend_best_practices.md`\n\n### Accessibility Checklist\n\n1. **Semantic HTML**: Use proper elements (`\u003Cbutton>`, `\u003Cnav>`, `\u003Cmain>`)\n2. **Keyboard Navigation**: All interactive elements focusable\n3. **ARIA Labels**: Provide labels for icons and complex widgets\n4. **Color Contrast**: Minimum 4.5:1 for normal text\n5. **Focus Indicators**: Visible focus states\n\n```tsx\n\u002F\u002F Accessible button\n\u003Cbutton\n  type=\"button\"\n  aria-label=\"Close dialog\"\n  onClick={onClose}\n  className=\"focus-visible:ring-2 focus-visible:ring-blue-500\"\n>\n  \u003CXIcon aria-hidden=\"true\" \u002F>\n\u003C\u002Fbutton>\n\n\u002F\u002F Skip link for keyboard users\n\u003Ca href=\"#main-content\" className=\"sr-only focus:not-sr-only\">\n  Skip to main content\n\u003C\u002Fa>\n```\n\n### Testing Strategy\n\n```tsx\n\u002F\u002F Component test with React Testing Library\nimport { render, screen } from '@testing-library\u002Freact';\nimport userEvent from '@testing-library\u002Fuser-event';\n\ntest('button triggers action on click', async () => {\n  const onClick = vi.fn();\n  render(\u003CButton onClick={onClick}>Click me\u003C\u002FButton>);\n\n  await userEvent.click(screen.getByRole('button'));\n  expect(onClick).toHaveBeenCalledTimes(1);\n});\n\n\u002F\u002F Test accessibility\ntest('dialog is accessible', async () => {\n  render(\u003CDialog open={true} title=\"Confirm\" \u002F>);\n\n  expect(screen.getByRole('dialog')).toBeInTheDocument();\n  expect(screen.getByRole('dialog')).toHaveAttribute('aria-labelledby');\n});\n```\n\n---\n\n## Quick Reference\n\n### Common Next.js Config\n\n```js\n\u002F\u002F next.config.js\nconst nextConfig = {\n  images: {\n    remotePatterns: [{ hostname: 'cdn.example.com' }],\n    formats: ['image\u002Favif', 'image\u002Fwebp'],\n  },\n  experimental: {\n    optimizePackageImports: ['lucide-react', '@heroicons\u002Freact'],\n  },\n};\n```\n\n### Tailwind CSS Utilities\n\n```tsx\n\u002F\u002F Conditional classes with cn()\nimport { cn } from '@\u002Flib\u002Futils';\n\n\u003Cbutton className={cn(\n  'px-4 py-2 rounded',\n  variant === 'primary' && 'bg-blue-500 text-white',\n  disabled && 'opacity-50 cursor-not-allowed'\n)} \u002F>\n```\n\n### TypeScript Patterns\n\n```tsx\n\u002F\u002F Props with children\ninterface CardProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\n\u002F\u002F Generic component\ninterface ListProps\u003CT> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n  return \u003Cul>{items.map(renderItem)}\u003C\u002Ful>;\n}\n```\n\n---\n\n## Resources\n\n- React Patterns: `references\u002Freact_patterns.md`\n- Next.js Optimization: `references\u002Fnextjs_optimization_guide.md`\n- Best Practices: `references\u002Ffrontend_best_practices.md`\n",{"name":5,"description":7},"main","a318f48de3c5718e8ea2e9f6fae7790e8a759e85","upstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend",0,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fo-abdelmaksoud\u002F","Full-Stack Engineer | AI Systems Architect | Building autonomous multi-agent systems","2026-03-08 21:23:03",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add oabdelmaksoud\u002FAgention --skill senior-frontend",{"tool":64,"command":65},"bunx","bunx skills add oabdelmaksoud\u002FAgention --skill senior-frontend",{"tool":67,"command":68},"pnpm","pnpm dlx skills add oabdelmaksoud\u002FAgention --skill senior-frontend","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002FSKILL.md",true,[72,78,82,86,92,96],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Ffrontend_best_practices.md","REFERENCE","参考文档",19783,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Freferences\u002Ffrontend_best_practices.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fnextjs_optimization_guide.md",15123,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Freferences\u002Fnextjs_optimization_guide.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Freact_patterns.md",17341,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Freferences\u002Freact_patterns.md",{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"scripts\u002Fbundle_analyzer.py","SCRIPT","脚本",13339,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Fscripts\u002Fbundle_analyzer.py",{"path":93,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":94,"sourceHtmlUrl":95},"scripts\u002Fcomponent_generator.py",8684,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Fscripts\u002Fcomponent_generator.py",{"path":97,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":98,"sourceHtmlUrl":99},"scripts\u002Ffrontend_scaffolder.py",27981,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-import\u002Fclaude-skills\u002Freferences\u002Fengineering-team\u002Fsenior-frontend\u002Fscripts\u002Ffrontend_scaffolder.py",[101,123,136,167,192,212],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":110,"publishedAt":44},"01M6G2QFCBNBYAJF2KTK85G9A6","visa-doc-translate","Translate visa application documents (images) to English and create a bilingual PDF with original and translation","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fvisa-doc-translate\u002FSKILL.md",[107],{"categoryNo":108,"categoryName":109,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",[111,112,113,114,115,116,117,118,119,120,121,122],"translate","doc","visa doc translate","bilingual","with","english","application","PDF","translation","documents","create","images",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":44},"01M6G2QB09TSK6BY4ME5X20EVQ","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[130,131,132,133,35,134,135],"verification","loop","verification loop","sessions","claude code sessions","system",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":153,"publishedAt":44},"01M6G2Q6V2F7G03VAAF27FXPJR","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[142,145,148],{"categoryNo":143,"categoryName":144,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":149,"categoryName":150,"taxonomyType":151,"taxonomyTypeDesc":152},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[154,155,156,30,157,158,159,160,161,35,36,162,163,164,115,165,166],"workflow","tdd","tdd workflow","unit","coverage","refactoring","e2e","integration","e2e tests","tests","driven","test","writing",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":173,"publishedAt":44},"01M6G2Q359YJRWAR2PFCEQAXF3","swiftui-patterns","SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswiftui-patterns\u002FSKILL.md",[],[174,175,176,177,178,41,179,180,181,182,183,184,185,186,187,188,189,190,191,115],"patterns","swiftui","swiftui patterns","architecture","macos","state management","best practices","state","ui","Optimization","ios","architecture patterns","Composition","performance optimization","view","management","swiftui architecture","navigation",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":199,"publishedAt":44},"01M6G2PY8B2FWZTWPZ84H83Y7C","swift-protocol-di-testing","Protocol-based dependency injection for testable Swift code — mock file system, network, and external APIs using focused protocols and Swift Testing.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-protocol-di-testing\u002FSKILL.md",[198],{"categoryNo":143,"categoryName":144,"taxonomyType":21,"taxonomyTypeDesc":22},[200,201,202,203,35,204,205,206,207,135,208,209,210,211],"swift protocol di testing","protocol","swift","testing","protocols","file","network","injection","dependency","swift testing","dependency injection","mock",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":216,"categories":217,"keywords":218,"publishedAt":44},"01M6G2PSCN2GXV9FFZDRRRWVB6","swift-concurrency-6-2","Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FAgention\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-concurrency-6-2\u002FSKILL.md",[],[219,220,221,202,222,49,223],"concurrency","swift concurrency","swift concurrency 6 2","default","types"]