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,396 skills, Frontend Development has 4859 skills

Categories

Showing 12 of 4859 skills

Per page
Downloads
Sort
Frontend Developmentfigma/mcp-server-guide

figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

🇺🇸|EnglishTranslated
24
Frontend Developmentbenjitaylor/agentation

agentation

Add Agentation visual feedback toolbar to a Next.js project

🇺🇸|EnglishTranslated
24
Frontend Developmentibelick/ui-skills

baseline-ui

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

🇺🇸|EnglishTranslated
24
Frontend Developmentibelick/ui-skills

fixing-metadata

Ship correct, complete metadata.

🇺🇸|EnglishTranslated
24
Frontend Developmenthairyf/skills

react-use

Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management

🇺🇸|EnglishTranslated
24
Frontend Developmentdavila7/claude-code-templ...

design-system-starter

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

🇺🇸|EnglishTranslated
24
Frontend Developmentgithub/awesome-copilot

react18-string-refs

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).

🇺🇸|EnglishTranslated
24
Frontend Developmentmindrally/skills

vue-typescript

Expert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks

🇺🇸|EnglishTranslated
24
Frontend Developmentdylantarre/animation-prin...

entrance-animations

Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.

🇺🇸|EnglishTranslated
24
Frontend Developmentsamber/cc-skills

site-launch-checklist

Pre-launch checklist for shipping a new website. Orchestrates analytics setup (GA4, PostHog, Google Search Console, Ahrefs), legal compliance, security headers and audit, SEO and GEO with keyword research validated against Google Trends (robots.txt, sitemaps, llms.txt, AI policy, schema markup, hreflang), copywriting consistency via a TONE.md and a humanizer pass in the matching language, OpenGraph and social previews, full favicon set with manifest, quality gates (Lighthouse, Core Web Vitals, WCAG accessibility, mobile testing), and setup of a weekly SEO agent. Use this skill whenever the user mentions launching a site/app, deploying a domain to production, pre-launch audit, shipping a marketing/docs/SaaS site or lead magnet, or says "checklist for the site", "ready to ship", "before I go live", "audit before launch", "ready for prod", or asks for a site review.

🇺🇸|EnglishTranslated
23
Frontend Developmentequinor/fusion-skills

fusion-backend-dev

Guides consumption and understanding of Fusion backend services, APIs, and patterns for frontend/client developers, integrators, and architects. Shows reference implementations, explains architectural decisions, and clarifies contracts. USE FOR: understanding Fusion backend APIs, learning implementation patterns, exploring reference code, choosing the right integration point, and understanding authorization/validation/async patterns. DO NOT USE FOR: modifying backend services, creating new endpoints, database changes, or backend-specific development (use fusion-services-develop or backend service repo instead).

🇺🇸|EnglishTranslated
23
Frontend Developmentshopify/shopify-ai-toolki...

shopify-polaris-checkout-extensions

Build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay. Checkout UI Extensions also supports scaffolding new checkout extensions using Shopify CLI commands.

🇺🇸|EnglishTranslated
23
2 scripts/Attention
1...1415161718...405
Page