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

angular-best-practices-ngrxalfredoperez/an…racticesNgRx state management best practices for Angular. Covers pure reducers, action groups, entity adapter, selectors, and signal-based selection. Activates when working with @ngrx/store, @ngrx/effects, and @ngrx/entity. Do not use for Akita, NGXS, or standalone signal-based state. Install alongside angular-best-practices for full coverage.596 auth0-nuxtauth0/agent-skillsUse when adding Auth0 login, logout, session management, or protected routes to a Nuxt 3 or Nuxt 4 application. Integrates @auth0/auth0-nuxt — use even if the user says "add login to my Nuxt app".594 wechat-miniprogramjoneqian/claude…ls-suiteWeChat Mini Program development framework. Use for building WeChat mini apps, WXML templates, WXSS styles, WXS scripting, component development, and WeChat API integration.593 orvalorval-labs/orvalGenerate type-safe API clients, TanStack Query/SWR hooks, Zod schemas, MSW mocks, Hono server handlers, MCP servers, and SolidStart actions from OpenAPI specs using Orval. Covers all clients (React/Vue/Svelte/Solid/Angular Query, Fetch, Axios), custom HTTP mutators, authentication patterns, NDJSON streaming, programmatic API, and advanced configuration.592 frontend-designilm-alan/frontend-designBuild a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.591 distinctive-frontendpodo/design-agent-skillsGenerates distinctive interfaces that avoid generic AI aesthetics, using extreme typography, cohesive themes (Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism), orchestrated staggered animations, and layered backgrounds. Originally published as Koomook/claude-frontend-skills; installed from a verbatim mirror.590 codebase-documentermhattingpete/cl…ketplaceGenerates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.590 namingtimschoch/skillyThe code-naming rules. Use before naming a variable, function, file, type, table, route, component, event, or env var, and when a request's word differs from the repo's.590 logfire-setuppydantic/skillsRoute broad requests to set up Pydantic Logfire across application instrumentation, infrastructure, evals, frontend observability, Gateway, or coding agents. Use for "set up Logfire", "add Logfire to my project", "get me set up properly with Logfire", "send as much data as would be useful", mentions of Logfire without specific scope, or multi-surface requests; use the matching specialist directly for an already scoped request.589 astro-developerwithastro/astroComprehensive guide for developing in the Astro monorepo. Covers architecture, debugging, testing, and critical constraints. Use when working on features, fixes, tests, or understanding the codebase structure.587 tanstack-querybobmatnyc/claud…m-skillsTanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React applications.587 conformetry-generateorganizzolini/codebaseScaffold code with a conformetry generator instead of writing it by hand. Use when adding a module, component, service, application, or package to a workspace that has a conformetry configuration; when deciding whether a generator exists for the shape you are about to create; when a generator run overwrote or misplaced files; or when a conformance run reports a file that a generator should have produced. Covers both the Nx plugin and the conformetry command-line host, whose input contracts differ.587 interactive-dashboard-builderanthropics/know…-pluginsBuild self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.586 react-routertanstack/routerReact bindings for TanStack Router: RouterProvider, useRouter, useRouterState, useMatch, useMatches, useLocation, useSearch, useParams, useNavigate, useLoaderData, useLoaderDeps, useRouteContext, useBlocker, useCanGoBack, Link, Navigate, Outlet, CatchBoundary, ErrorComponent. React-specific patterns for hooks, providers, SSR hydration, and createLink with forwardRef.583 sentry-react-sdkgetsentry/sentr…t-skillsFull Sentry SDK setup for React. Use when asked to "add Sentry to React", "install @sentry/react", or configure error monitoring, tracing, session replay, profiling, or logging for React applications. Supports React 16+, React Router v5-v7, TanStack Router, Redux, Vite, and webpack.582 fivem-nuigermanfndez/fiv…i-skillsTrigger: NUI, ui_page, SendNUIMessage, SetNUIFocus, RegisterNUICallback, HTML/CSS/JS for FiveM, FiveM menu UI. Build FiveM NUI pages, wire Lua-browser messaging, callbacks and focus.580 react-native-unistyles-v3jpudysz/react-n…nistylesGuide for using react-native-unistyles v3. Triggers on: "unistyles", "StyleSheet.create", "create stylesheet", "add theme", "breakpoints", "variants", "withUnistyles", "useUnistyles", "ScopedTheme", "UnistylesRuntime", "style component", "responsive styles", "media queries", "dynamic styles", "scoped theme", "adaptive theme", "unistyles setup", "unistyles config", "withUnistylesConfig", "unistyles metro". Covers setup (Babel plugin or Metro integration), theming, responsive design, variants, web features, third-party integration, and troubleshooting.578 a11yaladicf/better-web-uiSystematically audit and remediate accessibility issues in UI, focusing on keyboard navigation, screen reader support, color contrast, semantic HTML, ARIA usage, and motion sensitivity. Use when the user wants to improve accessibility, make a component accessible, fix WCAG violations, add keyboard support, or ensure screen reader compatibility.578 managing-astro-deploymentsastronomer/agentsManage Astronomer production deployments with Astro CLI. Use when the user wants to authenticate, switch workspaces, create/update/delete deployments, or deploy code to production.577 angular-best-practices-signalstorealfredoperez/an…racticesNgRx SignalStore best practices for Angular. Covers shared state, computed state, entity management, and RxJS integration with rxMethod. Activates when working with @ngrx/signals and @ngrx/signals/entities. Do not use for NgRx Store or class-based state services. Install alongside angular-best-practices for full coverage.574 react-router-v7existential-birds/beagleReact Router v7 best practices for data-driven routing. Use when implementing routes, loaders, actions, Form components, fetchers, navigation guards, protected routes, or URL search params. Triggers on createBrowserRouter, RouterProvider, useLoaderData, useActionData, useFetcher, NavLink, Outlet.573 sveltekit-svelte5-tailwind-skillclaude-skills/s…nd-skillComprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4570 uview-prouview-pro/skillsuView Pro uni-app UI component library. Invoke when developing uni-app pages, using uView components (u-button, u-input, u-form, etc.), or needing UI elements like forms, buttons, modals, toasts, navigation.568 nodeops-authnodeops-app/skillsAdd NodeOps PKCE OAuth authentication to a Next.js app. Trigger when the user wants to set up NodeOps login, integrate NodeOps OAuth, add @nodeops-createos/integration-oauth, or connect a Next.js project to NodeOps identity/SSO. Also trigger on "add NodeOps auth", "setup NodeOps authentication", or "add NodeOps login".564 frontend-developerdylantarre/anim…inciplesUse when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.564 tauri-ipcfull-stack-skills/tauri-skillsGuidance for Tauri v2 IPC with frontend invoke calls, Rust commands, and type-safe bindings.564 bundle-size-optimizationaj-geddes/usefu…-promptsReduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.563 inspira-uisecondsky/claude-skills120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.562 extracteduclopez/ui-craftRefactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says "clean this up" / "extract components" / "tokenize styles". Invoke when the user asks for extract on their UI, or mentions 'extract' alongside design / UI / frontend work.562 registry-searchdiodeinc/pcbFind reusable registry modules and component packages for a board or specification.562