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 31,246 skills, Frontend Development has 3078 skills

Categories

Showing 12 of 3078 skills

Per page
Downloads
Sort
Frontend Developmentailabs-393/ai-labs-claude...

seo-optimizer

This skill should be used when analyzing HTML/CSS websites for SEO optimization, fixing SEO issues, generating SEO reports, or implementing SEO best practices. Use when the user requests SEO audits, optimization, meta tag improvements, schema markup implementation, sitemap generation, or general search engine optimization tasks.

🇺🇸|EnglishTranslated
2
3 scripts/Checked
Frontend Developmentdiegojohnsonl/trpc-tansta...

trpc-tanstack-nextjs

Set up tRPC with TanStack Query in Next.js App Router projects. Use when: (1) Setting up tRPC from scratch in a Next.js project, (2) Adding new routers or procedures, (3) Integrating authentication with tRPC context, (4) Using tRPC with React Server Components, (5) Configuring prefetching and hydration patterns.

🇺🇸|EnglishTranslated
2
Frontend Developmentlevnikolaevich/claude-cod...

ln-721-frontend-restructure

Frontend structure worker: SCAFFOLD new React project or RESTRUCTURE existing monolith to component-based architecture

🇺🇸|EnglishTranslated
2
Frontend Developmentingpoc/skills

scroll-storyteller

Use when creating interactive scroll-based storytelling experiences with mouse-following spotlight effects, animated SVG art, and the Anthropic design language. Load for explainer pages, product showcases, visual narratives, or any content needing immersive scroll storytelling with organic shapes and smooth animations. Supports GSAP-powered or lightweight CSS-only animations.

🇺🇸|EnglishTranslated
2
3 scripts/Attention
Frontend Developmentdylantarre/animation-prin...

motion-one

Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

🇺🇸|EnglishTranslated
2
Frontend Developmentmartinacostadev/mercadopa...

mercadopago-integration

Integrate MercadoPago Checkout Pro (redirect-based) into Next.js applications with any PostgreSQL database (Supabase, AWS RDS, Neon, PlanetScale, self-hosted, Prisma, Drizzle, or raw pg). Use when the user needs to: (1) Add MercadoPago payment processing to a Next.js app, (2) Create a checkout flow with MercadoPago, (3) Set up payment webhooks for MercadoPago, (4) Build payment success/failure pages, (5) Create a shopping cart with payment integration, (6) Troubleshoot MercadoPago integration issues (auto_return errors, webhook failures, hydration mismatches, double submissions). Triggers on requests mentioning MercadoPago, Mercado Pago, payment integration with MP, Argentine/Latin American payment processing, or checkout with MercadoPago. Supports all MercadoPago currencies (ARS, BRL, MXN, CLP, COP, PEN, UYU).

🇺🇸|EnglishTranslated
2
Frontend Developmentmindrally/skills

modern-web-development

Modern web development best practices for TypeScript, Next.js 14, React Server Components, Supabase, GraphQL, and Tailwind CSS.

🇺🇸|EnglishTranslated
2
Frontend Developmentmindrally/skills

pwa-development

Progressive Web App development guidelines covering service workers, caching strategies, offline functionality, and installability

🇺🇸|EnglishTranslated
2
Frontend Developmentmindrally/skills

vite

Expert guidance for Vite development with modern build tooling, HMR, framework integrations, and performance optimization

🇺🇸|EnglishTranslated
2
Frontend Developmentmindrally/skills

clerk-authentication

Guidelines for implementing Clerk authentication in Next.js applications with middleware, hooks, and security best practices

🇺🇸|EnglishTranslated
2
Frontend Developmentnailorsh/agents_utils

telegram-mini-apps-react

Comprehensive guide for creating Telegram Mini Apps with React using @tma.js/sdk-react. Covers SDK initialization, component mounting, signals, theming, back button handling, viewport management, init data, deep linking, and environment mocking for development. Use when building or debugging Telegram Mini Apps with React.

🇺🇸|EnglishTranslated
2
Frontend Developmentmindrally/skills

blazor

Guidelines for Blazor development including component lifecycle, state management, and performance optimization

🇺🇸|EnglishTranslated
2
1...137138139140141...257
Page