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 44,839 skills, Frontend Development has 4534 skills

Categories

Showing 12 of 4534 skills

Per page
Downloads
Sort
Frontend Developmentdavepoon/buildwithclaude

macos-design

Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.

🇺🇸|EnglishTranslated
2
Frontend Developmentmantinedev/skills

mantine-combobox

Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searchable dropdown, (3) implementing a multi-select or tags input variant, (4) customizing option rendering, (5) adding custom filtering logic, or (6) any task involving useCombobox, Combobox.Target, Combobox.Option, or Combobox.Dropdown.

🇺🇸|EnglishTranslated
2
Frontend Developmenthyva-themes/hyva-ai-tools

hyva-render-media-image

Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".

🇺🇸|EnglishTranslated
2
Frontend Developmentblencorp/claude-code-kit

tanstack-router

TanStack Router file-based routing patterns including route creation, navigation, loaders, type-safe routing, and lazy loading. Use when creating routes, implementing navigation, or working with TanStack Router.

🇺🇸|EnglishTranslated
2
Frontend Developmentblencorp/claude-code-kit

tanstack-query

TanStack Query v5 data fetching patterns including useSuspenseQuery, useQuery, mutations, cache management, and API service integration. Use when fetching data, managing server state, or working with TanStack Query hooks.

🇺🇸|EnglishTranslated
2
Frontend Developmenttartinerlabs/skills

recharts

Use when building charts, data visualisations, or dashboards with Recharts. Also use when integrating Recharts with HeroUI, reviewing chart components, or creating responsive chart containers. Generates Recharts charts styled with HeroUI v3 design tokens and Tailwind CSS v4.

🇺🇸|EnglishTranslated
2
Frontend Developmentopen-circle/agent-skills

formisch-usage

Form handling with Formisch, the type-safe form library for modern frameworks. Use when the user needs to create forms, handle form state, validate form inputs, or work with Formisch.

🇺🇸|EnglishTranslated
2
Frontend Developmentagustinalbonico/ai-custom...

tauri-migration

Alias corto para migracion Web a Desktop con Tauri en stack React + NestJS + Postgres en LAN. Usar para aplicar flujo de planificacion, implementacion, verificacion y release con sidecar y reglas de red.

🇺🇸|EnglishTranslated
2
Frontend Developmenttompec/fluxui-docs-skill

fluxui-docs

Flux is the official Livewire component library built with Tailwind CSS. Provides fully flexible, functional, and accessible UI components for Livewire applications. This skill includes only the free components. Use when building UI with fluxui docs components.

🇺🇸|EnglishTranslated
2
Frontend Developmentunlayer/unlayer-skills

unlayer-integration

Integrates the Unlayer editor into web applications — React, Vue, Angular, or plain JavaScript setup, component props, editor access patterns, multiple instances.

🇺🇸|EnglishTranslated
2
Frontend Developmentoakoss/agent-skills

motion

Web animations with Motion (formerly Framer Motion) for React -- gestures, scroll effects, spring physics, layout animations, SVG, micro-interactions, loading states. Use when: drag-and-drop, scroll animations, modals, carousels, parallax, page transitions, hover effects, staggered lists, loading spinners, number counters. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client", layout in scaled containers.

🇺🇸|EnglishTranslated
2
Frontend Developmentcesiumgs/cesium-ai-integr...

creating-globe-tours

Use when building multi-stop flyover presentations, virtual tours, guided location showcases, or cinematic sequences on the CesiumJS 3D globe

🇺🇸|EnglishTranslated
2
1...342343344345346...378
Page