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

senior-frontendcomposio-community/awesome-claude-pluginsFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.1750 frontend-craftingsentimony/skillsYou MUST use this when building, implementing, redesigning, reviewing, or refining user-facing interfaces - including pages, layouts, forms, navigation, dashboards, and reusable UI components in HTML, CSS, Vue, Nuxt, React, or other frontend frameworks. Also applies to frontend code changes involving responsive design, styling, accessibility, visual hierarchy, interaction states, or user experience, even when the request is framed as implementation rather than design. Use alongside web-debug for browser verification; root-cause investigation of unexpected behavior belongs to debugging.1749 tailwindcssmengto/skillsUse when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.1735 telegram-mini-appsickn33/agentic…e-skillsExpert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize.1722 mintlifycodewithshreyans/skillsComprehensive reference for building Mintlify documentation sites. Use when creating pages, configuring docs.json, adding components, setting up navigation, or working with API references. Routes to detailed reference files for all components and configuration options.1711 scss-best-practicesmindrally/skillsSCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets1688 htmxmindrally/skillsHTMX development guidelines for building dynamic web applications with minimal JavaScript using HTML attributes.1688 use-igniteui-blazordotnet/skillsAdd, configure, or review Ignite UI for Blazor Lite component support in Blazor applications. USE FOR: installing IgniteUI.Blazor.Lite or IgniteUI.Blazor.GridLite, registering AddIgniteUIBlazor() in Blazor Server, WASM, Hybrid, or split Blazor Web App projects, adding @using IgniteUI.Blazor.Controls, wiring the theme stylesheet, picking the right host page, locating the GridLite stylesheet path, explaining single-project vs split Server/Client Web App setup differences, and checking where an interactive render mode is needed for Ignite UI components to work. DO NOT USE FOR: general Blazor component authoring without Ignite UI, choosing app architecture or render mode from scratch (see create-blazor-project), JavaScript interop (see use-js-interop), authentication (see configure-auth), prerendering (see support-prerendering), or layout/component design questions that need no Ignite UI setup.1688 adk-frontendbotpress/skillsGuidelines for building frontend applications that integrate with Botpress ADK bots - covering authentication, type generation, client setup, and calling bot actions1663 ionic-angularcapawesome-team/skillsGuides the agent through Angular-specific patterns for Ionic app development. Covers project structure, standalone vs NgModule architecture detection, Angular Router integration with Ionic navigation (tabs, side menu, modals), lazy loading, Ionic page lifecycle hooks, reactive forms with Ionic input components, Angular services for state management, route guards, performance optimization, and testing. Do not use for creating a new Ionic app from scratch, upgrading Ionic versions, general Ionic component usage unrelated to Angular, Capacitor plugin integration, or non-Angular frameworks (React, Vue).1638 auth0-nextjsauth0/agent-skillsUse when adding Auth0 login, logout, protected pages, or middleware to a Next.js application. Supports App Router and Pages Router with @auth0/nextjs-auth0 — use even if the user says "add login to my Next.js app" or "protect my Next.js routes".1630 building-blocksadobe/skillsUse this when implementing code changes in AEM Edge Delivery Services (EDS, Franklin, Helix), whether new or modified blocks, core functionality (scripts.js, styles, delayed.js, etc.), or both. Creates and modifies block folders and decorate functions, updates core scripts, scopes CSS, and wires up delayed loading. For the overall development process use content-driven-development.1629 storage-analyzerkkkkhazix/khazix-skillsmacOS / Windows 只读存储分析助手（自动识别系统）。扫描整机磁盘占用，找出占空间大户，把每一项分成 🟢可自动清理 / 🟡需人工判断 / 🔴谨慎清理三级并给出可执行处置方案，生成排版精美、可折叠、命令可一键复制的交互式 HTML 报告，并可起本地服务在网页上一键删除（移废纸篓/直接删）。扫描全程只读。务必在以下场景使用：用户说"存储分析""磁盘满了""C盘/硬盘满了""空间不够""清理空间" "清理磁盘""占空间""哪些东西占地方""帮我看看存储""看一下电脑存储/空间" "存储空间""电脑空间不够""内存满了/不够/不足""看下内存/存储"（中文口语里 "内存"常指存储空间）"storage analysis""disk cleanup""清缓存""磁盘清理"；或用户抱怨电脑没空间、想知道什么东西吃硬盘、想要清理建议时。注意：若用户明确指运行内存/RAM（如"哪个进程吃内存""内存占用高"想看活动监视器），那是 RAM 不是存储，不属于本 skill。1623 generate-import-htmladobe/skillsUse this when the page-import pipeline needs to produce structured HTML from authoring analysis for AEM Edge Delivery Services. Covers building section structure, applying block tables, handling metadata, and managing the images folder. Do not invoke directly — called by page-import as a pipeline step.1601 ionic-designcap-go/capgo-skillsBuilds and reviews Ionic Framework UI in Capacitor apps (Ionic 9 current, Ionic 8 still common) - page structure (`ion-header`/`ion-content`/`ion-footer`), lists, modern form syntax (`label`/`labelPlacement` on `ion-input`/`ion-select`), sheet modals, tabs + `ion-router-outlet`, CSS variable theming, dark palettes (`palettes/dark.system.css`, `.ion-palette-dark`), iOS vs MD mode, and Ionic 8 -> 9 breaking changes (React Router 6, Vue Router 5, Angular 18-22 zoneless, removed `ion-picker-legacy`, boolean `autocorrect`, `npx @ionic/migrate`). Use when writing Ionic components, theming an Ionic app, fixing platform-mode styling, or upgrading @ionic/react, @ionic/vue, @ionic/angular. Do not use for Konsta UI (konsta-ui), Tailwind setup (tailwind-capacitor), raw safe-area CSS (safe-area-handling), keyboard resize (capacitor-keyboard), or Ionic Appflow/Enterprise migrations (ionic-appflow-migration, ionic-enterprise-sdk-migration).1601 good-cssvojtaholik/good-cssModern CSS techniques that replace breakpoint ladders, wrapper elements and scripts. Use whenever you write, edit or review styles in any form, including plain CSS, Tailwind classes, StyleX, CSS-in-JS and inline styles, and whenever you build or restyle a page or component, even if the user never mentions CSS.1600 nuxt-studioonmax/nuxt-skillsConfigure and operate the self-hosted Nuxt Studio editor for Nuxt Content. Use when working with nuxt-studio installation, editor customization, OAuth or custom authentication, media, drafts, Git publishing, or production deployment.1600 page-importadobe/skillsUse this when importing or migrating a single webpage from any URL into canonical EDS block format — structured HTML that authors edit in DA — including when the request uses terms like migrate, migration, or migrating. Covers scraping the page, analyzing structure, mapping to existing blocks, and generating HTML for immediate local preview. Use the snowflake skill instead when the user wants to preserve the original DOM byte-for-byte (static-to-EDS overlay); for building new blocks from scratch use content-driven-development.1598 vtex-io-react-appsvtex/skillsApply when building React components under react/ or configuring store blocks in store/ for VTEX IO apps. Covers interfaces.json, contentSchemas.json for Site Editor, VTEX Styleguide for admin apps, and css-handles for storefront styling. Use for creating custom storefront components, admin panels, pixel apps, or any frontend development within the VTEX IO react builder ecosystem.1595 frontend-designcustomware-ai/skillsStrict frontend design guardrails for building modern, minimal-visual-noise, airy, non-generic app UIs. Use whenever creating or changing frontend UI, React components, shadcn/ui themes, Tailwind styles, app layouts, or first-version product screens. This skill complements vertical/domain skills like CPQ, CRM, and similar app builders: follow the selected domain skill's workflow and layout requirements, then enforce this skill's shared visual rules for brand-aware theming, generous spacing, typography, contrast, roundedness, shadows, surface hierarchy, cardless defaults, no-sidebar defaults, and anti-pattern avoidance.1588 preview-importadobe/skillsUse this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.1586 css-border-gradientmengto/skillsApply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.1585 tailwind-design-systemsickn33/agentic…e-skillsBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.1574 sf-lwcjaganpro/sf-skillsLightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.1544 import-on-interactionpatternsdev/skillsTeaches interaction-based lazy loading for non-critical resources. Use when you have heavy components or libraries that are only needed after user interaction like clicks, hovers, or form input.1541 ue-component-modeladobe/skillsUse this when the user mentions component models, component definitions, component filters, block configuration for the Universal Editor, UE block setup, adding a new block to UE, configuring block properties or block authoring fields, or wants to create an EDS/Franklin block with Universal Editor support, modify block fields, or add a block to the section filter. Covers creating and editing the three JSON files that control how AEM Edge Delivery Services blocks appear and behave in the Universal Editor — component-definition.json, component-models.json, and component-filters.json.1539 css-alpha-maskingmengto/skillsApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.1537 aceternity-uisecondsky/claude-skills100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.1532 r3f-best-practicesemalorenzo/thre…t-skillsReact Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.1530 vantajsmengto/skillsUse when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).1524