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 50,737 skills, Frontend Development has 4879 skills

Categories

Showing 12 of 4879 skills

Per page
Downloads
Sort
Frontend Developmentsundial-org/awesome-openc...

animation-gen

Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.

🇺🇸|EnglishTranslated
7
Frontend Developmentmantinedev/skills

mantine-custom-components

Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context, (5) registering a component with MantineProvider via Component.extend(), or (6) any task involving Factory, useProps, useStyles, BoxProps, StylesApiProps, or ElementProps in @mantine/core.

🇺🇸|EnglishTranslated
7
Frontend Developmentjosegusnay/angular-enterp...

angular-enterprise-ui

Smart/Dumb component patterns, Standalone components, modern control flow (@if, @for), styling (SASS/BEM) and accessibility.

🇺🇸|EnglishTranslated
7
Frontend Developmentdannyjpwilliams/ui-sound-...

ui-sound-design

Programmatic UI sound design using Web Audio API and Tone.js. Use when creating click sounds, notification chimes, toggle feedback, hover sounds, success/error audio, whoosh effects, or building a sound library for UI interactions. Provides an iterative describe-generate-listen-refine workflow with audio engineering knowledge translated into plain English.

🇺🇸|EnglishTranslated
7
Frontend Developmentnovotnyllc/dotnet-artisan

dotnet-blazor-patterns

Architects Blazor apps. Hosting models, render modes, routing, streaming, prerender.

🇺🇸|EnglishTranslated
7
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
7
Frontend Developmentvcode-sh/vibe-tools

tanstack-router-guide

Type-safe, file-based router for React with first-class search params, data loading, and code splitting. Use when user asks to "create routes with TanStack Router", "set up file-based routing", "add search params", "use loaders", "protect routes with auth", "add code splitting", or asks about @tanstack/react-router, createFileRoute, createRouter, routeTree.gen.ts, useSearch, useParams, useNavigate, useBlocker, useMatch, useRouterState, beforeLoad, or route configuration. Do NOT use for TanStack Start server functions, Next.js App Router, React Router (without migration context), or Remix routing. Covers routing setup, navigation, search/path params, data loading, authentication, code splitting, SSR, error handling, testing, deployment, and bundler configuration (Vite, Webpack, Rspack, esbuild).

🇺🇸|EnglishTranslated
7
Frontend Developmentcasper-studios/casper-mar...

casper-design-system

Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client apps, dashboards, POCs, prototypes, or any visual interface — even quick mockups or artifacts. Apply it any time the output is a React component, page, or layout. If the user mentions "our design system", "Casper style", "match our look", or asks you to build any kind of app or interface, use this skill. Also trigger when restyling or theming existing UI to match Casper's visual language. This skill takes priority over generic frontend-design guidance.

🇺🇸|EnglishTranslated
7
Frontend Developmentdawiddutoit/custom-claude

ha-custom-cards

Configures HACS custom cards (ApexCharts, modern-circular-gauge, bubble-card, mini-graph-card, mushroom) for Home Assistant dashboards with validated configurations, color schemes, and error patterns. Use when asked to "add custom card", "install HACS card", "create gauge/graph", "ApexCharts dashboard", "mushroom cards", or "bubble separator".

🇺🇸|EnglishTranslated
7
Frontend Developmentihlamury/design-skills

ghost-ui-skills

Ghost's UI design system. Use when building interfaces inspired by Ghost's aesthetic - dark mode, Inter font, 4px grid.

🇺🇸|EnglishTranslated
7
Frontend Developmentrand/cc-polymath

elegant-design

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

🇺🇸|EnglishTranslated
7
Frontend Developmentsubframeapp/subframe

develop

Implement Subframe designs with business logic. Use after designing with /subframe:design or when given a Subframe URL/page ID.

🇺🇸|EnglishTranslated
7
1...317318319320321...407
Page