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.
81
78%
Does it follow best practices?
Impact
81%
0.98xAverage score across 6 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./engineering-team/senior-frontend/SKILL.mdProject scaffolding with script
Scaffolder script used
100%
16%
Correct template flag
75%
100%
Features flag used
100%
100%
App Router structure
100%
100%
Health route present
100%
100%
UI component files
100%
100%
Layout component files
100%
100%
Hooks directory
100%
100%
Lib directory with cn
100%
100%
Types directory
100%
100%
next.config.js image formats
100%
100%
next.config.js optimizePackageImports
100%
100%
next/font in layout
100%
60%
Bundle analysis and optimization
Analyzer script used
100%
100%
moment replaced
100%
100%
lodash replaced
100%
100%
axios replaced
100%
100%
MUI replaced
100%
100%
Report identifies heavy deps
100%
100%
Report documents replacements
100%
100%
Verbose import analysis
100%
100%
Tree-shaking imports
100%
100%
package.json updated
100%
100%
Score documented
100%
100%
Component generation and patterns
Generator script used
50%
100%
Button uses CVA
0%
0%
Button has variant prop
100%
50%
Button has size prop
100%
50%
Button uses cn utility
100%
100%
Card compound pattern
80%
100%
client component directive
100%
100%
RegisterForm uses Zod
0%
0%
RegisterForm uses zodResolver
0%
0%
Semantic HTML in form
100%
100%
ARIA attributes on inputs
100%
100%
TypeScript interfaces
100%
100%
cn utility present
100%
50%
React performance patterns and anti-patterns
React.memo with custom comparison
0%
0%
useMemo for data processing
100%
100%
useCallback for event handlers
100%
100%
useVirtualizer used
0%
0%
Virtual list renders only visible items
100%
100%
No index as key
100%
100%
No inline object/array in JSX
25%
25%
No useEffect for derived state
100%
100%
No direct state mutation
100%
100%
TypeScript interfaces for props
100%
100%
Performance report documents changes
100%
100%
Stable unique keys in lists
100%
100%
Next.js image optimization and server/client component strategy
Server components by default
100%
100%
'use client' only when needed
100%
100%
next/image for all images
100%
100%
priority on hero/LCP image
100%
100%
fill and sizes on responsive images
100%
100%
Parallel data fetching
22%
44%
Suspense for streaming
100%
100%
Skeleton placeholder for CLS
100%
100%
Dynamic import with ssr:false
62%
100%
next.config.js image formats
100%
100%
optimizePackageImports configured
0%
100%
Aspect ratio container for images
100%
100%
Custom hooks, context+reducer state management, and error boundaries
useAsync status machine
100%
100%
useAsync returns refetch
75%
75%
useDebounce implemented
100%
100%
useDebounce used for search
100%
100%
Context+Reducer for cart state
100%
100%
useMemo for derived total in provider
22%
0%
No prop drilling
100%
100%
Discriminated union for async state
12%
12%
Class-based ErrorBoundary
100%
100%
ErrorBoundary wraps Suspense
0%
0%
Custom useCart hook
100%
100%
TypeScript generic hooks
100%
100%
967fe01
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.