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,552 skills, Frontend Development has 4868 skills

Categories

Showing 12 of 4868 skills

Per page
Downloads
Sort
Frontend Developmentainergiz/design-inspirati...

nested-card

Creates cards with an outer gradient container and inner content card. Use when building premium card designs with depth, layered card layouts, or cards with image sections and content sections.

🇺🇸|EnglishTranslated
11
Frontend Developmentrajavijayach/electrobun-s...

electrobun-window-management

Advanced window and view management patterns for Electrobun desktop applications. This skill covers multi-window architectures, BrowserView for embedded webviews, window lifecycle management, window orchestration, tab systems, and complex window hierarchies. Use this skill when building applications with multiple windows, implementing browser-like tab interfaces, managing parent-child window relationships, creating floating panels or toolbars, implementing picture-in-picture modes, managing window state persistence across sessions, or building applications that require sophisticated window coordination. Triggers include "multiple windows", "tab system", "BrowserView", "window orchestration", "floating window", "child window", "window state", "window manager", "multi-window app", or discussions about complex window management in Electrobun desktop applications.

🇺🇸|EnglishTranslated
11
Frontend Developmentluismpenholato/maurao-ski...

angular-frontend-clean-architecture

Angular 21 standalone frontend with Clean Architecture, vertical slice (pages by feature), signals, OnPush, and ng-zorro. Use when creating or refactoring Angular apps, adding pages, components, services, directives, pipes, or when the user mentions Angular frontend, standalone components, or signals.

🇺🇸|EnglishTranslated
11
Frontend Developmentoakoss/agent-skills

react-performance

React performance optimization patterns including memoization, code splitting, bundle size reduction, re-render elimination, and profiling. Covers React Compiler automatic optimization, manual memo/useMemo/useCallback targeting, React.lazy with Suspense, barrel file avoidance, content-visibility for large lists, startTransition for non-urgent updates, and React DevTools profiling. Use when optimizing React app performance, reducing bundle size, eliminating unnecessary re-renders, debugging slow components, code splitting, or profiling rendering bottlenecks. Use for performance audit, bundle analysis, re-render diagnosis, lazy loading, virtualization.

🇺🇸|EnglishTranslated
11
Frontend Developmentfusengine/agents

tailwindcss-typography

Typography utilities Tailwind CSS v4.1. Font (font-sans, font-serif, font-mono, font-size, font-weight), Text (text-color, text-align, text-wrap, text-shadow NEW), Letter/Line spacing, Decoration, Transform.

🇺🇸|EnglishTranslated
11
Frontend Developmentcodebelt/codebelt-skills

codebelt-code-style

Enforces the CodeBelt TypeScript and React code style guide for project structure, naming conventions, component patterns, service patterns, testing, and TypeScript rules. Use when writing, reviewing, or refactoring TypeScript or React code, creating new files or components, organizing project directories, writing tests, defining Zod schemas, or when the user mentions code style, conventions, linting, file organization, or naming patterns.

🇺🇸|EnglishTranslated
11
Frontend Developmentbenjaminsehl/liquid-skill...

liquid-theme-a11y

Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.

🇺🇸|EnglishTranslated
11
Frontend Developmentanalogjs/angular-skills

angular-tooling

Use Angular CLI and development tools effectively in Angular v20+ projects. Use for project setup, code generation, building, testing, and configuration. Triggers on creating new projects, generating components/services/modules, configuring builds, running tests, or optimizing production builds.

🇺🇸|EnglishTranslated
11
Frontend Developmentonmax/nuxt-skills

nuxt-modules

Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.

🇺🇸|EnglishTranslated
11
Frontend Developmentsickn33/antigravity-aweso...

react-ui-patterns

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

🇺🇸|EnglishTranslated
11
Frontend Developmentjezweb/claude-skills

tanstack-router

Build type-safe, file-based React routing with TanStack Router. Supports client-side navigation, route loaders, and TanStack Query integration. Prevents 20 documented errors including validation structure loss, param parsing bugs, and SSR streaming crashes. Use when implementing file-based routing patterns, building SPAs with TypeScript routing, or troubleshooting devtools dependency errors, type safety issues, Vite bundling problems, or Docker deployment issues.

🇺🇸|EnglishTranslated
11
1 scripts/Checked
Frontend Developmentfacebook/react

extract-errors

Use when adding new error messages to React, or seeing "unknown error code" warnings.

🇺🇸|EnglishTranslated
11
1...164165166167168...406
Page