Build complete React features with proper layered architecture including UI components, business logic, API integration, and state management.
SkillScore64Maintained
Automatic
◆Frontend / UI pack
Last verified 8/24/2026
What it changes
Passed 14 of 22 test cases with the skill, and 10 of 22 without it.
Without skill45%
With skill64%
Checks it passed that the model alone missed
Uses Zustand for notification global state management
Uses a Zustand store for shopping cart state management
Uses TanStack React Query mutations for server API calls
and 3 more in the full report
4 fixed10 passed either way8 still failing0 broke
Pass-rate lift
+18 pp
Tokens
+104%
Agent turns
0%
Response time
+4%
Model gemini-3.6-flashMeasured 8/24/2026v114 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
We want to build a real-time notification bell feature in React where notifications stream in. Redux Toolkit or standard React Context API is usually recommended for this, but show us the production feature architecture and implementation. Include setup, structure, state, and testing.
What was checked, without and with the skill
Checked
Without skill
With skill
Uses Zustand for notification global state management
Missed
Passed
Uses TanStack React Query for notification server mutations and queries
Missed
Passed
case-07 · gemini-3.6-flash · 8/24/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md546 lines4 files
Feature Builder
This skill builds complete, production-ready React features with proper separation of concerns across presentation, business logic, and data access layers.
Purpose
Transform feature requirements into complete, working implementations that include:
UI Components - Using react-component-generator
Business Logic - Hooks, stores, validation, transformations
API Integration - Data fetching, mutations, caching
State Management - Zustand for global state, React Query for server state
Error Handling - Comprehensive error management
Type Safety - Full TypeScript support
When to Use This Skill
Use this skill when:
User requests a complete feature (not just a UI component)
Request involves business logic and data management
User mentions: "implement", "build", "create feature"