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,369 skills, Frontend Development has 4856 skills

Categories

Showing 12 of 4856 skills

Per page
Downloads
Sort
Frontend Developmenthgzahn/agentic-coding

i-audit

Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.

🇺🇸|EnglishTranslated
15
Frontend Developmentpatternsdev/skills

render-props-pattern

Pass JSX elements to components through props for flexible, reusable component composition.

🇺🇸|EnglishTranslated
15
Frontend Developmentchristian289/dotnet-with-...

designing-avalonia-customcontrol-architecture

Defines the basic solution structure for AvaloniaUI Desktop Applications using CustomControl. Use when creating new AvaloniaUI projects or designing stand-alone control styles with ControlTheme.

🇺🇸|EnglishTranslated
15
Frontend Developmentoimiragieo/agent-studio

tauri-native-api-integration

Rules for integrating Tauri's native APIs in the frontend application.

🇺🇸|EnglishTranslated
15
3 scripts/Checked
Frontend Developmentvercel/next.js

dce-edge

DCE-safe require() patterns and edge runtime constraints. Use when writing conditional require() calls, guarding Node-only imports (node:stream etc.), or editing define-env-plugin.ts / app-render / stream-utils for edge builds. Covers if/else branching for webpack DCE, TypeScript definite assignment, the NEXT_RUNTIME vs real feature flag distinction, and forcing flags false for edge in define-env.ts.

🇺🇸|EnglishTranslated
15
Frontend Developmentmillionco/react-doctor

animation-best-practices

CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.

🇺🇸|EnglishTranslated
15
Frontend Developmentgiuseppe-trisciuoglio/dev...

nextjs-app-router

Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing Server Components and Client Components ("use client"), creating Server Actions for forms, building Route Handlers (route.ts), configuring caching with "use cache" directive (cacheLife, cacheTag), setting up parallel routes (@slot) or intercepting routes, migrating to proxy.ts, or working with App Router file conventions (layout.tsx, page.tsx, loading.tsx, error.tsx).

🇺🇸|EnglishTranslated
15
Frontend Developmentchloezhu010/vibe-ship

frontend-polish

Makes an AI-generated frontend production-ready by adding loading states, error boundaries, page metadata, and a responsive layout audit at 375px. Framework-agnostic — applies to both Next.js and Vite/React. Called by the vibe-ship orchestrator.

🇺🇸|EnglishTranslated
15
Frontend Developmentdalestudy/skills

react

React 성능 최적화 및 베스트 프랙티스 스킬. Vercel Engineering 가이드 기반, 프레임워크 비종속. 다음 상황에서 사용: (1) React 컴포넌트(.tsx, .jsx) 작성 또는 수정 시, (2) 상태 관리, hooks, 리렌더링 최적화 작업 시, (3) 비동기 데이터 페칭 또는 Suspense 패턴 작업 시, (4) 번들 사이즈 최적화 또는 코드 스플리팅 시, (5) 'react', 'useState', 'useEffect', 'useMemo', 'useCallback', 'memo', 'Suspense', 'lazy' 키워드가 포함된 작업 시

🇺🇸|EnglishTranslated
15
Frontend Developmentpartme-ai/full-stack-skil...

element-plus-vue3

Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.

🇺🇸|EnglishTranslated
15
Frontend Developmentsyncfusion/react-ui-compo...

syncfusion-react-ai-assistview

Implement the Syncfusion React AI AssistView component. Use this skill to handle AI-powered conversational interfaces, AssistView setup, conversation flow, speech input or output, file attachments, UI customization, state management, and AI service integration such as OpenAI or Azure AI in React applications.

🇺🇸|EnglishTranslated
15
Frontend Developmentsyncfusion/angular-ui-com...

syncfusion-angular-diagram

Build and configure Syncfusion EJ2 Angular Diagram for flowcharts, org charts, process diagrams, and data-visualization. Trigger when users ask to create nodes/connectors, apply layouts, swimlane, use BPMN/UML shapes, or add interactivity like drag-drop, zoom/pan, snapping, editing, and symbol palettes.

🇺🇸|EnglishTranslated
15
1...4142434445...405
Page