Hey Product Hunt! agentools.sh is live there today. Tell me what to add →
Sponsor

Frontend skills

65 Frontend skills, most installed first. I read every file in each one to see what it can access, and show the security audits from skills.sh. See all skills.

Best for Solo founders who have a coding agent build and polish their UI

This page lists the Agent Skills that help a coding agent build web, mobile and video interfaces, sorted by total installs on skills.sh. I read every skill file by file to rate its access (Low, Medium or High), meaning what it can touch on your machine and accounts, and each skill page shows its skills.sh security audits.

Start with Frontend Design by Anthropic if your pages keep coming out with the stock AI look: it plans a palette, type and layout before coding. Add React Best Practices from Vercel for about 70 React and Next.js performance rules. To check finished work, Web Interface Guidelines reports accessibility and UX problems as file:line notes. If you use shadcn/ui, install the official shadcn/ui skill.

1Frontend Designanthropics/skillsDistinctive UI instead of AI-template pagesLow3/3 pass1.0M2React Best Practicesvercel-labs/agent-skillsVercel's React and Next.js performance rulesLow3/3 pass845K3Web Interface Guidelinesvercel-labs/agent-skillsAudit UI code for a11y and UX issuesMedium1 warn792K4Remotion Best Practicesremotion-dev/skillsOfficial Remotion skills so agents make videos in ReactMedium3/3 pass696K5UI/UX Pro Maxnextlevelbuilder/ui-ux-pro-max-skillSearchable design system and UX rulebookMedium3/3 pass419K6Design Engineeringemilkowalski/skillsAnimation and polish rules from Emil KowalskiLow3/3 pass393K7Impeccablepbakaus/impeccableDesign commands to critique and polish UIHigh1 warn366K8Apple Designemilkowalski/skillsApple-style fluid motion and design for the webLow3/3 pass248K9Ask Sonneremilkowalski/skillsGuide to the Sonner toast libraryLow3/3 pass143K10Animate Expoemilkowalski/skillsEmil's animation method for React Native and ExpoLow3/3 pass141K11shadcn/uishadcn-ui/uiUse shadcn/ui components the right wayHigh1 warn126K12PonytailDietrichGebert/ponytailLazy senior dev mode: the smallest change that fully solves the taskMedium3/3 pass109K13HallmarkNutlope/hallmarkAnti-AI-slop design skill: real themes, real photos and a browser lint for machine-made tellsHigh1 warn74.6K14Make Interfaces Feel Betterjakubkrehel/make-interfaces-feel-betterDesign engineering details that make UI feel polishedLow3/3 pass73.8K15Break UIemilkowalski/skillsStress-test UI with worst-case dataLow3/3 pass68.4K16Better UIjakubkrehel/skillsExact values for radius, shadows, icons and motionLow3/3 pass40.3K17Animation Performanceemilkowalski/skillsKeep web animations inside the frame budgetLow3/3 pass39.8K18Better Typographyjakubkrehel/skillsType scale, font features, wrapping and punctuationLow3/3 pass35.1K19Better Colorsjakubkrehel/skillsPalettes, semantic tokens and contrast checksLow3/3 pass33.5K20Better Layoutjakubkrehel/skillsGrouping, alignment and layouts that survive translationLow3/3 pass31.6K21Better Interfacejakubkrehel/skillsOne ranked review across every interface disciplineLow3/3 pass30.9K22Better Accessibilityjakubkrehel/skillsKeyboard, ARIA, forms and motion against WCAG 2.2Low3/3 pass30.4K23Anatomywheresryan22/anatomyExplain a technical idea by drawing it as a working isometric machineHigh1 warn22.6K24Variant (Jakub Krehel)jakubkrehel/skillsBuild several variants of a component and pick oneLow3/3 pass15.2K25Explain Interfacejakubkrehel/skillsHow was this site or effect built?Medium1 warn14.6K26Break (Jakub Krehel)jakubkrehel/skillsStress test a component in every scenarioLow3/3 pass14.3K27Appllama App DesignAppllama/appllama-skillsNative-quality Expo screens, checked in a simulatorMedium3/3 pass4.9K28State Machine (Jakub Krehel)jakubkrehel/skillsEvery state of a component on one pageLow3/3 pass4.2K29Build Designjakubkrehel/skillsBuild UI from a Figma file or design imageMedium1 warn4.2K30Android Skillsandroid/skillsOfficial Android development skills from GoogleHigh1 warn2.9K31Figma Design to Codefigma/mcp-server-guideTurn Figma frames into matching codeHigh1 warn2.5K32rossark-motion-skillrossark0/rossark-motion-skillTurn SVG art into calm, lifelike 60 fps animation in React Native and SwiftUIMedium3/3 pass28333unslopheydamir/unslopAudits vibecoded, AI looking UI and redesigns it so it looks deliberate and product specificHigh1 warn27234Tactile Designkosta4a/tactile-designTactile, layered, quiet product UI with rings, crisp drops and pressable controls in light and darkLow3/3 pass8335fun-isometrickelvinkn17/skillsAnimated isometric sticker icons on After Effects grade keyframes.High3/3 pass6136pixelfxpatch-gg/pixelfx244 pixel art effects as code, plus a Claude Code skill to find, recolor, export and make new onesMedium1 warn1837Animateemilkowalski/skillsBuild a web animation from scratch, decision by decisionLowNo audits—38Prototypeemilkowalski/skillsSeveral real UI variants behind a live pickerLowNo audits—39Expo Animationexpo/skillsReanimated and gesture motion for Expo appsLowNo audits—40Expo App Clipexpo/skillsAdd an iOS App Clip target to an Expo appMediumNo audits—41Expo Brownfieldexpo/skillsEmbed React Native in an existing native appMediumNo audits—42Expo Data Fetchingexpo/skillsNetwork requests, caching and offline in ExpoLowNo audits—43Expo Design Systemexpo/skillsDesign tokens and reusable components in ExpoLowNo audits—44Expo Dev Clientexpo/skillsBuild development clients locally or via TestFlightHighNo audits—45Expo DOM Componentsexpo/skillsRun web code in a webview on nativeLowNo audits—46Expo Examplesexpo/skillsVersion-matched patterns from expo/examplesMediumNo audits—47Expo Migrate Moduleexpo/skillsMove Swift modules to the Expo Modules 2.0 macro APILowNo audits—48Expo Moduleexpo/skillsWrite native modules in Swift and KotlinMediumNo audits—49Expo Native UIexpo/skillsNative-feeling Expo screens with HIG stylingMediumNo audits—50Expo Overviewexpo/skillsEntry point that routes every Expo or EAS taskMediumNo audits—51Expo Project Structureexpo/skillsFolder layout for a new Expo Router appLowNo audits—52Expo Routerexpo/skillsFile-based navigation for Expo appsLowNo audits—53Expo UIexpo/skillsReal SwiftUI and Jetpack Compose through @expo/uiMediumNo audits—54Expo Upgradeexpo/skillsUpgrade Expo SDK versions and fix dependenciesMediumNo audits—55Expo Web to Nativeexpo/skillsPort a web React app to iOS and AndroidMediumNo audits—56Find Animation Opportunitiesemilkowalski/skillsSpot where motion would help, and where it would notLowNo audits—57Improve Animationsemilkowalski/skillsMotion audit with plans other agents can runLowNo audits—58landing-page-designelayadesign/ai-design-skillsA full landing page system so your agent stops shipping generic AI pages.LowNo audits—59Mobile Nativeemilkowalski/skillsMake a web app feel installed on a phoneLowNo audits—60Pick UI Libraryemilkowalski/skillsEmil's trusted library for each frontend jobLowNo audits—61Pixel Pathjonwheatley/pixel-pathTurn any two places into a pixel-art fly-through of the real roadHighNo audits—62Pristinemaddhruv/pristineScreenshots your real UI in light, dark, desktop and mobile, then scores it out of 10 or fixes itHighNo audits—63Review Animationsemilkowalski/skillsStrict review of motion codeLowNo audits—64Stageshowbenjitaylor/skillsFaux product UI stills, cursor demos and bento grids that look like the real productHighNo audits—65Write Swiftemilkowalski/skillsModern Swift 6 the way agents missLowNo audits—

Questions

What is the best Agent Skill for frontend design in Claude Code?

Frontend Design by Anthropic is the most installed skill on this page, and its access is Low. It makes the agent plan a small token system (palette, type, layout, principles) and check it against the brief before coding, so new pages avoid the stock AI-generated look.

How do I install Vercel's React Best Practices skill?

Run npx skills add vercel-labs/agent-skills to install React Best Practices. Web Interface Guidelines is listed with the same install command, so you get Vercel's UI audit skill from the same repo.

What is the difference between Impeccable and Pristine?

Impeccable is a design director skill with sub-commands such as shape, critique, audit, polish and animate, keeps context in PRODUCT.md and DESIGN.md, and can install a hook that flags design problems after UI edits. Its access is High. Pristine screenshots your real UI in light, dark, desktop and mobile, and its /pristine critique command scores a page across 11 dimensions without touching code. Its access is also High.

Is there an Agent Skill for making videos with React?

Yes, Remotion Best Practices is the official skill from the Remotion team and opens a live Studio preview so you can watch and steer while the agent builds. Install it with npx skills add remotion-dev/skills; it works with Claude Code, Cursor and Codex.