Radhakishan Jangid

From the reel · Developer toolkit

10 GitHub agent skills every frontend developer should know.

Your AI agent can write a component. These skills help it make better choices about the UI, the code, and everything in between.

By Radhakishan Jangid·

Explore the 10 repositories

Frontend agent skills collection: React Router, Web Quality, MengTo, Garden, PyModel, Addy Osmani, Emil Kowalski, Vercel, Impeccable, and UI UX Pro Max
The complete list from my reel. All links in one place.

Better instructions.
Better starting point.

An agent skill is a set of instructions, often with reference files or scripts, that your coding assistant can load for a specific task. Think of it as a playbook, not a new AI model.

You don't need all ten at once. Pick the collection that matches your next job: designing a page, fixing a slow React screen, checking accessibility, or making an animation feel right.

The shortlist

Find the right skill for the job.

Reel order: 10 → 1
Not a ranking by GitHub stars.

Star counts checked on . They're snapshots, not live counters. Open a star count to see it on GitHub.

remix-run GitHub avatarremix-run / agent-skills
137

#10React & routing Archived

React Router Agent Skills

Routing instructions for agents working with React Router. The original collection covered framework, data, and declarative modes.

When I'd use itUse the current official skill when you need help with routes, loaders, forms, or pending states.

The skill has moved. The original repository is archived. Use the current skill in remix-run/react-router for new projects.

Try this with your agent
Review my route structure and loading states. Follow the official React Router skill and the version installed in this project.

Use after loading the relevant skill. These are example prompts, not installation commands.

addyosmani GitHub avataraddyosmani / web-quality-skills
2,779

#09Performance & accessibility

Web Quality Skills

A measurement-first collection for Lighthouse checks, Core Web Vitals, accessibility, and SEO. It works across frameworks.

When I'd use itStart here when a page looks finished but still feels slow or is hard to use with a keyboard.

Try this with your agent
Audit this page for loading performance, layout shifts, keyboard access, and crawlability. Measure first, then fix the highest-impact issue.

Use after loading the relevant skill. These are example prompts, not installation commands.

MengTo GitHub avatarMengTo / Skills
5,935

#08UI & design

MengTo Skills

Design and build workflows that turn visual references, screen recordings, and existing pages into detailed implementation prompts.

When I'd use itUseful when you have a clear visual reference but your agent keeps missing the layout or interaction details.

Try this with your agent
Study my reference, describe its spacing and interaction patterns, then plan a small implementation that fits my existing site.

Use after loading the relevant skill. These are example prompts, not installation commands.

ConardLi GitHub avatarConardLi / garden-skills
12,352

#07UI & design

ConardLi Garden Skills

A collection covering web design, visual presentations, article layouts, image workflows, and knowledge retrieval.

When I'd use itA good place to explore when your frontend work includes tutorials, presentations, or content-heavy pages.

Try this with your agent
Turn this outline into a readable article layout. Keep the heading hierarchy clear and make the code and links easy to find.

Use after loading the relevant skill. These are example prompts, not installation commands.

PyModel GitHub avatarPyModel / react-frontend-skills
3

#06React & routing

React Frontend Skills

PyModel's collection covers React and Next.js, TypeScript, UI, testing, data handling, and feature-based frontend architecture.

When I'd use itUse it for a React feature that needs more than a component: data validation, loading states, tests, and a clear folder structure.

Try this with your agent
Plan this React feature around my installed package versions. Include data fetching, validation, error states, and tests.

Use after loading the relevant skill. These are example prompts, not installation commands.

addyosmani GitHub avataraddyosmani / agent-skills
93,544

#05Engineering workflow

Addy Osmani Agent Skills

Engineering workflows for defining a task, planning the work, building in small steps, testing, reviewing, and shipping.

When I'd use itUseful when an agent jumps into coding before it understands the problem or skips the checks at the end.

Try this with your agent
Write a short spec and a step-by-step plan for this feature. Build one working slice, test it, and review the diff before continuing.

Use after loading the relevant skill. These are example prompts, not installation commands.

emilkowalski GitHub avataremilkowalski / skills
36,917

#04Animation & interaction

Emil Kowalski Skills

Design-engineering guidance focused on motion and small UI details, including animation reviews and choosing easing and duration.

When I'd use itReach for it when a menu, dialog, button, or page transition feels awkward rather than helpful.

Try this with your agent
Review this dialog's animation. Explain the easing, duration, and properties you would change, and respect reduced-motion settings.

Use after loading the relevant skill. These are example prompts, not installation commands.

vercel-labs GitHub avatarvercel-labs / agent-skills
31,068

#03Performance & accessibility

Vercel Agent Skills

Vercel's collection includes React and Next.js performance practices, web interface guidelines, and other platform-focused skills.

When I'd use itUseful for reviewing data-fetching waterfalls, bundle size, re-renders, and the details that make an interface easier to use.

Try this with your agent
Review this React page for unnecessary re-renders and slow data fetching. Prioritize the biggest bottleneck and explain how to verify the fix.

Use after loading the relevant skill. These are example prompts, not installation commands.

pbakaus GitHub avatarpbakaus / impeccable
67,292

#02UI & design

Impeccable

Design guidance and focused commands for auditing, critiquing, polishing, simplifying, and improving an existing interface.

When I'd use itStart here when a page works but its spacing, typography, copy, or visual hierarchy still feels generic.

Try this with your agent
Critique this page for hierarchy, spacing, and clarity. Keep my existing brand and navigation; suggest three focused improvements before editing.

Use after loading the relevant skill. These are example prompts, not installation commands.

nextlevelbuilder GitHub avatarnextlevelbuilder / ui-ux-pro-max-skill
126,877

#01UI & design

UI UX Pro Max

A design-focused skill with guidance for styles, palettes, typography, UX, and building a design system around a project's needs.

When I'd use itUseful early in a project, when you need a consistent visual direction rather than a different style on every screen.

Try this with your agent
Propose a design system for this product and audience. Define typography, color, spacing, and component states before building the first page.

Use after loading the relevant skill. These are example prompts, not installation commands.

Before you install everything

Start with one real problem.

01

Pick your task

For a React performance review, look at Vercel's collection. For motion, look at Emil's. For a visual cleanup, explore Impeccable.

02

Read the setup

Open the repository and follow its current README for your coding tool. Review the skill and any scripts before giving your agent access.

03

Give it a clear brief

Name the page, the problem, and what must stay unchanged. Ask for a small plan, then test the result on mobile and with a keyboard.

YOUR NEXT PROMPT

Use the relevant skill to review this frontend page. Keep my existing brand, content, and navigation. Find the three biggest issues, explain the fixes in plain language, and make one change at a time. Test the result before moving on.

A useful brief beats “make it better.” Skills help guide the work; you still need to review the result.

Came here from the reel?

Here's your “SKILLS” list.

Bookmark this page for your next frontend project. Every repository is linked above, with a short explanation to help you choose.

More practical guides