Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices.
SkillScore86Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 17 of 20 test cases with the skill, and 5 of 20 without it.
Without skill27%
With skill86%
Checks it passed that the model alone missed
Identifies references/react_patterns.md
Specifies python scripts/bundle_analyzer.py .
Points to references/frontend_best_practices.md
and 11 more in the full report
13 fixed6 passed either way3 still failing0 broke
Pass-rate lift
+59 pp
Tokens
+47%
Agent turns
0%
Response time
-49%
Model gemini-3.6-flashMeasured 8/3/2026v119 of 22 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 12
Prompt
Under the development workflow for quality checks, which python script invocation is specified to run bundle analysis against the project root?
What was checked, without and with the skill
Checked
Without skill
With skill
Specifies python scripts/bundle_analyzer.py .
Missed
Passed
case-16 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md204 lines7 filesincludes scripts
Senior Frontend
Complete toolkit for senior frontend with modern tools and best practices.
Quick Start
Main Capabilities
This skill provides three core capabilities through automated scripts:
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.