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

tanstack-querymindrally/skillsBest practices for TanStack Query v5 (React Query) server state management, including query key factories, the queryOptions helper, mutations, optimistic updates, infinite queries, and Suspense mode. Use when fetching or caching server data in React, writing custom query/mutation hooks, setting up a QueryClient, implementing optimistic updates, or migrating v4 patterns to v5.733 sveltekitmindrally/skillsExpert guidance for SvelteKit development with TypeScript, Tailwind CSS, SSR/SSG, and performance optimization best practices732 no-use-effectalejandrobailo/…e-effectALWAYS ACTIVE. Enforces a strict no-direct-useEffect rule in React and React Native code. Never write useEffect directly — use derived state, event handlers, useMemo, useSyncExternalStore, data-fetching libraries, key-based resets, or useMountEffect instead. Triggers on all React component code: writing new components, editing existing ones, reviewing code, fixing bugs, or refactoring. Also triggers when user mentions useEffect, side effects, data fetching, state sync, or component lifecycle.732 soliditymindrally/skillsBest practices for secure, gas-efficient Solidity smart contract development and Web3 frontend integration. Use when writing or reviewing Solidity contracts, hardening against reentrancy and access-control bugs, optimizing gas usage, setting up Hardhat/Foundry testing and static analysis, or wiring a React frontend to wallets, providers, and on-chain transactions.731 shadcnpproenca/dot-skillsshadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.729 syncfusion-react-diagramsyncfusion/reac…s-skillsCreate and customize visual diagrams in React using Syncfusion Diagrams. Trigger for requests involving React component setup, nodes and connectors, flowcharts, org charts, process diagrams, BPMN or UML models, ER diagrams, layout algorithms, swimlanes, symbol palettes, and interactive diagram visualization features.727 foundation-lean-canvasproduct-on-purpose/pm-skillsProduces a one-page lean canvas across nine interlocking blocks (problem, customer, UVP, solution, channels, revenue, cost, metrics, unfair advantage) with optional inline HTML and SVG visual rendering. Use when framing a new product thesis, stress-testing an existing strategy, comparing strategic options side-by-side, or aligning a team on business-model assumptions. Works as a strategic hub that cross-links to deeper PM skills without duplicating them.727 auth0-vueauth0/agent-skillsUse when adding Auth0 login, logout, protected routes, or user sessions to a Vue 3 SPA. Integrates @auth0/auth0-vue — use even if the user says "add login to my Vue app" or "protect my Vue routes" without naming the SDK.727 syncfusion-react-licensesyncfusion/reac…s-skillsUse this skill when the user asks about Syncfusion React licensing, license keys, license registration, license validation errors, trial licenses, or license troubleshooting. This skill provides comprehensive guidance on generating, registering, and managing Syncfusion license keys for React applications, including edition-based and platform-based licensing models, registration methods, CI/CD integration, and resolving common licensing errors.726 vuetify0vuetifyjs/0Use when building Vue 3 UI with @vuetify/v0, or before hand-rolling behavior it already ships, such as a button, dialog, popover, setTimeout timer, selection, form, registry, virtual list, focus handling, snackbar, theme, RTL, breakpoints, an SSR window check, or a WAI-ARIA compound, along with the rest of its components, composables, and utilities.725 gsap-reactbbeierle12/skil…p-claudeGSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.725 frontend-architecturemanutej/luxor-c…ketplaceComponent architecture, design patterns, state management strategies, module systems, build tools, and scalable application structure724 agent-elements21st-dev/agent-elementsUse whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/components/agent-elements/*` or the project has that folder on disk. Triggers: "agent chat", "tool call UI", "streaming chat", "plan approval", "AgentChat", "InputBar", "tool renderer", mentions of Agent Elements, or requests to add a new agent surface with shadcn. Do NOT use for plain chat UIs that don't need tool/plan/approval cards, or for projects already committed to a different agent UI kit.724 syncfusion-react-tabssyncfusion/reac…s-skillsImplement and customize Tab components in Syncfusion React applications. Use this skill whenever the user needs to create tabbed interfaces, manage tab content rendering, configure header positioning, enable drag-and-drop reordering, or customize tab styling. Essential for building navigation layouts, content organization, responsive tab controls, localized tabs, and accessible tab interactions.723 syncfusion-react-kanbansyncfusion/reac…s-skillsImplement Syncfusion React Kanban component for flexible task management and workflow visualization. Use this when building kanban boards, workflow stages, or card-based task management systems. This skill covers drag-and-drop card operations, swimlane organization, WIP limit validation, custom card templates, event handling, and API data binding for React applications.723 syncfusion-react-chat-uisyncfusion/reac…s-skillsImplement the Syncfusion React Chat UI component. Use this skill to create and customize messaging interfaces, including chat setup, message rendering, file attachments, typing indicators, conversation layout, theming, event handling, and real-time updates in React applications.723 react-hook-form-zodovachiever/droid-tingsBuild type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with full TypeScript type inference via z.infer. Use when: building forms with validation, integrating shadcn/ui Form components, implementing multi-step wizards, handling dynamic field arrays with useFieldArray, or fixing uncontrolled to controlled warnings, resolver errors, async validation issues.723 postcss-best-practicesmindrally/skillsPostCSS best practices and configuration guidelines for modern CSS processing and optimization722 css-nativedylantarre/anim…inciplesUse when implementing Disney's 12 animation principles with pure CSS animations and transitions722 emdash-cmsreason-machines/trending-skillsAI coding agent skill for building with EmDash, the full-stack TypeScript CMS built on Astro and Cloudflare722 syncfusion-react-ai-assistviewsyncfusion/reac…s-skillsImplement the Syncfusion React AI AssistView component. Use this skill to handle AI-powered conversational interfaces, AssistView setup, conversation flow, speech input or output, file attachments, UI customization, state management, chain of thoughts reasoning visualization, generative UI with dynamic tools, AI telemetry and usage tracking, prompt-editor mentions, and AI service integration such as OpenAI or Azure AI in React applications.720 syncfusion-react-barcodesyncfusion/reac…s-skillsGenerate, customize, and export barcodes in React using Syncfusion BarcodeGenerator. Trigger for requests involving Code39 or Code128 barcodes, QR codes, Data Matrix generation, barcode styling (size, color, text, margins), React component setup, props or events, SVG or canvas rendering, and exporting or printing barcode images.719 syncfusion-react-pivot-tablesyncfusion/reac…s-skillsUse this skill when users ask how to build or customize Syncfusion PivotView pivot tables in React. Trigger for React pivot grid/OLAP, aggregation, data binding (JSON/remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. React-only, not Angular/Vue/Blazor.717 syncfusion-react-dashboard-layoutsyncfusion/reac…s-skillsBuild responsive, interactive dashboard layouts with Syncfusion React Dashboard Layout component. Implement draggable and resizable panels, responsive grid systems, dynamic panel management, and state persistence. This skill covers multi-column layouts, floating panel arrangement, extensive customization, drag-drop panel rearrangement, and state management for React applications.717 syncfusion-react-query-buildersyncfusion/reac…s-skillsComprehensive guide to implementing Syncfusion React Query Builder component. Use this skill when building advanced filter interfaces, creating complex data query systems, or implementing dynamic rule-based filtering. This skill covers query builder configuration, SQL query conversion, drag-and-drop filtering, customization, and state management.716 syncfusion-react-mapssyncfusion/reac…s-skillsImplement Syncfusion React Maps component for geographical data visualization. Use this when displaying interactive maps, location-based information, or regional data analysis. This skill covers map providers (Bing, OpenStreetMap), GeoJSON rendering, markers and bubbles, zooming/panning, data labels, legends, and choropleth visualizations in React applications.716 bomaklofas/kicad-happyBOM (Bill of Materials) management for electronics projects — the workflow skill that coordinates DigiKey, Mouser, LCSC, element14, JLCPCB, PCBWay, and KiCad skills around a unified BOM lifecycle. Create, update, and maintain BOMs with part numbers, costs, quantities stored as KiCad symbol properties. ALWAYS trigger this skill for any task involving component sourcing, pricing, ordering, distributor searches, BOM export, or fabrication preparation — even if the user names a specific distributor or fab house (e.g. "search DigiKey for...", "generate JLCPCB BOM", "order from Mouser"). This skill analyzes the schematic for sourcing gaps, recommends which distributor/fab skills to call for each gap, and writes results back as symbol properties — the agent (or user) performs the actual searches via the called skills. Also trigger on phrases like "what parts do I need", "order components", "how much will this cost", "export for JLCPCB", "find parts for this board", "compare pricing", or "check stock".716 angular-developmentmindrally/skillsExpert guidance for Angular and TypeScript development focused on scalable, high-performance web applications715 nextjs16-skillsgocallum/nextjs…t-skillsKey facts and links for Next.js 16. Use for planning, writing, and troubleshooting Next.js 16 changes.715 syncfusion-react-blockeditorsyncfusion/reac…s-skillsImplement the Syncfusion React BlockEditor component for block-based content editing. Use this skill for block-based rich content editing, document creation, CMS interfaces, markdown alternatives, editor setup, block configuration, toolbar or menu customization, drag-and-drop behavior, formatting options, APIs, accessibility, real-time collaborative editing with Yjs integration, user presence and remote cursors, document version history and snapshot management in React.714