react-component-generator

React Component Generator - Auto-activating skill for Frontend Development. Triggers on: react component generator, react component generator Part of the Frontend Development skill category.

1.04x

Quality

Does it follow best practices?

Impact

100%

1.04x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/react-component-generator/SKILL.md

Evaluation results

100%

Data Table Component for Analytics Dashboard

Production-ready component with step-by-step guidance

Criteria

Without context

With context

Step-by-step guide present

100%

Guide explains each major part

100%

No placeholder text

100%

Complete imports

100%

TypeScript types file

100%

Props typed with TypeScript

100%

Sorting logic implemented

100%

Loading state rendered

100%

Functional component with hooks

100%

Immediate usability

100%

Without context: $0.3962 · 1m 51s · 20 turns · 21 in / 6,065 out tokens

With context: $0.4478 · 1m 42s · 25 turns · 25 in / 5,986 out tokens

100%

10%

Notification Dropdown for a SaaS Application

Accessible React component generation

Criteria

Without context

With context

ARIA expanded attribute

100%

ARIA controls or haspopup

100%

Dropdown role

100%

Escape key closes dropdown

100%

Focus management

100%

Button element for toggle

100%

Unread count announced

100%

No placeholder/incomplete code

100%

TypeScript props typed

100%

Functional component with hooks

100%

Click outside closes dropdown

100%

Without context: $0.2748 · 1m 3s · 19 turns · 19 in / 3,725 out tokens

With context: $0.4178 · 1m 36s · 25 turns · 106 in / 5,135 out tokens

100%

Product Search Filter Panel for E-Commerce Platform

Performance-optimized component with modern React patterns

Criteria

Without context

With context

Custom hook present

100%

State in custom hook

100%

Memoized callbacks

100%

Memoized child components or values

100%

Apply button triggers callback

100%

Functional components with hooks

100%

TypeScript types file

100%

Props typed (no any)

100%

No placeholder/incomplete code

100%

Production-ready imports

100%

Filter options rendered dynamically

100%

Without context: $0.3017 · 1m 28s · 15 turns · 64 in / 5,570 out tokens

With context: $1.3786 · 5m 3s · 56 turns · 86 in / 18,187 out tokens

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: 994edc4

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

Table of Contents

Data Table Component for Analytics Dashboard Notification Dropdown for a SaaS Application Product Search Filter Panel for E-Commerce Platform

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.