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 53,554 skills, Frontend Development has 5084 skills

Categories

Showing 12 of 5084 skills

Per page
Downloads
Sort
Frontend Developmentdylantarre/animation-prin...

hover-interactions

Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.

🇺🇸|EnglishTranslated
70
Frontend Developmentjoaquimcassano/ideas-mark...

motion

Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).

🇺🇸|EnglishTranslated
70
2 scripts/Attention
Frontend Developmentg1joshi/agent-skills

tauri

Tauri lightweight desktop framework with Rust backend. Use for desktop apps.

🇺🇸|EnglishTranslated
69
Frontend Developmentbeshkenadze/claude-skills...

typescript-advanced-types

Advanced TypeScript types (generics, conditionals, mapped, utilities). Use when building type-safe libraries or implementing complex type logic.

🇺🇸|EnglishTranslated
69
Frontend Developmentharlan-zw/vue-ecosystem-s...

vee-validate-skilld

ALWAYS use when writing code importing "vee-validate". Consult for debugging, best practices, or modifying vee-validate, vee validate.

🇺🇸|EnglishTranslated
69
Frontend Developmentnexu-io/html-anything

deck-magazine-web

E-magazine × E-ink Style, WebGL Fluid Background + Serif Display

🇨🇳|ChineseTranslated
69
Frontend Developmentclerk/skills

clerk-react-router-patterns

React Router v7 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router.

🇺🇸|EnglishTranslated
69
3 scripts/Checked
Frontend Developmentsyncfusion/winui-ui-compo...

syncfusion-winui-dropdown-color-picker

Guide for implementing Syncfusion WinUI DropDown Color Picker control for interactive color selection with dropdown functionality. Use this skill when implementing color selection with dropdown, color editing modes (RGB/HSV/HSL/CMYK/Hex), customizable dropdown placement, split button modes, or color picker flyout customization in WinUI applications.

🇺🇸|EnglishTranslated
69
Frontend Developmentgotar/opencode-config

gtk-ui-ux-engineer

A GTK (GTK4/GTK3) UI/UX specialist that crafts beautiful, native-feeling desktop applications following GNOME Human Interface Guidelines. Use this skill when working with GTK widget composition, Libadwaita theming, CSS styling, accessible layouts, and modern GTK4 features like GtkListView, property bindings, and event controllers. Handles visual design decisions, layout composition, responsive designs, and theme-aware styling for Linux desktop applications.

🇺🇸|EnglishTranslated
68
Frontend Developmentdembrandt/dembrandt-skill...

sticky-and-fixed-elements

Sticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the bottom on mobile. Use deliberately: too many fixed layers create visual noise and reduce content area. Use when designing navigation headers, bottom toolbars, floating action buttons, or table column headers.

🇺🇸|EnglishTranslated
68
Frontend Developmentgsmlg-dev/code-agent

duskmoon-dev-css-art

When using npm package `@duskmoon-dev/css-art`, this skill shows how to install, configure, and use the pure CSS art component library

🇺🇸|EnglishTranslated
68
Frontend Developmentoso95/scroll-world

scroll-world

Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera flies from outside each scene into its interior, then flows on to the next scene with NO cuts — one continuous connected flight (Emons-style isometric diorama world, or any art direction you pick). The skill interviews the user for the topic, the story beats/sections, and brand kit, then generates cohesive scenes + seamless camera clips with Higgsfield and wires a portable, framework-agnostic scroll-scrub engine. Use when the user wants a "3D world" / "browse-through-the-industry" hero, a scroll cinematic, a diorama landing, or to turn a business into a scrollable world.

🇺🇸|EnglishTranslated
68
2 scripts/Attention
1...2021222324...424
Page