When you ask your agent to turn a rough card into a polished component, the skill determines how much guidance reaches the model. The longest guide is not always the useful one. We measured 11,514 frontend skills, and most show only a short description before loading their full instructions.
What is in the session before you name a component
A skill is a folder of instructions the model opens when it decides it needs them. The context is everything the model can see while it answers you.
Before selection, the context contains only the name and description. That covers 11,218 skills every session; 296 wait until requested. A glob is a filename pattern, like *.tsx. A clear description is what gets a frontend skill opened at the right moment.
When the model invokes a skill, its whole body enters the context. A token is the unit your AI plan bills by, about three quarters of a word. The useful measure is when those instructions arrive.
The original is the first copy of a file we saw; everything matching it afterwards is a copy.
Frontend skill costs before and after loading
A skill that loads every session costs 59 tokens at the median. One in ten costs 140 tokens or more. The largest preload is 1,115 tokens in rankup, roughly a short page of text in front of you.
Open 20 sessions and the 59-token median becomes 1,180 across the day. An on-demand skill costs 1,436 tokens at the median when loaded. Across these entries, the median full body is 1,607 tokens.
What the security scan found in frontend skills
The scan gave 11,239 skills grade A, 111 grade B, and 164 grade C or D. None received grade E or F. It recorded 573 network-call findings, 73 recursive force deletes, 51 hidden-instruction findings, and 24 remote-code downloads.
p5js has a low-confidence network-call finding. launch has a recursive force-delete finding. heroui-react has remote-code and network findings.
The scan prints the file line behind each finding. A grade describes what it treated as risky, not whether the mod suits your project.
Six frontend skills worth trying first
Each tail records what arrives before work starts, the file length, and whether other copies exist.
- react-hook-form: rules for building and changing React Hook Form interfaces across a monorepo. 123 tokens every session, 291 lines, original, 0 copies.
- playwright-component-testing: test React or Vue components in isolation through Playwright stories and a gallery page. 69 tokens every session, 137 lines, original, 2 copies.
- reference-signal-forms: explain Angular’s signal-based forms, including validation, disabled states, and nested fields. 43 tokens every session, 105 lines, original, 0 copies.
- design-html: turn an approved design or plan into responsive production HTML and CSS. 21 tokens every session, 903 lines, original, 0 copies.
- p5js: build interactive browser art, animations, visualisations, shaders, and data-driven canvases in p5.js. 20 tokens every session, 559 lines, original, 21 copies.
- frontend-patterns: guide React and Next.js components, state, forms, data loading, accessibility, and performance. 41 tokens every session, 662 lines, original, 5 copies.
When a hook fits frontend work better
A hook is a shell command your agent runs for you when something happens. Use one for a test before a commit or an action after a file change. A skill cannot fire on an event; it supplies guidance selected from a task description. The 296 on-demand skills wait for selection rather than reacting automatically.
Questions people ask
Will these skills work in Cursor? Of these, 187 are written for Cursor and 10,548 for Claude Code. Check the target agent before installing one.
How large should a frontend skill be? The heaviest here preloads 1,115 tokens, against a median of 59. Anything near that end needs a reason to be in every session rather than waiting to be asked for.
How fresh are these numbers? The catalogue is rebuilt from a nightly crawl, so figures can be at most a day old. 3,834 skills changed in the last 7 days, so active projects deserve another check.
Do it now
Run npx agentmods cost to see what your project loads per session, then browse frontend skills.