CtrlK
BlogDocsLog inGet started
Tessl Logo

cc-skill-frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

57

1.31x
Quality

37%

Does it follow best practices?

Impact

96%

1.31x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/cc-skill-frontend-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Evaluation results

88%

26%

High-Performance Asset List Component

List virtualization and memoization

Criteria
Without context
With context

@tanstack/react-virtual import

100%

100%

estimateSize value

0%

0%

overscan value

0%

100%

Absolute positioning strategy

100%

100%

Total size container

100%

100%

getScrollElement ref

100%

100%

React.memo on item component

0%

100%

useMemo for derived data

100%

100%

useCallback for handler props

0%

100%

virtualRow.index used as key

50%

50%

Fixed container height

100%

100%

100%

9%

Accessible Filter Panel with Custom Dropdown

Keyboard navigation and ARIA accessibility

Criteria
Without context
With context

ArrowDown handler

100%

100%

ArrowUp handler

100%

100%

Enter key handler

100%

100%

Escape key handler

100%

100%

role=combobox

100%

100%

aria-expanded attribute

100%

100%

aria-haspopup=listbox

100%

100%

Modal role=dialog

100%

100%

Modal aria-modal

100%

100%

Modal tabIndex=-1

0%

100%

Modal focus save

70%

100%

Modal focus restore

100%

100%

Modal Escape close

100%

100%

100%

34%

Searchable Watchlist Manager

Context + Reducer state management

Criteria
Without context
With context

Typed Action union

100%

100%

useReducer + Context

100%

100%

Custom hook error throw

100%

100%

Debounce via setTimeout

100%

100%

AnimatePresence usage

0%

100%

motion component animation

0%

100%

List exit animation y direction

0%

100%

transition duration

0%

100%

ErrorBoundary class component

100%

100%

ErrorBoundary reset button

100%

100%

componentDidCatch logging

0%

100%

ErrorBoundary wraps content

100%

100%

Controlled form validation

100%

100%

Repository
sickn33/antigravity-awesome-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.