frontend-patterns

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

Quality

45%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./docs/zh-TW/skills/frontend-patterns/SKILL.md

Evaluation results

90%

47%

High-Performance Asset Explorer

Virtual list and memoization

Criteria

Without context

With context

Uses @tanstack/react-virtual

100%

estimateSize: () => 100

overscan: 5

100%

Absolute position + translateY

100%

useMemo for sort

100%

useCallback stabilization

100%

React.memo on row

100%

getScrollElement ref

100%

Total size wrapper

60%

100%

Product Listing Submission Form

Controlled form with validation and Error Boundary

Criteria

Without context

With context

Separate validate function

90%

100%

FormErrors state

100%

200-char name limit

41%

100%

e.preventDefault in submit

100%

Early return on invalid

100%

ErrorBoundary class component

100%

getDerivedStateFromError

100%

componentDidCatch

100%

Retry resets hasError

100%

Boundary wraps form

100%

84%

28%

Accessible Settings Panel with Animated Transitions

Compound component accessibility and animation

Criteria

Without context

With context

Compound Tabs with Context

100%

Context guard throws

100%

framer-motion used

100%

AnimatePresence wrapper

100%

List item enter values

List item exit values

Modal overlay animation

100%

Modal content animation

50%

100%

Keyboard navigation keys

100%

ARIA combobox attributes

50%

100%

Modal ARIA attributes

62%

100%

Modal focus save/restore

100%

Modal Escape key

100%

Repository: haniakrim21/everything-claude-code
Commit: ae2cadd

Evaluated: 18 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

High-Performance Asset Explorer Product Listing Submission Form Accessible Settings Panel with Animated Transitions

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.