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

shadcn-uinexu-io/open-designBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.2905 portable-text-serializationsanity-io/agent-toolkitRender and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues with marks, blocks, lists, or custom types.2904 trigger-realtimetriggerdotdev/skillsTrigger.dev client/frontend surface: subscribe to runs in realtime (runs.subscribeToRun and the @trigger.dev/react-hooks hook useRealtimeRun), consume metadata and AI/text streams in React (useRealtimeStream), trigger tasks from the browser (useTaskTrigger, useRealtimeTaskTrigger), and mint scoped frontend credentials with auth.createPublicToken / auth.createTriggerPublicToken. Load when wiring a frontend (React/Next.js/Remix) or backend-for-frontend to show live run progress, status badges, token streams, trigger buttons, or wait-token approval UIs. NOT for writing the backend task itself (streams.define / metadata.set is trigger-tasks territory); this is the consumer side.2903 react-vite-best-practicesasyrafhussin/ag…t-skillsReact and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy loading, HMR, bundle size, or React performance.2887 liquid-theme-a11ybenjaminsehl/li…d-skillsImplement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.2883 frontend-slidesnexu-io/open-designGenerate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.2880 chakra-ui-refactorchakra-ui/chakra-uiReview, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like "is this correct", "what's wrong with this", "review my component", "refactor this", "clean up", "convert", or "chakra-ify this" — even without the words "review" or "refactor". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.2878 web-artifacts-buildernexu-io/open-designBuild complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.2877 frontend-devnexu-io/open-designFull-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.2855 motion-uiaffaan-m/eccProduction-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.2842 react-best-practicesmastra-ai/mastraReact performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.2835 bunbrianlovin/agent-configUse Bun instead of Node.js, npm, pnpm, or vite. Provides command mappings, Bun-specific APIs, and development patterns.2808 emilkowal-animationspproenca/dot-skillsEmil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.2800 artifacts-buildernexu-io/open-designSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).2797 nuxt-modulesonmax/nuxt-skillsUse when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.2792 copilotkit-developcopilotkit/copilotkitUse when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.2783 react-doctorbrianlovin/agent-configDiagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.2772 release-notes-one-pagernexu-io/open-designRelease notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details.2765 react-corecopilotkit/copilotkit@copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, drop in CopilotChat/CopilotPopup/CopilotSidebar (v2 chat components ship from react-core/v2 — NOT react-ui, which is CSS-only in v2), access and subscribe to agents with useAgent / useAgentContext / useCapabilities, switch between multiple agents, manage durable Intelligence threads with useThreads, register browser-side tools via useFrontendTool, render tool calls with useRenderTool / useComponent / useDefaultRenderTool, gate execution with useHumanInTheLoop, wire file attachments with useAttachments, configure suggestion pills, and register activity- and custom-message renderers. Load the reference under references/ that matches your task.2764 sentrybrianlovin/agent-configSentry error monitoring and performance tracing patterns for Next.js applications.2753 color-expertmeodai/skill.co…r-expertUse when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory."2705 micro-interactioniart-ai/web-ani…n-skillsThis skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.2701 article-magazinenexu-io/open-designHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.2696 experience-lwc-base-components-integrateforcedotcom/sf-skillsPick the right Lightning Base Component (`lightning-*`) for a given UI task, retrieve its full API (props, methods, events, slots) from the bundled per-component reference, and wire it into an LWC (LWC `.html`, `.js`, and `.css` files) without breaking SLDS. Use this skill when users say "I need a Lightning modal / datatable / combobox / record form", ask which `lightning-*` component fits a use case, want a shortlist of LBC candidates, are about to hand-roll a UI that a base component already provides, or are editing an LWC bundle's `.html` / `.js` / `.css` and need to select or wire a base component. Also triggers on "Lightning base component", "LBC", "lightning-combobox", "lightning-datatable", "use `lightning-` tag". DO NOT TRIGGER for applying SLDS design tokens, blueprints, or styling guidance in general — that is `design-systems-slds-apply`; this skill only selects and wires `lightning-*` base components.2689 deck-open-slide-canvasnexu-io/open-designLocked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.2686 playwriterbrianlovin/agent-configControl the user's currently open Chrome tab through the Playwriter CLI (no new browser launch). Use when you need to inspect live UI state, run scripted browser actions, capture console output, or reproduce frontend issues directly in the user's tab.2682 experience-lwr-site-generateforcedotcom/sf-skillsCreates, modifies, or manages Salesforce Experience Cloud LWR sites via DigitalExperience metadata. Always trigger when the tasks involve LWR sites configurations, e.g. creating/modifying pages/routes/views/theme layouts/branding sets, previewing sites, or creating/modifying guest sharing rule (metadata type sharingGuestRules)/guest user access/sharing records to guest users, or when user provides a guest user ID (15 or 18 characters starting with 005). NEVER trigger for React or any other ui bundle framework. LWR sites ONLY.2681 i18n-expertdaymade/claude-…e-skillsThis skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.2677 tailwind-v4-shadcnjezweb/claude-skillsSet up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.2647 react-devtoolscallstackincubator/agent-react-devtoolsReact DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose render performance, profile re-renders, find slow components, or understand why something re-renders. Triggers include "why does this re-render", "inspect the component", "what props does X have", "profile the app", "find slow components", "debug the UI", "check component state", "the app feels slow", or any React runtime debugging task.2646