Skill4Agent
Skill4Agent
All SkillsSearchTools
|
Explore
Skill4Agent
Skill4Agent

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

  • Home
  • All Skills
  • Search
  • Tools

About

  • About Us
  • Disclaimer
  • Copyright

Help

  • FAQ
  • Privacy
  • Terms
Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

All Skills

Total 54,018 skills, Frontend Development has 5122 skills

Categories

Showing 12 of 5122 skills

Per page
Downloads
Sort
Frontend Developmentjohnlindquist/claude

raycast-extension

Build Raycast extensions with React and TypeScript. Use when the user asks to create a Raycast extension, command, or tool.

🇺🇸|EnglishTranslated
28
Frontend Developmentapexscaleai/claude-ui-des...

design-system-foundation

Use when starting a new React Native or Next.js project to establish design system foundation - creates design tokens, folder structure, component architecture, and documentation scaffolding for consistent UI development

🇺🇸|EnglishTranslated
28
Frontend Developmentflpbalada/my-opencode-con...

react-use-callback

Guides proper usage of the useCallback hook in React. Use this skill when optimizing function references, passing callbacks to memoized components, or preventing unnecessary re-renders.

🇺🇸|EnglishTranslated
28
Frontend Developmentgetsentry/sentry

generate-frontend-forms

Guide for creating forms using Sentry's new form system. Use when implementing forms, form fields, validation, or auto-save functionality.

🇺🇸|EnglishTranslated
28
Frontend Developmentoakoss/agent-skills

zustand

Zustand v5 state management for React. Covers TypeScript stores with double-parentheses syntax, persist middleware with hydration handling, devtools, subscribeWithSelector, slices pattern for large apps, SSR/Next.js provider pattern, immer middleware, auto-generating selectors, testing, and vanilla stores. Use when setting up global state, configuring persist middleware, implementing slices pattern, migrating from Redux or Context, testing stores, or troubleshooting hydration and TypeScript issues.

🇺🇸|EnglishTranslated
28
Frontend Developmentsiberiacancode/agent-skil...

reactuse

Reactuse delivers production-ready hooks that solve real-world problems. Built with a TypeScript-first approach, SSR compatibility, and tree-shaking optimization for modern React applications.

🇺🇸|EnglishTranslated
28
Frontend Developmentrshvr/elite-web-design

elite-gsap

Complete GSAP (GreenSock Animation Platform) reference for elite web animations. Covers ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer, Draggable, timelines, and framework integration. 2026 UPDATE: All GSAP plugins are now 100% FREE (Webflow acquisition). Use when asked about: GSAP, gsap, GreenSock, ScrollTrigger, scroll animations, SplitText, text animations, Flip plugin, layout animations, MorphSVG, DrawSVG, SVG animations, complex animations, animation library, pinned sections, horizontal scroll, parallax effects, or any sophisticated web animation needs.

🇺🇸|EnglishTranslated
28
Frontend Developmentduc01226/easyplatform

fix-ui

[Fix & Debug] ⚡⚡ Analyze and fix UI issues

🇺🇸|EnglishTranslated
28
Frontend Developmentauth0/agent-skills

auth0-nuxt

Use when implementing Auth0 authentication in Nuxt 3/4 applications, configuring session management, protecting routes with middleware, or integrating API access tokens - provides setup patterns, composable usage, and security best practices for the @auth0/auth0-nuxt SDK

🇺🇸|EnglishTranslated
28
Frontend Developmentdylantarre/animation-prin...

power-confidence

Use when creating animations that convey strength, authority, or bold confidence in brand and product.

🇺🇸|EnglishTranslated
28
Frontend Developmentwarpdotdev/oz-skills

seo-aeo-audit

Optimize for search engine visibility, ranking, and AI citations. Use when asked to improve SEO, optimize for search, fix meta tags, add structured data, or improve AEO and AI visibility.

🇺🇸|EnglishTranslated
28
3 scripts/Attention
Frontend Developmentpproenca/dot-skills

framer-motion

Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.

🇺🇸|EnglishTranslated
28
1...5152535455...427
Page