CtrlK
BlogDocsLog inGet started
Tessl Logo

senior-frontend

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

0.98x
Quality

78%

Does it follow best practices?

Impact

81%

0.98x

Average score across 6 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./engineering-team/senior-frontend/SKILL.md
SKILL.md
Quality
Evals
Security

Evaluation results

86%

-12%

Bootstrap a Next.js SaaS Dashboard

Project scaffolding with script

Criteria
Without context
With context

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%

100%

Optimize the Bundle Size of a Legacy Next.js App

Bundle analysis and optimization

Criteria
Without context
With context

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%

60%

-4%

Build a Reusable UI Component Library for a Design System

Component generation and patterns

Criteria
Without context
With context

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%

74%

Inventory Dashboard Performance Overhaul

React performance patterns and anti-patterns

Criteria
Without context
With context

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%

95%

12%

Online Marketplace Product Listing Pages

Next.js image optimization and server/client component strategy

Criteria
Without context
With context

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%

74%

-2%

Recipe Discovery App — Hooks and State Architecture

Custom hooks, context+reducer state management, and error boundaries

Criteria
Without context
With context

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%

Repository
alirezarezvani/claude-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents

Is this your skill?

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.