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

algolia-searchsickn33/agentic…e-skillsExpert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning663 syncfusion-react-progress-barsyncfusion/reac…s-skillsImplement Syncfusion React Progress Bar for visual feedback. Use this skill whenever users need to display progress indicators, loading states, file uploads, data processing, or task completion in React applications. Trigger when user mentions progress bars, loading spinners, progress indicators, determinate/indeterminate states, circular/linear progress, or any progress visualization scenario.662 syncfusion-react-splittersyncfusion/reac…s-skillsImplement Syncfusion React Splitter component for flexible, resizable panel layouts. Guide covers layout configuration, pane sizing, collapse/expand, resize events, content types, accessibility, and RTL support. Use this skill when building multi-panel interfaces with dynamic resizing capabilities.661 hig-components-statusraintree-technology/hig-doctorApple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state," "should I use a spinner or progress bar," "what goes in the status bar," or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.659 syncfusion-react-circular-gaugesyncfusion/reac…s-skillsImplement Syncfusion React Circular Gauge for displaying KPIs, sensor data, speedometers, and real-time monitoring dashboards. Use this skill when users need to visualize quantitative measurements on a circular scale. Covers axes, pointers, ranges, customization, animations, print/export, accessibility, and internationalization.659 pr-openbklit/bklit-uiOpen a pull request the bklit-ui way: stage and commit with pre-commit hooks, run ultracite from the repo root, rebuild the shadcn registry, run a production test build, fix failures, push, and create a PR with a structured summary. Use when the user asks to commit, push, open a PR, "ship it", or run the full pre-PR checklist.659 syncfusion-react-sankeysyncfusion/reac…s-skillsImplement Syncfusion React Sankey Chart to visualize energy flows, process dependencies, and hierarchical relationships between nodes. Use this skill when creating Sankey diagrams, flow visualizations, or node-link networks. Covers installation, nodes and links configuration, labeling, legends, tooltips, events, appearance customization, RTL support, accessibility, and export features.658 syncfusion-react-steppersyncfusion/reac…s-skillsImplement and configure the Syncfusion React Stepper component for guided workflows. Use this skill when creating step-by-step navigation flows, multi-step forms, wizards, or process guides in React. This skill covers step configuration, orientation (horizontal/vertical), events, validation, animations, templates, accessibility, and globalization support for linear or non-linear workflows.657 fluid-functionalismmickadesign/flu…ionalismBuild React UIs with Fluid Functionalism — a shadcn/ui registry (@fluid) of animated components with a shared motion system: three spring speeds, a hover highlight that glides from item to item under the cursor, labels that change weight without layout shift. Use whenever the user mentions Fluid Functionalism, @fluid, or fluidfunctionalism.com, asks for UI with satisfying/fluid/polished motion in a React, Next.js, shadcn, Radix, or Base UI project, builds any interface (settings dialogs, sidebars, command menus, chat UIs, forms, lists, tables) in a project with @fluid components installed, asks to review/audit existing UI motion against the system, or asks to update installed @fluid components or what changed in a release. Also use before hand-writing animation code (hover highlights, icon swaps, weight changes, enter/exit transitions, page reveals, skeleton loading) there, so custom code follows the system instead of inventing timings. Bundled scripts read the stack fresh each run and write nothing.657 syncfusion-react-range-navigatorsyncfusion/reac…s-skillsImplements the Syncfusion React Range Navigator component for scrolling and navigating through data with range selection. Use this when users need time-based navigation, financial data visualization, or chart integration with a range selector control. Supports numeric, logarithmic, and DateTime data binding, multiple series types, period selector, lightweight mode, tooltips, RTL, and export/print functionality.656 syncfusion-react-markdown-convertersyncfusion/reac…s-skillsImplement the Syncfusion Markdown Converter in React to convert Markdown text into clean HTML. Use this when converting Markdown to HTML in React, integrating a live Markdown preview with the Rich Text Editor in Markdown mode, configuring GFM or line break options, or working with MarkdownConverter.toHtml() and MarkdownConverterOptions. This skill covers the @syncfusion/ej2-markdown-converter package and Markdown Editor integration with HTML preview in React applications.656 hig-components-searchraintree-technology/hig-doctorApple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should search work in my app," "I need a breadcrumb," "how do I paginate content," or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.656 syncfusion-react-linear-gaugesyncfusion/reac…s-skillsImplement Syncfusion React Linear Gauge for displaying measurements on a linear scale. Use this skill when users need temperature sensors, KPI indicators, progress gauges, or real-time monitoring dashboards. Covers axes configuration, pointer types, ranges, annotations, customization, animations, print/export, accessibility, and internationalization.655 add-uialadicf/better-web-uiGenerate 5 distinct, production-grade UI variations for a requested new or existing section, component, page, flow, or shell, then help the user preview and apply one. Use when the user asks to add or redesign UI like a hero, pricing, navbar, auth flow, dashboard shell, ecommerce surface, or data component.655 hig-inputsraintree-technology/hig-doctorApple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: "gesture design", "Apple Pencil", "keyboard shortcuts", "game controller", "pointer support", "mouse support", "trackpad", "Digital Crown", "eye tracking", "visionOS input", "focus system", "remote control", "gyroscope", "spatial interaction". Also use when the user says "what gestures should I support," "how do I add keyboard shortcuts," "how does input work on Apple TV," "should I support Apple Pencil," or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.655 syncfusion-react-treemapssyncfusion/reac…s-skillsComprehensive guide for implementing Syncfusion React TreeMap component. Use this skill when users need help creating hierarchical data visualizations, configuring drill-down interactions, applying color mapping, working with multiple hierarchy levels, customizing leaf items, or troubleshooting TreeMap data binding and display issues. Covers installation, data binding patterns, layouts, legends, tooltips, selection, accessibility, and advanced customization for interactive hierarchical data exploration.654 onchainkitmindrally/skillsExpert guidance for building onchain applications with OnchainKit SDK components and utilities652 hig-components-systemraintree-technology/hig-doctorApple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: "widget design", "live activity", "notification design", "complication", "home screen quick action", "top shelf", "watch face", "app clip", "app shortcut", "system experience". Also use when the user says "how do I design a widget," "what should my notification look like," "how do Live Activities work," "should I make an App Clip," or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.650 browser-bridgecodestable/codestable通过 Chrome 扩展控制真实浏览器。需要访问网页、抽取网页数据、点击按钮、填写表单、执行浏览器自动化、提取渲染后的组件证据，或以程序方式操作页面时使用。通过 DOM diff、简化 HTML 和 component evidence pack 返回节省 token 的结构化结果。适用于 browser control、web automation、page scraping、web data extraction、execute JS in browser、web_scan、web_execute_js、open browser、navigate to URL、get page content、fill form、click button、extract component、rendered DOM、computed styles、component evidence。649 tailwindpproenca/dot-skillsTailwind CSS v4 performance optimization and best practices guidelines (formerly tailwindcss-v4-style). This skill should be used when writing, reviewing, or refactoring Tailwind CSS v4 code to ensure optimal build performance, minimal CSS output, and correct usage of v4 features. Triggers on tasks involving Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.648 w-v0blockmatic-icebox/basilic-skillsDraft a Next.js and shadcn v0.dev prompt from the current file and wait for OPEN, EDIT, or CANCEL.647 w-shadcnblockmatic-icebox/basilic-skillsInstall shadcn/w-ui primitives in the shared UI package using monorepo import paths.647 w-formblockmatic-icebox/basilic-skillsBuild a Next.js form using the app's existing mutation path, not a second stack.647 shadcn-component-reviewmattbx/shadcn-skillsReview custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token usage, and Radix/Base UI composition patterns. Use PROACTIVELY after writing or modifying any custom UI component, page layout, or variant of a shadcn component. Use when the user says "review this component", "check my spacing", "does this follow shadcn patterns", "audit this layout", "is this shadcn-idiomatic", or shares a component for feedback. Catches spacing drift, hardcoded colors, missing data-slot attributes, inconsistent theme application, and composition anti-patterns that shipping-fast-with-AI tools often miss.644 observer-patternpatternsdev/skillsTeaches the observer pattern for event-driven communication. Use when you need decoupled publish/subscribe behavior where multiple parts of your system react to state changes or events.639 vite-react-best-practicesclaudiocebpaz/v…racticesComprehensive React and Vite SPA performance, architecture, and deployment guidelines. Use this skill when building, reviewing, or refactoring React applications built with Vite (SPA). Covers Vite-specific build configurations, static hosting requirements, and core React performance patterns.639 frontend-patternsdavila7/claude-…emplatesFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.638 vue3partme-ai/full-…k-skillsGuidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.637 troubleshooting-astro-deploymentsastronomer/agentsTroubleshoot Astronomer production deployments with Astro CLI. Use when investigating deployment issues, viewing production logs, analyzing failures, or managing deployment environment variables.635 grade-systemgasserane/perso…l-skillsApply substantive quality and reliability grading to Ane's MEL/SRHR system (Ann/Vi/Li/Researcher team + wiki + harness + three-repo architecture): letter grades on 9 components and 10 dimensions plus OECD-DAC adapted criteria, three concrete risks, what an external evaluator would still want, and recommendations for moving the grade, with a mandatory self-grading bias note. Use when Ane types /grade-system, /grade, /quality-grade, /rate-system, or asks how good the system is. Honest grading, not flattery. Different from /system-audit (finds specific issues to fix; this grades overall quality posture).633