[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J6NNXSS250DKBFJD39GTF3":3,"skill-same:01M6J6NNXSS250DKBFJD39GTF3":113},{"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":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M6J6NNXSS250DKBFJD39GTF3","frontend-dev-guidelines",null,"Frontend development guidelines for React\u002FTypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.","ldanh270\u002Fcreate-skills-kit","ldanh270","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F117491247?v=4","01M6J6JM6HXDA2QYTMNGQC3QBV","Lê Đức Anh","01M6J6JMAM2DEECQ418M736HRV",0,"MIT","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\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],"frontend","frontend dev","guidelines","dev","frontend dev guidelines","features","loading","organization","tanstack router","frontend development","styling","router","typescript best practices","data","code","react","components","performance","typescript","directory","2026-11-10 10:12:30",false,"---\nname: frontend-dev-guidelines\ndescription: Frontend development guidelines for React\u002FTypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.\n---\n\n# Frontend Development Guidelines\n\n## Purpose\n\nComprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.\n\n## When to Use This Skill\n\n- Creating new components or pages\n- Building new features\n- Fetching data with TanStack Query\n- Setting up routing with TanStack Router\n- Styling components with MUI v7\n- Performance optimization\n- Organizing frontend code\n- TypeScript best practices\n\n---\n\n## Quick Start\n\n### New Component Checklist\n\nCreating a component? Follow this checklist:\n\n- [ ] Use `React.FC\u003CProps>` pattern with TypeScript\n- [ ] Lazy load if heavy component: `React.lazy(() => import())`\n- [ ] Wrap in `\u003CSuspenseLoader>` for loading states\n- [ ] Use `useSuspenseQuery` for data fetching\n- [ ] Import aliases: `@\u002F`, `~types`, `~components`, `~features`\n- [ ] Styles: Inline if \u003C100 lines, separate file if >100 lines\n- [ ] Use `useCallback` for event handlers passed to children\n- [ ] Default export at bottom\n- [ ] No early returns with loading spinners\n- [ ] Use `useMuiSnackbar` for user notifications\n\n### New Feature Checklist\n\nCreating a feature? Set up this structure:\n\n- [ ] Create `features\u002F{feature-name}\u002F` directory\n- [ ] Create subdirectories: `api\u002F`, `components\u002F`, `hooks\u002F`, `helpers\u002F`, `types\u002F`\n- [ ] Create API service file: `api\u002F{feature}Api.ts`\n- [ ] Set up TypeScript types in `types\u002F`\n- [ ] Create route in `routes\u002F{feature-name}\u002Findex.tsx`\n- [ ] Lazy load feature components\n- [ ] Use Suspense boundaries\n- [ ] Export public API from feature `index.ts`\n\n---\n\n## Import Aliases Quick Reference\n\n| Alias | Resolves To | Example |\n|-------|-------------|---------|\n| `@\u002F` | `src\u002F` | `import { apiClient } from '@\u002Flib\u002FapiClient'` |\n| `~types` | `src\u002Ftypes` | `import type { User } from '~types\u002Fuser'` |\n| `~components` | `src\u002Fcomponents` | `import { SuspenseLoader } from '~components\u002FSuspenseLoader'` |\n| `~features` | `src\u002Ffeatures` | `import { authApi } from '~features\u002Fauth'` |\n\nDefined in: [vite.config.ts](..\u002F..\u002Fvite.config.ts) lines 180-185\n\n---\n\n## Common Imports Cheatsheet\n\n```typescript\n\u002F\u002F React & Lazy Loading\nimport React, { useState, useCallback, useMemo } from 'react';\nconst Heavy = React.lazy(() => import('.\u002FHeavy'));\n\n\u002F\u002F MUI Components\nimport { Box, Paper, Typography, Button, Grid } from '@mui\u002Fmaterial';\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\n\u002F\u002F TanStack Query (Suspense)\nimport { useSuspenseQuery, useQueryClient } from '@tanstack\u002Freact-query';\n\n\u002F\u002F TanStack Router\nimport { createFileRoute } from '@tanstack\u002Freact-router';\n\n\u002F\u002F Project Components\nimport { SuspenseLoader } from '~components\u002FSuspenseLoader';\n\n\u002F\u002F Hooks\nimport { useAuth } from '@\u002Fhooks\u002FuseAuth';\nimport { useMuiSnackbar } from '@\u002Fhooks\u002FuseMuiSnackbar';\n\n\u002F\u002F Types\nimport type { Post } from '~types\u002Fpost';\n```\n\n---\n\n## Topic Guides\n\n### ? Component Patterns\n\n**Modern React components use:**\n- `React.FC\u003CProps>` for type safety\n- `React.lazy()` for code splitting\n- `SuspenseLoader` for loading states\n- Named const + default export pattern\n\n**Key Concepts:**\n- Lazy load heavy components (DataGrid, charts, editors)\n- Always wrap lazy components in Suspense\n- Use SuspenseLoader component (with fade animation)\n- Component structure: Props → Hooks → Handlers → Render → Export\n\n**[? Complete Guide: resources\u002Fcomponent-patterns.md](resources\u002Fcomponent-patterns.md)**\n\n---\n\n### ? Data Fetching\n\n**PRIMARY PATTERN: useSuspenseQuery**\n- Use with Suspense boundaries\n- Cache-first strategy (check grid cache before API)\n- Replaces `isLoading` checks\n- Type-safe with generics\n\n**API Service Layer:**\n- Create `features\u002F{feature}\u002Fapi\u002F{feature}Api.ts`\n- Use `apiClient` axios instance\n- Centralized methods per feature\n- Route format: `\u002Fform\u002Froute` (NOT `\u002Fapi\u002Fform\u002Froute`)\n\n**[? Complete Guide: resources\u002Fdata-fetching.md](resources\u002Fdata-fetching.md)**\n\n---\n\n### ? File Organization\n\n**features\u002F vs components\u002F:**\n- `features\u002F`: Domain-specific (posts, comments, auth)\n- `components\u002F`: Truly reusable (SuspenseLoader, CustomAppBar)\n\n**Feature Subdirectories:**\n```\nfeatures\u002F\n  my-feature\u002F\n    api\u002F          # API service layer\n    components\u002F   # Feature components\n    hooks\u002F        # Custom hooks\n    helpers\u002F      # Utility functions\n    types\u002F        # TypeScript types\n```\n\n**[? Complete Guide: resources\u002Ffile-organization.md](resources\u002Ffile-organization.md)**\n\n---\n\n### ? Styling\n\n**Inline vs Separate:**\n- \u003C100 lines: Inline `const styles: Record\u003Cstring, SxProps\u003CTheme>>`\n- >100 lines: Separate `.styles.ts` file\n\n**Primary Method:**\n- Use `sx` prop for MUI components\n- Type-safe with `SxProps\u003CTheme>`\n- Theme access: `(theme) => theme.palette.primary.main`\n\n**MUI v7 Grid:**\n```typescript\n\u003CGrid size={{ xs: 12, md: 6 }}>  \u002F\u002F ✅ v7 syntax\n\u003CGrid xs={12} md={6}>             \u002F\u002F ❌ Old syntax\n```\n\n**[? Complete Guide: resources\u002Fstyling-guide.md](resources\u002Fstyling-guide.md)**\n\n---\n\n### ?️ Routing\n\n**TanStack Router - Folder-Based:**\n- Directory: `routes\u002Fmy-route\u002Findex.tsx`\n- Lazy load components\n- Use `createFileRoute`\n- Breadcrumb data in loader\n\n**Example:**\n```typescript\nimport { createFileRoute } from '@tanstack\u002Freact-router';\nimport { lazy } from 'react';\n\nconst MyPage = lazy(() => import('@\u002Ffeatures\u002Fmy-feature\u002Fcomponents\u002FMyPage'));\n\nexport const Route = createFileRoute('\u002Fmy-route\u002F')({\n    component: MyPage,\n    loader: () => ({ crumb: 'My Route' }),\n});\n```\n\n**[? Complete Guide: resources\u002Frouting-guide.md](resources\u002Frouting-guide.md)**\n\n---\n\n### ⏳ Loading & Error States\n\n**CRITICAL RULE: No Early Returns**\n\n```typescript\n\u002F\u002F ❌ NEVER - Causes layout shift\nif (isLoading) {\n    return \u003CLoadingSpinner \u002F>;\n}\n\n\u002F\u002F ✅ ALWAYS - Consistent layout\n\u003CSuspenseLoader>\n    \u003CContent \u002F>\n\u003C\u002FSuspenseLoader>\n```\n\n**Why:** Prevents Cumulative Layout Shift (CLS), better UX\n\n**Error Handling:**\n- Use `useMuiSnackbar` for user feedback\n- NEVER `react-toastify`\n- TanStack Query `onError` callbacks\n\n**[? Complete Guide: resources\u002Floading-and-error-states.md](resources\u002Floading-and-error-states.md)**\n\n---\n\n### ⚡ Performance\n\n**Optimization Patterns:**\n- `useMemo`: Expensive computations (filter, sort, map)\n- `useCallback`: Event handlers passed to children\n- `React.memo`: Expensive components\n- Debounced search (300-500ms)\n- Memory leak prevention (cleanup in useEffect)\n\n**[? Complete Guide: resources\u002Fperformance.md](resources\u002Fperformance.md)**\n\n---\n\n### ? TypeScript\n\n**Standards:**\n- Strict mode, no `any` type\n- Explicit return types on functions\n- Type imports: `import type { User } from '~types\u002Fuser'`\n- Component prop interfaces with JSDoc\n\n**[? Complete Guide: resources\u002Ftypescript-standards.md](resources\u002Ftypescript-standards.md)**\n\n---\n\n### ? Common Patterns\n\n**Covered Topics:**\n- React Hook Form with Zod validation\n- DataGrid wrapper contracts\n- Dialog component standards\n- `useAuth` hook for current user\n- Mutation patterns with cache invalidation\n\n**[? Complete Guide: resources\u002Fcommon-patterns.md](resources\u002Fcommon-patterns.md)**\n\n---\n\n### ? Complete Examples\n\n**Full working examples:**\n- Modern component with all patterns\n- Complete feature structure\n- API service layer\n- Route with lazy loading\n- Suspense + useSuspenseQuery\n- Form with validation\n\n**[? Complete Guide: resources\u002Fcomplete-examples.md](resources\u002Fcomplete-examples.md)**\n\n---\n\n## Navigation Guide\n\n| Need to... | Read this resource |\n|------------|-------------------|\n| Create a component | [component-patterns.md](resources\u002Fcomponent-patterns.md) |\n| Fetch data | [data-fetching.md](resources\u002Fdata-fetching.md) |\n| Organize files\u002Ffolders | [file-organization.md](resources\u002Ffile-organization.md) |\n| Style components | [styling-guide.md](resources\u002Fstyling-guide.md) |\n| Set up routing | [routing-guide.md](resources\u002Frouting-guide.md) |\n| Handle loading\u002Ferrors | [loading-and-error-states.md](resources\u002Floading-and-error-states.md) |\n| Optimize performance | [performance.md](resources\u002Fperformance.md) |\n| TypeScript types | [typescript-standards.md](resources\u002Ftypescript-standards.md) |\n| Forms\u002FAuth\u002FDataGrid | [common-patterns.md](resources\u002Fcommon-patterns.md) |\n| See full examples | [complete-examples.md](resources\u002Fcomplete-examples.md) |\n\n---\n\n## Core Principles\n\n1. **Lazy Load Everything Heavy**: Routes, DataGrid, charts, editors\n2. **Suspense for Loading**: Use SuspenseLoader, not early returns\n3. **useSuspenseQuery**: Primary data fetching pattern for new code\n4. **Features are Organized**: api\u002F, components\u002F, hooks\u002F, helpers\u002F subdirs\n5. **Styles Based on Size**: \u003C100 inline, >100 separate\n6. **Import Aliases**: Use @\u002F, ~types, ~components, ~features\n7. **No Early Returns**: Prevents layout shift\n8. **useMuiSnackbar**: For all user notifications\n\n---\n\n## Quick Reference: File Structure\n\n```\nsrc\u002F\n  features\u002F\n    my-feature\u002F\n      api\u002F\n        myFeatureApi.ts       # API service\n      components\u002F\n        MyFeature.tsx         # Main component\n        SubComponent.tsx      # Related components\n      hooks\u002F\n        useMyFeature.ts       # Custom hooks\n        useSuspenseMyFeature.ts  # Suspense hooks\n      helpers\u002F\n        myFeatureHelpers.ts   # Utilities\n      types\u002F\n        index.ts              # TypeScript types\n      index.ts                # Public exports\n\n  components\u002F\n    SuspenseLoader\u002F\n      SuspenseLoader.tsx      # Reusable loader\n    CustomAppBar\u002F\n      CustomAppBar.tsx        # Reusable app bar\n\n  routes\u002F\n    my-route\u002F\n      index.tsx               # Route component\n      create\u002F\n        index.tsx             # Nested route\n```\n\n---\n\n## Modern Component Template (Quick Copy)\n\n```typescript\nimport React, { useState, useCallback } from 'react';\nimport { Box, Paper } from '@mui\u002Fmaterial';\nimport { useSuspenseQuery } from '@tanstack\u002Freact-query';\nimport { featureApi } from '..\u002Fapi\u002FfeatureApi';\nimport type { FeatureData } from '~types\u002Ffeature';\n\ninterface MyComponentProps {\n    id: number;\n    onAction?: () => void;\n}\n\nexport const MyComponent: React.FC\u003CMyComponentProps> = ({ id, onAction }) => {\n    const [state, setState] = useState\u003Cstring>('');\n\n    const { data } = useSuspenseQuery({\n        queryKey: ['feature', id],\n        queryFn: () => featureApi.getFeature(id),\n    });\n\n    const handleAction = useCallback(() => {\n        setState('updated');\n        onAction?.();\n    }, [onAction]);\n\n    return (\n        \u003CBox sx={{ p: 2 }}>\n            \u003CPaper sx={{ p: 3 }}>\n                {\u002F* Content *\u002F}\n            \u003C\u002FPaper>\n        \u003C\u002FBox>\n    );\n};\n\nexport default MyComponent;\n```\n\nFor complete examples, see [resources\u002Fcomplete-examples.md](resources\u002Fcomplete-examples.md)\n\n---\n\n## Related Skills\n\n- **error-tracking**: Error tracking with Sentry (applies to frontend too)\n- **backend-dev-guidelines**: Backend API patterns that frontend consumes\n\n---\n\n**Skill Status**: Modular structure with progressive loading for optimal context management","# Frontend Development Guidelines\n\n## Purpose\n\nComprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.\n\n## When to Use This Skill\n\n- Creating new components or pages\n- Building new features\n- Fetching data with TanStack Query\n- Setting up routing with TanStack Router\n- Styling components with MUI v7\n- Performance optimization\n- Organizing frontend code\n- TypeScript best practices\n\n---\n\n## Quick Start\n\n### New Component Checklist\n\nCreating a component? Follow this checklist:\n\n- [ ] Use `React.FC\u003CProps>` pattern with TypeScript\n- [ ] Lazy load if heavy component: `React.lazy(() => import())`\n- [ ] Wrap in `\u003CSuspenseLoader>` for loading states\n- [ ] Use `useSuspenseQuery` for data fetching\n- [ ] Import aliases: `@\u002F`, `~types`, `~components`, `~features`\n- [ ] Styles: Inline if \u003C100 lines, separate file if >100 lines\n- [ ] Use `useCallback` for event handlers passed to children\n- [ ] Default export at bottom\n- [ ] No early returns with loading spinners\n- [ ] Use `useMuiSnackbar` for user notifications\n\n### New Feature Checklist\n\nCreating a feature? Set up this structure:\n\n- [ ] Create `features\u002F{feature-name}\u002F` directory\n- [ ] Create subdirectories: `api\u002F`, `components\u002F`, `hooks\u002F`, `helpers\u002F`, `types\u002F`\n- [ ] Create API service file: `api\u002F{feature}Api.ts`\n- [ ] Set up TypeScript types in `types\u002F`\n- [ ] Create route in `routes\u002F{feature-name}\u002Findex.tsx`\n- [ ] Lazy load feature components\n- [ ] Use Suspense boundaries\n- [ ] Export public API from feature `index.ts`\n\n---\n\n## Import Aliases Quick Reference\n\n| Alias | Resolves To | Example |\n|-------|-------------|---------|\n| `@\u002F` | `src\u002F` | `import { apiClient } from '@\u002Flib\u002FapiClient'` |\n| `~types` | `src\u002Ftypes` | `import type { User } from '~types\u002Fuser'` |\n| `~components` | `src\u002Fcomponents` | `import { SuspenseLoader } from '~components\u002FSuspenseLoader'` |\n| `~features` | `src\u002Ffeatures` | `import { authApi } from '~features\u002Fauth'` |\n\nDefined in: [vite.config.ts](..\u002F..\u002Fvite.config.ts) lines 180-185\n\n---\n\n## Common Imports Cheatsheet\n\n```typescript\n\u002F\u002F React & Lazy Loading\nimport React, { useState, useCallback, useMemo } from 'react';\nconst Heavy = React.lazy(() => import('.\u002FHeavy'));\n\n\u002F\u002F MUI Components\nimport { Box, Paper, Typography, Button, Grid } from '@mui\u002Fmaterial';\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\n\u002F\u002F TanStack Query (Suspense)\nimport { useSuspenseQuery, useQueryClient } from '@tanstack\u002Freact-query';\n\n\u002F\u002F TanStack Router\nimport { createFileRoute } from '@tanstack\u002Freact-router';\n\n\u002F\u002F Project Components\nimport { SuspenseLoader } from '~components\u002FSuspenseLoader';\n\n\u002F\u002F Hooks\nimport { useAuth } from '@\u002Fhooks\u002FuseAuth';\nimport { useMuiSnackbar } from '@\u002Fhooks\u002FuseMuiSnackbar';\n\n\u002F\u002F Types\nimport type { Post } from '~types\u002Fpost';\n```\n\n---\n\n## Topic Guides\n\n### ? Component Patterns\n\n**Modern React components use:**\n- `React.FC\u003CProps>` for type safety\n- `React.lazy()` for code splitting\n- `SuspenseLoader` for loading states\n- Named const + default export pattern\n\n**Key Concepts:**\n- Lazy load heavy components (DataGrid, charts, editors)\n- Always wrap lazy components in Suspense\n- Use SuspenseLoader component (with fade animation)\n- Component structure: Props → Hooks → Handlers → Render → Export\n\n**[? Complete Guide: resources\u002Fcomponent-patterns.md](resources\u002Fcomponent-patterns.md)**\n\n---\n\n### ? Data Fetching\n\n**PRIMARY PATTERN: useSuspenseQuery**\n- Use with Suspense boundaries\n- Cache-first strategy (check grid cache before API)\n- Replaces `isLoading` checks\n- Type-safe with generics\n\n**API Service Layer:**\n- Create `features\u002F{feature}\u002Fapi\u002F{feature}Api.ts`\n- Use `apiClient` axios instance\n- Centralized methods per feature\n- Route format: `\u002Fform\u002Froute` (NOT `\u002Fapi\u002Fform\u002Froute`)\n\n**[? Complete Guide: resources\u002Fdata-fetching.md](resources\u002Fdata-fetching.md)**\n\n---\n\n### ? File Organization\n\n**features\u002F vs components\u002F:**\n- `features\u002F`: Domain-specific (posts, comments, auth)\n- `components\u002F`: Truly reusable (SuspenseLoader, CustomAppBar)\n\n**Feature Subdirectories:**\n```\nfeatures\u002F\n  my-feature\u002F\n    api\u002F          # API service layer\n    components\u002F   # Feature components\n    hooks\u002F        # Custom hooks\n    helpers\u002F      # Utility functions\n    types\u002F        # TypeScript types\n```\n\n**[? Complete Guide: resources\u002Ffile-organization.md](resources\u002Ffile-organization.md)**\n\n---\n\n### ? Styling\n\n**Inline vs Separate:**\n- \u003C100 lines: Inline `const styles: Record\u003Cstring, SxProps\u003CTheme>>`\n- >100 lines: Separate `.styles.ts` file\n\n**Primary Method:**\n- Use `sx` prop for MUI components\n- Type-safe with `SxProps\u003CTheme>`\n- Theme access: `(theme) => theme.palette.primary.main`\n\n**MUI v7 Grid:**\n```typescript\n\u003CGrid size={{ xs: 12, md: 6 }}>  \u002F\u002F ✅ v7 syntax\n\u003CGrid xs={12} md={6}>             \u002F\u002F ❌ Old syntax\n```\n\n**[? Complete Guide: resources\u002Fstyling-guide.md](resources\u002Fstyling-guide.md)**\n\n---\n\n### ?️ Routing\n\n**TanStack Router - Folder-Based:**\n- Directory: `routes\u002Fmy-route\u002Findex.tsx`\n- Lazy load components\n- Use `createFileRoute`\n- Breadcrumb data in loader\n\n**Example:**\n```typescript\nimport { createFileRoute } from '@tanstack\u002Freact-router';\nimport { lazy } from 'react';\n\nconst MyPage = lazy(() => import('@\u002Ffeatures\u002Fmy-feature\u002Fcomponents\u002FMyPage'));\n\nexport const Route = createFileRoute('\u002Fmy-route\u002F')({\n    component: MyPage,\n    loader: () => ({ crumb: 'My Route' }),\n});\n```\n\n**[? Complete Guide: resources\u002Frouting-guide.md](resources\u002Frouting-guide.md)**\n\n---\n\n### ⏳ Loading & Error States\n\n**CRITICAL RULE: No Early Returns**\n\n```typescript\n\u002F\u002F ❌ NEVER - Causes layout shift\nif (isLoading) {\n    return \u003CLoadingSpinner \u002F>;\n}\n\n\u002F\u002F ✅ ALWAYS - Consistent layout\n\u003CSuspenseLoader>\n    \u003CContent \u002F>\n\u003C\u002FSuspenseLoader>\n```\n\n**Why:** Prevents Cumulative Layout Shift (CLS), better UX\n\n**Error Handling:**\n- Use `useMuiSnackbar` for user feedback\n- NEVER `react-toastify`\n- TanStack Query `onError` callbacks\n\n**[? Complete Guide: resources\u002Floading-and-error-states.md](resources\u002Floading-and-error-states.md)**\n\n---\n\n### ⚡ Performance\n\n**Optimization Patterns:**\n- `useMemo`: Expensive computations (filter, sort, map)\n- `useCallback`: Event handlers passed to children\n- `React.memo`: Expensive components\n- Debounced search (300-500ms)\n- Memory leak prevention (cleanup in useEffect)\n\n**[? Complete Guide: resources\u002Fperformance.md](resources\u002Fperformance.md)**\n\n---\n\n### ? TypeScript\n\n**Standards:**\n- Strict mode, no `any` type\n- Explicit return types on functions\n- Type imports: `import type { User } from '~types\u002Fuser'`\n- Component prop interfaces with JSDoc\n\n**[? Complete Guide: resources\u002Ftypescript-standards.md](resources\u002Ftypescript-standards.md)**\n\n---\n\n### ? Common Patterns\n\n**Covered Topics:**\n- React Hook Form with Zod validation\n- DataGrid wrapper contracts\n- Dialog component standards\n- `useAuth` hook for current user\n- Mutation patterns with cache invalidation\n\n**[? Complete Guide: resources\u002Fcommon-patterns.md](resources\u002Fcommon-patterns.md)**\n\n---\n\n### ? Complete Examples\n\n**Full working examples:**\n- Modern component with all patterns\n- Complete feature structure\n- API service layer\n- Route with lazy loading\n- Suspense + useSuspenseQuery\n- Form with validation\n\n**[? Complete Guide: resources\u002Fcomplete-examples.md](resources\u002Fcomplete-examples.md)**\n\n---\n\n## Navigation Guide\n\n| Need to... | Read this resource |\n|------------|-------------------|\n| Create a component | [component-patterns.md](resources\u002Fcomponent-patterns.md) |\n| Fetch data | [data-fetching.md](resources\u002Fdata-fetching.md) |\n| Organize files\u002Ffolders | [file-organization.md](resources\u002Ffile-organization.md) |\n| Style components | [styling-guide.md](resources\u002Fstyling-guide.md) |\n| Set up routing | [routing-guide.md](resources\u002Frouting-guide.md) |\n| Handle loading\u002Ferrors | [loading-and-error-states.md](resources\u002Floading-and-error-states.md) |\n| Optimize performance | [performance.md](resources\u002Fperformance.md) |\n| TypeScript types | [typescript-standards.md](resources\u002Ftypescript-standards.md) |\n| Forms\u002FAuth\u002FDataGrid | [common-patterns.md](resources\u002Fcommon-patterns.md) |\n| See full examples | [complete-examples.md](resources\u002Fcomplete-examples.md) |\n\n---\n\n## Core Principles\n\n1. **Lazy Load Everything Heavy**: Routes, DataGrid, charts, editors\n2. **Suspense for Loading**: Use SuspenseLoader, not early returns\n3. **useSuspenseQuery**: Primary data fetching pattern for new code\n4. **Features are Organized**: api\u002F, components\u002F, hooks\u002F, helpers\u002F subdirs\n5. **Styles Based on Size**: \u003C100 inline, >100 separate\n6. **Import Aliases**: Use @\u002F, ~types, ~components, ~features\n7. **No Early Returns**: Prevents layout shift\n8. **useMuiSnackbar**: For all user notifications\n\n---\n\n## Quick Reference: File Structure\n\n```\nsrc\u002F\n  features\u002F\n    my-feature\u002F\n      api\u002F\n        myFeatureApi.ts       # API service\n      components\u002F\n        MyFeature.tsx         # Main component\n        SubComponent.tsx      # Related components\n      hooks\u002F\n        useMyFeature.ts       # Custom hooks\n        useSuspenseMyFeature.ts  # Suspense hooks\n      helpers\u002F\n        myFeatureHelpers.ts   # Utilities\n      types\u002F\n        index.ts              # TypeScript types\n      index.ts                # Public exports\n\n  components\u002F\n    SuspenseLoader\u002F\n      SuspenseLoader.tsx      # Reusable loader\n    CustomAppBar\u002F\n      CustomAppBar.tsx        # Reusable app bar\n\n  routes\u002F\n    my-route\u002F\n      index.tsx               # Route component\n      create\u002F\n        index.tsx             # Nested route\n```\n\n---\n\n## Modern Component Template (Quick Copy)\n\n```typescript\nimport React, { useState, useCallback } from 'react';\nimport { Box, Paper } from '@mui\u002Fmaterial';\nimport { useSuspenseQuery } from '@tanstack\u002Freact-query';\nimport { featureApi } from '..\u002Fapi\u002FfeatureApi';\nimport type { FeatureData } from '~types\u002Ffeature';\n\ninterface MyComponentProps {\n    id: number;\n    onAction?: () => void;\n}\n\nexport const MyComponent: React.FC\u003CMyComponentProps> = ({ id, onAction }) => {\n    const [state, setState] = useState\u003Cstring>('');\n\n    const { data } = useSuspenseQuery({\n        queryKey: ['feature', id],\n        queryFn: () => featureApi.getFeature(id),\n    });\n\n    const handleAction = useCallback(() => {\n        setState('updated');\n        onAction?.();\n    }, [onAction]);\n\n    return (\n        \u003CBox sx={{ p: 2 }}>\n            \u003CPaper sx={{ p: 3 }}>\n                {\u002F* Content *\u002F}\n            \u003C\u002FPaper>\n        \u003C\u002FBox>\n    );\n};\n\nexport default MyComponent;\n```\n\nFor complete examples, see [resources\u002Fcomplete-examples.md](resources\u002Fcomplete-examples.md)\n\n---\n\n## Related Skills\n\n- **error-tracking**: Error tracking with Sentry (applies to frontend too)\n- **backend-dev-guidelines**: Backend API patterns that frontend consumes\n\n---\n\n**Skill Status**: Modular structure with progressive loading for optimal context management",{"name":5,"description":7},"main","b0fa28db5a831028e418b3335a5654dd75fcb95b","source\u002F.agent\u002Fskills\u002Ffrontend-development","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit","https:\u002F\u002Fgithub.com\u002Fldanh270","https:\u002F\u002Fldanh270.vercel.app\u002F","Software engineer with an algorithmic foundation, focused on building scalable, performant, and impactful web applications.","2026-03-26 11:23:48",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add ldanh270\u002Fcreate-skills-kit --skill frontend-dev-guidelines",{"tool":63,"command":64},"bunx","bunx skills add ldanh270\u002Fcreate-skills-kit --skill frontend-dev-guidelines",{"tool":66,"command":67},"pnpm","pnpm dlx skills add ldanh270\u002Fcreate-skills-kit --skill frontend-dev-guidelines","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002FSKILL.md",true,[71,77,81,85,89,93,97,101,105,109],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"resources\u002Fcommon-patterns.md","REFERENCE","参考文档",8369,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fcommon-patterns.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"resources\u002Fcomplete-examples.md",24524,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fcomplete-examples.md",{"path":82,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":83,"sourceHtmlUrl":84},"resources\u002Fcomponent-patterns.md",10804,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fcomponent-patterns.md",{"path":86,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":87,"sourceHtmlUrl":88},"resources\u002Fdata-fetching.md",19817,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fdata-fetching.md",{"path":90,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":91,"sourceHtmlUrl":92},"resources\u002Ffile-organization.md",11871,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Ffile-organization.md",{"path":94,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":95,"sourceHtmlUrl":96},"resources\u002Floading-and-error-states.md",12036,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Floading-and-error-states.md",{"path":98,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":99,"sourceHtmlUrl":100},"resources\u002Fperformance.md",9639,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fperformance.md",{"path":102,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":103,"sourceHtmlUrl":104},"resources\u002Frouting-guide.md",7193,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Frouting-guide.md",{"path":106,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":107,"sourceHtmlUrl":108},"resources\u002Fstyling-guide.md",7905,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Fstyling-guide.md",{"path":110,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":111,"sourceHtmlUrl":112},"resources\u002Ftypescript-standards.md",8439,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ffrontend-development\u002Fresources\u002Ftypescript-standards.md",[114,137,169,193,208,226],{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":44},"01M6J6RSG4FR9B5FG3R8BGM9YH","web-frameworks","Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined\u002Ffilled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[121,122,123,41,40,39,124,125,126,127,128,35,129,130,131,132,133,134,135,136],"web","web frameworks","frameworks","libraries","packages","server","projects","monorepo","up","caching","strategies","shared","app","remote","Server Components","implementing",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":151,"publishedAt":44},"01M6J6RDB5RPFA1C39JC4XHSS7","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fui-styling\u002FSKILL.md",[143,146],{"categoryNo":144,"categoryName":145,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":147,"categoryName":148,"taxonomyType":149,"taxonomyTypeDesc":150},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[152,153,34,154,155,156,40,157,158,159,160,161,162,163,164,165,166,167,168,136],"ui styling","ui","design","css","canvas","create","design systems","shadcn","Tailwind","patterns","forms","across","responsive","themes","utility","tables","mode",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":175,"publishedAt":44},"01M6J6R697SCC1P1AFRZ0KZJ72","threejs","Build immersive 3D web experiences with Three.js - WebGL\u002FWebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR\u002FXR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL\u002FWebGPU applications. Covers OrbitControls, GLTF\u002FFBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[171,176,177,178,179,180,37,181,182,183,184,185,186,187,188,189,30,190,191,192],"webgpu","ssr","shaders","product","library","Animation","3D","node","data viz","physics","animation systems","mapping","processing","rendering","advanced","post-processing","bloom",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":202,"publishedAt":44},"01M6J6R2Z8VBZ6NV4341JZZNQC","template-skill","Replace with description of the skill and when Claude should use it.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ftemplate-skill\u002FSKILL.md",[199],{"categoryNo":200,"categoryName":201,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[203,204,205,206,207],"template skill","template","use","it","with",{"skillNo":209,"name":210,"nameZh":6,"description":211,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":212,"categories":213,"keywords":214,"publishedAt":44},"01M6J6QSDZX70HMYCYEW7A2AHF","shopify","Build Shopify applications, extensions, and themes using GraphQL\u002FREST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product\u002Forder\u002Fcustomer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002FSKILL.md",[],[210,215,216,217,40,218,219,179,153,220,37,221,222,133,223,224,165,188,225,136],"cli","dashboard","customer","authentication","capabilities","flow","api","webhook","apps","checkout","billing",{"skillNo":227,"name":228,"nameZh":6,"description":229,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":230,"categories":231,"keywords":232,"publishedAt":44},"01M6J6QKMCVT5VJE498JZ3WQKZ","sequential-thinking","Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[233,234,235,236,237,238,239,240,205,241,242,243,244,245,246,247,207,248,249,250],"sequential thinking","thinking","tasks","planning","verification","hypothesis","analysis","work","problem-solving","structured","decomposition","driven","scope","problem","multi","course","revision","for"]