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

react-usehairyf/skillsCollection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management846 konsta-uicap-go/capgo-skillsBuilds Capacitor app UI with Konsta UI v5 (Tailwind CSS v4-based iOS and Material components for React 19, Vue 3, Svelte 5) - CSS-first setup (`@import 'tailwindcss'; @import 'konsta/react/theme.css';`), `--color-brand-*` colors in `@theme`, `<App theme="ios|material|parent" safeAreas dark>`, `KonstaProvider` when mixing with Ionic, `ios:`/`material:` variants, `pt-safe`/`no-safe-areas` utilities, `k-md-vibrant`/`k-md-monochrome`, and migrating from Konsta v3/v4 `konstaConfig` in `tailwind.config.js`. Use when installing or upgrading Konsta, components render unstyled, theme or dark mode does not switch, or Navbar/Tabbar overlap system bars. Do not use for Ionic components (ionic-design), plain Tailwind setup without Konsta (tailwind-capacitor), or native safe-area/edge-to-edge config (safe-area-handling).843 truesheet-usagelodev09/react-n…ue-sheetConsumer-side guide for integrating @lodev09/react-native-true-sheet into a React Native app. Use this skill whenever the user wants to add, configure, control, or debug a bottom sheet using TrueSheet — including ref-based sheets, named global sheets, web support with TrueSheetProvider/useTrueSheet, React Navigation or Expo Router sheet flows, Reanimated-driven animations, scrolling content, stacking, headers/footers, detents, peeking, side sheets, keyboard handling, dimming, backgrounds, liquid glass, and Jest testing. Also use when the user is migrating from v3 to v4, troubleshooting layout or gesture issues, or asking about any TrueSheet prop, event, or method — even if they don't mention "TrueSheet" by name but describe a bottom sheet in a React Native context.843 specsfy-aux-stackpromovaweb/specsfyMonitorar manifests e arquivos estruturais para criar ou atualizar .specsfy/STACK.md de forma aditiva. Use quando o monitor de contexto apontar stack pendente; quando framework, linguagem, runtime, pacote estrutural, ferramenta de teste ou persistência mudar; quando a documentação técnica estiver incompleta; ou após adicionar Laravel, Next.js, Astro ou dependências relevantes. Preserva conteúdo humano existente.842 framer-motion-reactc-jeril/framer-…n-skillsOfficial Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.841 plannotator-annotatebacknotprop/plannotatorOpen Plannotator's annotation UI for a markdown file, HTML file, URL, or folder and then respond to the returned annotations.841 component-canvasibelick/ui-skillsBuild a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.841 effect-best-practicesmakisuo/skillsEnforces Effect-TS patterns for services, errors, layers, and atoms. Use when writing code with Effect.Service, Schema.TaggedError, Layer composition, or effect-atom React components.840 pump-analyzer-solanareason-machines/trending-skillsReal-time monitoring and analytics platform for Pump.fun tokens on Solana using WebSockets, HTML/CSS/JS840 nextjs-shadcnlaguagu/claude-…s-skillsBuilds distinctive Next.js interfaces with shadcn/ui, choosing typography, styling and purposeful visual effects for the product. Use when creating or polishing a Next.js + shadcn app, page or component, including themes, presets, backgrounds and design-system lint. Uses frontend-design for substantial visual direction and icons for asset sourcing.838 ghostmindrally/skillsGhost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization837 ss-componentbitjaru/styleseedGenerate a new UI component following the StyleSeed design conventions836 motionmotiondivision/ai-kitAnimation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits with Performance Doctor fixes, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing or fixing slow animations, performance, jank or layout thrash via code or runtime, searching Motion docs or examples, adding, inserting or building a Motion component or Motion UI section, or upgrading between Motion versions.835 vitemindrally/skillsExpert guidance for Vite development with modern build tooling, HMR, framework integrations, and performance optimization835 creating-pluginsemdash-cms/skillsCreate EmDash CMS plugins with sandboxed hooks, routes, storage, content and media APIs, MCP tools, and declarative admin UI, or native React and Astro extensions. Use when scaffolding or implementing an EmDash plugin.835 add-componentsignerlabs/ship…t-skillsAdd a SwiftUI component from ShipSwift recipes. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.834 syncfusion-react-gridsyncfusion/reac…s-skillsImplements Syncfusion React Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.832 angularmindrally/skillsExpert in Angular TypeScript development with scalable, high-performance patterns832 react-flowframara/react-flow-skillExpert guidance for React Flow (@xyflow/react): building interactive node-based graphs, custom nodes and edges, handles, state management, layouting, TypeScript patterns, performance optimization, accessibility, SSR, and theming. Use when writing React Flow code, creating custom nodes or edges, debugging flow issues, optimizing graph performance, integrating with Zustand, or building canvas-based UIs with React Flow.830 arkts-syntax-assistantsummerkaze/skil…ssistantArkTS syntax, migration, and optimization guide for HarmonyOS/OpenHarmony development. Triggers on: .ets files, ArkTS keywords, HarmonyOS/OpenHarmony context, @ohos packages. Help with syntax reference, TypeScript migration, performance optimization, compile errors, state management, component development, and language-specific questions.826 electron-best-practicesjwynia/agent-skillsGuide AI agents through Electron app development with React including security patterns, type-safe IPC, React integration, packaging with code signing, and testing. Keywords: electron, electron-vite, electron-forge, contextBridge, IPC, security, react, packaging, code signing, notarization, playwright, desktop app.824 billing-sdkdodopayments/skillsBillingSDK, the open-source React and shadcn component library for Dodo Payments billing UI. Use when building pricing tables, pricing pages, account billing pages, usage meters, credit balances, invoice history, or cancel and upgrade UI in React or Next.js, or running @billingsdk/cli init; keep Dodo API calls server-side.821 app-store-screenshots-generatorreason-machines/trending-skillsGenerate production-ready App Store screenshots for iOS apps using AI agents, Next.js, and html-to-image821 game-object-componentsphaserjs/phaserUse this skill when working with Phaser 4 game object components and the mixin system. Covers Transform, Alpha, Tint, Origin, Depth, Flip, Mask, GetBounds, Lighting, and other shared component behaviors. Triggers on: component, mixin, transform, mask, bounds, lighting.819 three-jsmindrally/skillsExpert guidance for Three.js and React Three Fiber development with modern React, TypeScript, and performance best practices814 gsap-awwwards-websiterebyteai-template/rebyte-skillsSPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.813 netsuite-uif-spa-referenceoracle/netsuite…loud-sdkUse when building, modifying, or debugging NetSuite UIF SPA components. Provides API/type lookup for `@uif-js/core` and `@uif-js/component` (constructors, methods, props, enums, hooks, and component options).813 tailwind-v4existential-birds/beagleTailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.812 inngest-realtimeinngest/inngest-skillsUse when streaming durable workflow updates to a UI in real time — live order status pages that animate as steps complete, AI agent token streaming from a function to the browser, log tailing for long-running jobs, or human-in-the-loop approval flows that publish a prompt and wait for a user reply. Covers Inngest v4 native realtime: defining typed channels, publishing from inside step.run, minting subscription tokens via server actions, and consuming the stream from React/Next.js client components.811 blazormindrally/skillsGuidelines for Blazor development including component lifecycle, state management, and performance optimization809