前端开发 Skills - 前端开发 Agent Skills推荐与安装 - 第32页 - AI导哈

saas-scaffolderalirezarezvani/…e-skillsGenerates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.633 syncfusion-react-listviewsyncfusion/reac…s-skillsImplement Syncfusion React ListView component for displaying dynamic lists with single/multiple selection, templates, filtering, grouping, drag-drop, and virtualization. Use this when you need list visualization, item management, selection handling, custom templates, and data filtering. Supports local/remote data binding, checkboxes, animations, RTL, and accessibility features.632 syncfusion-react-cardssyncfusion/reac…s-skillsBuild flexible card layouts for displaying content in React. The Card component is a lightweight container that supports headers, images, action buttons, horizontal layouts, and integration with other Syncfusion components. Use this skill whenever the user needs to create cards, build card-based UIs, display content cards, add action buttons to cards, customize card layouts, or embed components within cards.632 performance-lighthouse-runnerjeremylongshore/tons-of-skills-marketplaceManage performance lighthouse runner operations. Auto-activating skill for Frontend Development. Triggers on: performance lighthouse runner, performance lighthouse runner Part of the Frontend Development skill category. Use when working with performance lighthouse runner functionality. Trigger with phrases like "performance lighthouse runner", "performance runner", "performance".632 react-flow-advancedexistential-birds/beagleAdvanced React Flow patterns for complex use cases. Use when implementing sub-flows, custom connection lines, programmatic layouts, drag-and-drop, undo/redo, or complex state synchronization.631 syncfusion-react-accordionsyncfusion/reac…s-skillsGuide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.629 motion-dev-animations199-biotechnologies/motion-dev-animations-skillCreates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects. Use when user requests animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animations, animated UI, micro-interactions, page transitions, or layout animations. Generates production TypeScript/JSX code with accessibility (prefers-reduced-motion) and performance validation (≥60fps). Supports entrance animations, gesture interactions (hover/tap/drag), scroll-based reveals, and layout transitions using spring physics and natural timing. Do NOT use for CSS-only transitions (use native CSS), static sites without JavaScript, Vue animations (use motion-v variant instead), or SVG/Canvas complex animations (GSAP better suited).627 syncfusion-react-context-menusyncfusion/reac…s-skillsImplements Syncfusion React ContextMenu (SfContextMenu) for right-click interactions and context-sensitive popup menus. Use this when adding menu items, handling selection events, or customizing templates and styling. Covers setup, data binding, accessibility, keyboard navigation, common methods and properties, and integration patterns.624 syncfusion-react-menusyncfusion/reac…s-skillsCreate and configure the Syncfusion React Menu navigation component for hierarchical menu structures, dropdowns, and context menus. Use this skill whenever the user needs to implement menus, navigation bars, dropdown menus, hamburger menus, mobile menus, sub-menu positioning, menu item interactions, data-binding menus, RTL menu layouts, menu customization with icons/separators, event handling, or advanced features like scrollable menus, persistence, and item state management.623 thinking-systemstjboudreaux/cc-…g-skillsWhen behavior is emergent across components—fixes elsewhere break, loops/delays dominate—map boundary, stocks/flows, feedback, archetypes, then rank leverage.622 provider-patternpatternsdev/skillsTeaches the provider pattern for sharing data across component trees. Use when multiple nested components need access to the same data and prop drilling becomes unwieldy.621 nitro-fetchmargelo/react-n…e-skillsFast native networking primitives for React Native built on Nitro Modules — react-native-nitro-fetch, react-native-nitro-websockets, and react-native-nitro-text-decoder. Covers the fetch API, global replacement, prefetching and cold-start cache warming, the NitroWebSocket class and pre-warming, migrating from React Native's built-in WebSocket, the in-process NetworkInspector, native Perfetto / Instruments tracing, the native TextDecoder, and plugging nitro-fetch into axios via a custom adapter.621 syncfusion-react-toolbarsyncfusion/reac…s-skillsImplement the Syncfusion React Toolbar component to create responsive command bars and action toolbars. This skill covers organizing buttons, separators, and input components with various overflow handling modes. Use this when building rich text editors, document editors, or command-driven interfaces in React applications.621 avalonia-layout-zafirosickn33/agentic…e-skillsGuidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.621 undocshairyf/skillsMinimal Documentation Theme and CLI for shared usage across UnJS projects. Use when creating documentation sites with Nuxt, Nuxt Content, and Nuxt UI.620 datasheetsaklofas/kicad-happyExtract structured specifications from electronic component datasheet PDFs — pinouts, electrical characteristics, peripherals, topology, and features. Cache extractions per project for consumption by schematic and PCB analyzers. Primary consumer infrastructure for `kicad`, `emc`, `spice`, and `thermal` analyzers. Use this skill whenever the user asks to extract, verify, or read specs from a component datasheet; when analyzers need verified IC knowledge (EN pin thresholds, PG presence, USB peripheral speed); or when a review mentions datasheet coverage, extraction quality, or per-MPN specifications. Also triggers on "extract this datasheet", "what are the specs for MPN X", "verify datasheet extraction", or "check pin functions for part Y".616 stripe-integration-expertalirezarezvani/…e-skillsProduction-grade Stripe integrations: subscriptions with trials and proration, one-time payments, usage-based billing, checkout sessions, idempotent webhook handlers, customer portal, and invoicing. Covers Next.js, Express, and Django patterns. Use when integrating Stripe for the first time, debugging webhook reliability issues, migrating from a different payment provider, or adding usage-based billing to an existing subscription product.615 nuxt-i18nonmax/nuxt-skillsInternationalize Nuxt applications with @nuxtjs/i18n. Use when configuring locales or browser detection, translating messages or routes, building locale switchers, handling fallbacks, lazy-loading messages, or adding locale SEO.614 shadersshader-effects-…/shadersBuild WebGPU visual effects with the Shaders component library (npm `shaders`) in React, Vue, Svelte, Solid or vanilla JS. Use when a user asks for a shader, animated background, gradient, aurora, blur, glass, distortion, noise, particles, glow, transition, cursor effect, or any GPU-rendered visual on a web page, or mentions shaders.com, the Shaders CLI, presets, or the design editor.614 angular-ui-patternssickn33/agentic…e-skillsModern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.613 tailwind-4prowler-cloud/prowlerTailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).612 otel-ottldash0hq/agent-skillsOpenTelemetry Transformation Language (OTTL) expert. Use when writing or debugging OTTL expressions for any OpenTelemetry Collector component that supports OTTL (processors, connectors, receivers, exporters). Triggers on tasks involving telemetry transformation, filtering, attribute manipulation, data redaction, sampling policies, routing, or Collector configuration. Covers syntax, contexts, functions, error handling, and performance.612 cc-skill-coding-standardssickn33/agentic…e-skillsUniversal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.610 mediator-patternpatternsdev/skillsTeaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct coupling between them creates complexity or tight dependencies.609 publish-substack-articlesugarforever/01…t-skillsPublish Markdown articles to Substack as drafts. Use when user wants to publish a Markdown file to Substack, or mentions "发布到 Substack", "Substack article", "publish to Substack". Handles Markdown-to-HTML conversion and saves as draft (never auto-publish).605 airflow-pluginsastronomer/agentsBuilds Airflow 3.1+ plugins that embed FastAPI apps, custom UI pages, React components, middleware, macros, and operator links directly into the Airflow UI. Use when building anything custom inside Airflow 3.1+ that involves Python and a browser-facing interface - creating an Airflow plugin, adding a custom UI page or nav entry, building FastAPI-backed endpoints inside Airflow, serving static assets from a plugin, embedding a React app, adding middleware to the API server, creating custom operator extra links, or calling the Airflow REST API from inside a plugin; also when AirflowPlugin, fastapi_apps, external_views, react_apps, or plugin registration come up.603 next-intl-app-routerliuchiawei/agent-skillsConfigures and uses next-intl for Next.js App Router with locale-based routing. Use when adding or changing i18n, locale routing, translations, next-intl plugin, middleware/proxy, or message files in Next.js App Router projects.601 frontend-accessibilityaj-geddes/usefu…-promptsImplement WCAG compliance using semantic HTML, ARIA, keyboard navigation, and screen reader support. Use when building inclusive applications for all users.601 tamaguitamagui/tamaguiUniversal React UI framework for web and native with flat conditional values. Use when building cross-platform apps with Tamagui, writing styled components, or applying tokens, themes, animations, and media queries.599 livewire-developmentspatie/freek.devDevelops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.598