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,509 skills, Frontend Development has 4516 skills

Categories

Showing 12 of 4516 skills

Per page
Downloads
Sort
Frontend Developmentjezweb/claude-skills

landing-page

Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.

🇺🇸|EnglishTranslated
3
Frontend Developmentneondatabase/neon-js

neon-js-react

Sets up the full Neon SDK with authentication AND database queries in React apps (Vite, CRA). Creates typed client, generates database types, and configures auth UI. Use for auth + database integration.

🇺🇸|EnglishTranslated
3
Frontend Developmentneondatabase/neon-js

neon-auth-nextjs

Sets up Neon Auth in Next.js App Router applications. Configures API routes, middleware, server components, and UI. Use when adding auth-only to Next.js apps (no database needed).

🇺🇸|EnglishTranslated
3
Frontend Developmentneondatabase/neon-js

neon-auth-react

Sets up Neon Auth in React applications (Vite, CRA). Configures authentication adapters, creates auth client, and sets up UI components. Use when adding auth-only to React apps (no database needed).

🇺🇸|EnglishTranslated
3
Frontend Developmentsablier-labs/agent-skills

xstate-react

This skill should be used when the user asks to "create a state machine", "add xState", "use xState with React", "implement actor-based state", "manage complex state with state machines", "use xState with Effect", "integrate Effect-ts with xState", mentions xState hooks (useMachine, useActor, useSelector), or discusses finite state machines in React applications.

🇺🇸|EnglishTranslated
3
Frontend Developmentvtexdocs/ai-skills

headless-intelligent-search

Apply when implementing search functionality, faceted navigation, or autocomplete in a headless VTEX storefront. Covers product_search, autocomplete_suggestions, facets, banners, correction_search, and top_searches endpoints, plus analytics event collection. Use for any custom frontend that integrates VTEX Intelligent Search API for product discovery and search result rendering.

🇺🇸|EnglishTranslated
3
Frontend Developmentvtexdocs/ai-skills

headless-caching-strategy

Apply when implementing caching logic, CDN configuration, or performance optimization for a headless VTEX storefront. Covers which VTEX APIs can be cached (Intelligent Search, Catalog) versus which must never be cached (Checkout, Profile, OMS), stale-while-revalidate patterns, cache invalidation, and BFF-level caching. Use for any headless project that needs TTL rules and caching strategy guidance.

🇺🇸|EnglishTranslated
3
Frontend Developmentantvis/l7

antv-l7

Comprehensive guide for AntV L7 geospatial visualization library. Use when users need to: (1) Create interactive maps with WebGL rendering (2) Visualize geographic data (points, lines, polygons, heatmaps) (3) Build location-based data dashboards (4) Add map layers, interactions, or animations (5) Process and display GeoJSON, CSV, or other spatial data (6) Integrate maps with AMap (GaodeMap), Mapbox, Maplibre, or standalone L7 Map (7) Optimize performance for large-scale geographic datasets

🇺🇸|EnglishTranslated
3
Frontend Developmenthubeiqiao/apple-bento-gri...

apple-bento-grid

Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.

🇺🇸|EnglishTranslated
3
1 scripts/Checked
Frontend Developmentisjiamu/jiamu-skills

magazine-layout

Convert text content into elegant magazine-style HTML pages with support for professional typesetting and multiple visual styles. Trigger scenarios: (1) Users want to convert text/articles into magazine-style HTML, (2) Users mention "magazine layout", "magazine design", "article typesetting", "professional typesetting", "text beautification", or "magazine layout", (3) Users need elegantly typeset HTML pages, (4) Users need to export designed content as PDF. 12 unique visual styles are supported, using Tailwind CSS.

🇨🇳|ChineseTranslated
3
1 scripts/Checked
Frontend Developmentgeneraljerel/chalk-skills

react-hook-patterns

Custom React hook best practices — dependency arrays, cleanup, stale closures, TypeScript generics, composition, and extraction heuristics

🇺🇸|EnglishTranslated
3
Frontend Developmentaradotso/trending-skills

json-render-generative-ui

Generative UI framework that renders AI-generated JSON specs into type-safe UI components across React, Vue, Svelte, Solid, React Native, video, PDF, and email.

🇺🇸|EnglishTranslated
3
1...246247248249250...377
Page