Building complex frontend applications requires deep expertise in React patterns, performance optimization, and state management. This skill provides senior-level guidance for component architecture, bundle optimization, and implementing production-ready UI systems using industry best practices.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「senior-frontend」。 Create a Button component with loading state
預期結果:
- Component structure with proper TypeScript interface
- Loading state handling with spinner integration
- Accessibility attributes (aria-disabled, keyboard navigation)
- Tailwind CSS classes for variants (primary, secondary, outline)
- Export statement and barrel file update recommendation
正在使用「senior-frontend」。 How do I reduce my Next.js bundle size?
預期結果:
- Identify large dependencies using bundle analyzer
- Implement dynamic imports for route-based code splitting
- Configure next/image for automatic image optimization
- Use React.lazy() for component-level lazy loading
- Enable tree shaking by using ES modules
正在使用「senior-frontend」。 What are common React anti-patterns to avoid?
預期結果:
- Prop drilling through many layers - use context instead
- Business logic in components - extract to custom hooks
- Large monolithic components - split by feature
- Missing error boundaries - wrap components with ErrorBoundary
- Direct state mutation - always use setState or state managers
安全審計
低風險This skill consists of 3 Python CLI scripts for frontend development tasks and 3 reference guides. All static findings are FALSE POSITIVES caused by pattern-matching errors. The scanner misidentified markdown code block delimiters as Ruby backtick execution, section numbers as weak crypto algorithms, and standard dev workflow documentation as credential access. No actual code execution, network access, or credential handling exists in this skill.
風險因素
品質評分
你能建構什麼
Component Architecture
Design and scaffold React components with proper TypeScript types, hooks, and folder structure.
Bundle Optimization
Analyze bundle size and identify opportunities to reduce JavaScript payload for better performance.
Code Review Guide
Apply consistent frontend patterns and identify anti-patterns during code reviews.
試試這些提示
Create a React component for [component name] using TypeScript. Include proper props interface, error handling, and follow modern hooks patterns. Use Tailwind CSS for styling.
Analyze the bundle size of my React application and identify large dependencies. Suggest code splitting strategies and lazy loading approaches to reduce initial load time.
Help me implement [specific pattern] for managing global state in React. Compare React Context, Zustand, and Jotai for this use case and explain trade-offs.
Set up Next.js with App Router for my project. Include proper SSR configuration, image optimization, and explain when to use server components versus client components.
最佳實務
- Use TypeScript for all components to catch errors at compile time
- Implement proper error boundaries to prevent app crashes
- Lazy load routes and heavy components to reduce initial bundle size
避免
- Avoid prop drilling through many layers; use context or state management
- Do not put business logic directly in components; extract to custom hooks
- Avoid large monolithic components; split by feature and responsibility