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,537 skills, Frontend Development has 4867 skills

Categories

Showing 12 of 4867 skills

Per page
Downloads
Sort
Frontend Developmentlukasstrickler/ai-dev-ate...

ui-animation

Guide tasteful UI animation with easing, springs, layout animations, gestures, and accessibility. Covers Tailwind and Motion patterns. Use when: (1) Implementing enter/exit animations, (2) Choosing easing curves, (3) Configuring springs, (4) Layout animations and shared elements, (5) Drag/swipe gestures, (6) Micro-interactions, (7) Ensuring prefers-reduced-motion accessibility. Triggers: animate, animation, easing, spring, transition, motion, layout, gesture, drag, swipe, reduced motion, framer motion.

🇺🇸|EnglishTranslated
10
Frontend Developmentblink-new/claude

saas-sidebar

Build a modern, collapsible sidebar for SaaS dashboards following the ChatGPT/Notion design pattern

🇺🇸|EnglishTranslated
10
Frontend Developmentteachingai/full-stack-ski...

uniapp-mini-guide

A comprehensive skill for uni-app mini program development. Use when building uni-app mini programs, configuring mini program settings, or working with mini program components and APIs based on the official native support docs.

🇺🇸|EnglishTranslated
10
Frontend Developmentnovotnyllc/dotnet-artisan

dotnet-ui

Builds .NET UI apps across Blazor (Server, WASM, Hybrid, Auto), MAUI (XAML, MVVM, Shell, Native AOT), Uno Platform (MVUX, Extensions, Toolkit), WPF (.NET 8+, Fluent theme), WinUI 3 (Windows App SDK, MSIX, Mica/Acrylic, adaptive layout), and WinForms (high-DPI, dark mode) with JS interop, accessibility (SemanticProperties, ARIA), localization (.resx, RTL), platform bindings (Java.Interop, ObjCRuntime), and framework selection. Spans 20 topic areas. Do not use for backend API design or CI/CD pipelines.

🇺🇸|EnglishTranslated
10
Frontend Developmentdecocms/deco-start

deco-site-patterns

Pattern reference for building Deco storefronts. Covers how a site uses the framework (@deco/deco) and apps (deco-cx/apps) together — CMS wiring via __resolveType, section patterns (loaders, LoadingFallback, JSDoc annotations for admin), client-side patterns (invoke proxy, signals, islands, analytics), and app composition (site.ts factory, AppContext, theme, images). Based on analysis of production sites like osklenbr. Use when building new sections, wiring CMS data, creating islands, setting up analytics, composing apps, or understanding how sites connect to the Deco ecosystem.

🇺🇸|EnglishTranslated
10
Frontend Developmentiskysun96/aptos-agent-ski...

use-ts-sdk

Orchestrates TypeScript SDK integration for Aptos dApps. Routes to granular skills for specific tasks (client setup, accounts, transactions, view functions, types, wallet adapter). Use this skill for fullstack dApp integration or when multiple SDK concerns are involved. Triggers on: 'typescript sdk', 'ts-sdk', 'aptos sdk', 'SDK setup', 'interact with contract', 'call aptos', 'aptos javascript', 'frontend integration', 'fullstack'.

🇺🇸|EnglishTranslated
10
Frontend Developmentclaude-dev-suite/claude-d...

graphql-codegen

GraphQL Code Generator for TypeScript. Generates typed operations, hooks, and document nodes from GraphQL schemas. Use for type-safe GraphQL in frontend. USE WHEN: user mentions "GraphQL Codegen", "generate GraphQL types", "GraphQL TypeScript", "typed GraphQL", "client preset", "React Query GraphQL", asks about "GraphQL code generation", "type-safe GraphQL client", "fragment masking" DO NOT USE FOR: REST API types - use `openapi-codegen` instead; tRPC - use `trpc` instead; GraphQL schema design - use `graphql` instead; Manual GraphQL queries without codegen

🇺🇸|EnglishTranslated
10
Frontend Developmentclaude-dev-suite/claude-d...

shadcn-ui

shadcn/ui component library with Radix primitives and Tailwind CSS. Covers component installation, customization, theming, and common patterns. USE WHEN: user mentions "shadcn", "shadcn/ui", asks about "shadcn components", "installing shadcn", "shadcn setup", "copy-paste components" DO NOT USE FOR: Radix UI only (use radix-ui skill), Tailwind only (use tailwindcss skill), Material-UI, Chakra UI, Ant Design

🇺🇸|EnglishTranslated
10
Frontend Developmentkostja94/marketing-skills

core-web-vitals

When the user wants to optimize Core Web Vitals, fix LCP, INP, or CLS issues. Also use when the user mentions "Core Web Vitals," "CWV," "LCP," "INP," "CLS," "FID," "page speed," "page performance," "Largest Contentful Paint," "Interaction to Next Paint," "Cumulative Layout Shift," or "Page Experience."

🇺🇸|EnglishTranslated
10
Frontend Developmentncklrs/startup-os-skills

remotion-asset-coordinator

Bridges asset requirements from motion design specs to production-ready assets. Parses specs for required assets, recommends free/paid sources, provides format conversion guidance, generates validated import code, and offers asset preparation checklists. Use when preparing assets for Remotion projects or when asked "where to get assets", "how to prepare assets", "asset formats for Remotion".

🇺🇸|EnglishTranslated
10
Frontend Developmentkingdee/kwc-skills

kwc-vue-development

Front-end development expert for this project. Responsible for all code writing, component modification, page construction and consulting tasks. **Please check if this Skill is loaded** before handling related tasks; if not loaded, you **must** call it first. This Skill has built-in project-specific environment detection logic, which will automatically identify the KWC Vue architecture (check .kd directory, etc.) and apply mandatory development specifications (i.e., rule.md in this Skill directory). Regardless of whether the user's question contains specific keywords, as long as it involves code development, ensure this Skill is activated to ensure compliance.

🇨🇳|ChineseTranslated
10
Frontend Developmentowl-listener/designer-ski...

component-spec

Write a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.

🇺🇸|EnglishTranslated
10
1...167168169170171...406
Page