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.

Install with Tessl CLI

npx tessl i github:sickn33/antigravity-awesome-skills --skill cc-skill-frontend-patterns
What are skills?

62

1.31x

Does it follow best practices?

Evaluation96%

1.31x

Agent success when using this skill

Validation for skill structure

SKILL.md
Review
Evals

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%

Without context: $0.2448 · 1m 3s · 11 turns · 12 in / 3,624 out tokens

With context: $0.5662 · 1m 50s · 23 turns · 70 in / 6,347 out tokens

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%

Without context: $0.4429 · 1m 58s · 15 turns · 16 in / 8,054 out tokens

With context: $0.5065 · 1m 56s · 17 turns · 322 in / 7,653 out tokens

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%

Without context: $0.9020 · 4m 7s · 22 turns · 70 in / 18,071 out tokens

With context: $0.9228 · 3m 15s · 27 turns · 76 in / 13,424 out tokens

Evaluated
Agent
Claude Code
Model
Unknown

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.