Agenttien taidot

• frontend-design anthropics/skills

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  953 967 Hyväksytty npx skills add anthropics/skills --skill frontend-design

• vercel-react-best-practices vercel-labs/agent-skills

  React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

  770 719 Hyväksytty npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

• hyperframes-animation heygen-com/hyperframes

  All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

  666 291 Hyväksytty npx skills add heygen-com/hyperframes --skill hyperframes-animation

• design-mobile-apps designed-by-ai/skills

  Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).

  637 244 Hyväksytty npx skills add designed-by-ai/skills --skill design-mobile-apps

• design-taste-frontend leonxlnx/taste-skill

  Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

  565 989 Hyväksytty npx skills add leonxlnx/taste-skill --skill design-taste-frontend

• hyperframes-keyframes heygen-com/hyperframes

  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

  520 565 Hyväksytty npx skills add heygen-com/hyperframes --skill hyperframes-keyframes

• ui-ux-pro-max nextlevelbuilder/ui-ux-pro-max-skill

  UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

  382 951 Hyväksytty npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

• minimalist-ui leonxlnx/taste-skill

  Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

  379 971 Hyväksytty npx skills add leonxlnx/taste-skill --skill minimalist-ui

• remotion-to-hyperframes heygen-com/hyperframes

  Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

  378 912 Hyväksytty npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes

• industrial-brutalist-ui leonxlnx/taste-skill

  Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

  355 542 Hyväksytty npx skills add leonxlnx/taste-skill --skill industrial-brutalist-ui

• imagegen-frontend-web leonxlnx/taste-skill

  Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

  338 581 Hyväksytty npx skills add leonxlnx/taste-skill --skill imagegen-frontend-web

• imagegen-frontend-mobile leonxlnx/taste-skill

  Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

  332 596 Hyväksytty npx skills add leonxlnx/taste-skill --skill imagegen-frontend-mobile

• design-taste-frontend-v1 leonxlnx/taste-skill

  The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

  289 276 Hyväksytty npx skills add leonxlnx/taste-skill --skill design-taste-frontend-v1

• vercel-react-view-transitions vercel-labs/agent-skills

  Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

  142 959 Hyväksytty npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions

• pick-ui-library emilkowalski/skills

  Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

  138 812 Hyväksytty npx skills add emilkowalski/skills --skill pick-ui-library

• archify tt-a1i/archify

  Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.

  134 570 Hyväksytty npx skills add tt-a1i/archify --skill archify

• convex-create-component get-convex/agent-skills

  Builds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component boundary work.

  123 746 Hyväksytty npx skills add get-convex/agent-skills --skill convex-create-component

• ask-sonner emilkowalski/skills

  Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.

  95 932 Hyväksytty npx skills add emilkowalski/skills --skill ask-sonner

• vercel-optimize vercel-labs/agent-skills

  Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

  89 758 Hyväksytty npx skills add vercel-labs/agent-skills --skill vercel-optimize

• animate-expo emilkowalski/skills

  Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

  84 097 Hyväksytty npx skills add emilkowalski/skills --skill animate-expo

• turnstile-spin cloudflare/skills

  Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

  74 754 Hyväksytty npx skills add cloudflare/skills --skill turnstile-spin

• css-animations heygen-com/hyperframes

  72 304 Hyväksytty npx skills add heygen-com/hyperframes --skill css-animations

• tailwind heygen-com/hyperframes

  70 553 Hyväksytty npx skills add heygen-com/hyperframes --skill tailwind

• tailwind-design-system wshobson/agents

  Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

  67 116 Hyväksytty npx skills add wshobson/agents --skill tailwind-design-system

• frontend-design anthropics/claude-code

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  61 433 Hyväksytty npx skills add anthropics/claude-code --skill frontend-design

• building-native-ui expo/skills

  58 092 Hyväksytty npx skills add expo/skills --skill building-native-ui

• gsap-react greensock/gsap-skills

  Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.

  56 157 Hyväksytty npx skills add greensock/gsap-skills --skill gsap-react

• opentui msmps/opentui-skill

  OpenTUI skill for building terminal user interfaces with the Core, React, or Solid APIs. Use for any TUI task including components, layout, keyboard and keymap handling, animations, and testing.

  55 660 Hyväksytty npx skills add msmps/opentui-skill --skill opentui

• expo-tailwind-setup expo/skills

  53 553 Hyväksytty npx skills add expo/skills --skill expo-tailwind-setup

• gsap-frameworks greensock/gsap-skills

  Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.

  53 316 Hyväksytty npx skills add greensock/gsap-skills --skill gsap-frameworks

• frontend-design pbakaus/impeccable

  53 177 Hyväksytty npx skills add pbakaus/impeccable --skill frontend-design

• shadcn-ui google-labs-code/stitch-skills

  Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

  52 053 Hyväksytty npx skills add google-labs-code/stitch-skills --skill shadcn-ui

• firecrawl-parse firecrawl/cli

  Convert a local file (PDF, DOCX, XLSX, HTML, …) to markdown, or answer questions about its content. Use whenever the input is a file path, not a URL.

  50 332 Hyväksytty npx skills add firecrawl/cli --skill firecrawl-parse

• clerk-nextjs-patterns clerk/skills

  Advanced Next.js patterns - middleware, Server Actions, caching with

  49 150 Hyväksytty npx skills add clerk/skills --skill clerk-nextjs-patterns

• angular-developer angular/skills

  Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, naming conventions, or CLI tooling.

  41 163 Hyväksytty npx skills add angular/skills --skill angular-developer

• vue-best-practices vuejs-ai/skills

  MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

  40 169 Hyväksytty npx skills add vuejs-ai/skills --skill vue-best-practices

• vitest antfu/skills

  Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

  39 140 Hyväksytty npx skills add antfu/skills --skill vitest

• mobile-native emilkowalski/skills

  Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.

  38 523 Hyväksytty npx skills add emilkowalski/skills --skill mobile-native

• vite antfu/skills

  Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

  37 189 Hyväksytty npx skills add antfu/skills --skill vite

• vue antfu/skills

  Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

  34 691 Hyväksytty npx skills add antfu/skills --skill vue

• design nextlevelbuilder/ui-ux-pro-max-skill

  Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

  33 300 Hyväksytty npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design

• ui-styling nextlevelbuilder/ui-ux-pro-max-skill

  Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

  32 786 Hyväksytty npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

• ckm:ui-styling nextlevelbuilder/ui-ux-pro-max-skill

  32 431 Hyväksytty npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ckm:ui-styling

• better-ui jakubkrehel/skills

  Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more.

  31 721 Hyväksytty npx skills add jakubkrehel/skills --skill better-ui

• nextjs-app-router-patterns wshobson/agents

  Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

  31 347 Hyväksytty npx skills add wshobson/agents --skill nextjs-app-router-patterns

• convex-monitor get-convex/agent-skills

  Watch for the next dev/prod error or request in a Convex app and react to it.

  28 823 Hyväksytty npx skills add get-convex/agent-skills --skill convex-monitor

• remotion-render its-a-skill-issue/superpowers

  Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

  26 673 Hyväksytty npx skills add its-a-skill-issue/superpowers --skill remotion-render

• expo-ui expo/skills

  Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

  26 349 Hyväksytty npx skills add expo/skills --skill expo-ui

• show-me humanlayer/skills

  Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

  25 401 Hyväksytty npx skills add humanlayer/skills --skill show-me

• expo-native-ui expo/skills

  Framework (OSS). Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

  25 322 Hyväksytty npx skills add expo/skills --skill expo-native-ui

• extension-core-infrastructure caffeinelabs/skills

  Core infrastructure providing backend connection configuration, storage client, and React app entry point.

  24 351 Hyväksytty npx skills add caffeinelabs/skills --skill extension-core-infrastructure

• nuxt antfu/skills

  Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

  23 365 Hyväksytty npx skills add antfu/skills --skill nuxt

• vue-best-practices antfu/skills

  23 361 Hyväksytty npx skills add antfu/skills --skill vue-best-practices

• shadcn-ui giuseppe-trisciuoglio/developer-kit

  Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

  21 944 Hyväksytty npx skills add giuseppe-trisciuoglio/developer-kit --skill shadcn-ui

• argent-react-native-optimization software-mansion/argent

  Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues. Entry-point for all performance work. Use when the app feels slow, user asks to optimize, fix re-renders, reduce jank, or improve startup. Delegates to argent-react-native-profiler for measurement.

  21 878 Hyväksytty npx skills add software-mansion/argent --skill argent-react-native-optimization

• argent-react-native-app-workflow software-mansion/argent

  Step-by-step workflows for developing or debugging React Native apps on iOS simulator or Android emulator. Use when starting the app, debugging Metro, fixing builds, diagnosing runtime errors, or running tests.

  21 816 Hyväksytty npx skills add software-mansion/argent --skill argent-react-native-app-workflow

• argent-react-native-profiler software-mansion/argent

  Profile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.

  21 740 Hyväksytty npx skills add software-mansion/argent --skill argent-react-native-profiler

• baseline-ui ibelick/ui-skills

  Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

  21 617 Hyväksytty npx skills add ibelick/ui-skills --skill baseline-ui

• lavish kunchenguid/lavish-axi

  Turn complex or visual agent responses into rich, reviewable HTML artifacts (HTML files) the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.

  20 212 Hyväksytty npx skills add kunchenguid/lavish-axi --skill lavish

• responsive-design wshobson/agents

  Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

  19 846 Hyväksytty npx skills add wshobson/agents --skill responsive-design

• feature-sliced-design feature-sliced/skills

  Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import boundaries, resolving cross-imports or evaluating the @x pattern, deciding whether to create or remove an entity, evaluating whether the entities layer is needed at all, deciding where page layouts belong or whether to use the widgets layer (discouraged), deciding whether logic should remain local or be extracted, migrating from FSD v2.0 or a non-FSD codebase, integrating FSD with frameworks (Next.js App Router and Pages Router, React Router, Nuxt, Vite, Astro), or implementing common patterns such as authentication, API handling, Redux, and TanStack Query (React Query) within FSD.

  19 722 Hyväksytty npx skills add feature-sliced/skills --skill feature-sliced-design

• fixing-accessibility ibelick/ui-skills

  Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

  19 625 Hyväksytty npx skills add ibelick/ui-skills --skill fixing-accessibility

• nuxt-ui nuxt/ui

  Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

  18 890 Hyväksytty npx skills add nuxt/ui --skill nuxt-ui

• pinia antfu/skills

  Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

  18 868 Hyväksytty npx skills add antfu/skills --skill pinia

• vue-router-best-practices antfu/skills

  18 762 Hyväksytty npx skills add antfu/skills --skill vue-router-best-practices

• clerk-react-patterns clerk/skills

  React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.

  18 434 Hyväksytty npx skills add clerk/skills --skill clerk-react-patterns

• next-dev-loop vercel/next.js

  Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.

  18 302 Hyväksytty npx skills add vercel/next.js --skill next-dev-loop

• fireworks-tech-graph yizhiyanhua-ai/fireworks-tech-graph

  Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF. Use for architecture, UML, agent, cloud or workflow diagrams; not photos, raster art or statistical charts.

  17 536 Hyväksytty npx skills add yizhiyanhua-ai/fireworks-tech-graph --skill fireworks-tech-graph

• tailwind-css-patterns giuseppe-trisciuoglio/developer-kit

  Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

  17 228 Hyväksytty npx skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

• vue-testing-best-practices antfu/skills

  17 183 Hyväksytty npx skills add antfu/skills --skill vue-testing-best-practices

• angular-new-app angular/skills

  Creates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.

  17 078 Hyväksytty npx skills add angular/skills --skill angular-new-app

• transitions-dev jakubantalik/transitions.dev

  Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure", "toast", "snackbar", "like button", "heart animation", "learn more arrow", "checkbox", "check animation", "spinning counter", "odometer", "slot machine digits", "toggle", "switch", "thinking states", "AI status line", "agent reasoning", "reasoning stream", "streaming text", "stream words in", "matrix loader", "dot loader", "banner stack", "stacked toasts". Also "motion tokens", "scan for ad-hoc transitions", "replace hardcoded durations with motion tokens", "tokenize my animations", and the commands transitions reveal, transitions review, transitions apply, transitions refine.

  16 780 Hyväksytty npx skills add jakubantalik/transitions.dev --skill transitions-dev

• astro astrolicious/agent-skills

  Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG), islands architecture, content collections, or deploying an Astro project.

  16 487 Hyväksytty npx skills add astrolicious/agent-skills --skill astro

• readout warpdotdev/common-skills

  Produce a polished, self-contained HTML "readout" document under ~/.readouts (with an auto-maintained index page), either by snapshotting the findings accumulated in the current conversation or — when invoked fresh, e.g. "/readout on how github webhook events are processed" — by sharpening scope with clarifying questions and researching the codebase before documenting. The work runs in a child agent so the main conversation's context stays clean. Use whenever the user invokes /readout, says "write this up", "turn this into a doc/page", "make a readout", or asks for a readable, shareable document capturing findings or explaining how something works.

  16 392 Hyväksytty npx skills add warpdotdev/common-skills --skill readout

• fixing-metadata ibelick/ui-skills

  Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

  16 312 Hyväksytty npx skills add ibelick/ui-skills --skill fixing-metadata

• next-cache-components-optimizer vercel/next.js

  Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then guards against regression. Use when asked to make a route's navigation instant (its static shell commits immediately), fix a route whose static shell isn't prerendered/served/prefetched, grow a route's static shell or fix its slow first paint, diagnose which Suspense boundary keeps a route out of its static shell, or write the instant() e2e guard for one. Requires Next.js 16.3+ with cacheComponents; directs an upgrade if older.

  15 919 Hyväksytty npx skills add vercel/next.js --skill next-cache-components-optimizer

• frontend-design anthropics/claude-plugins-official

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  15 652 Hyväksytty npx skills add anthropics/claude-plugins-official --skill frontend-design

• unocss antfu/skills

  UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

  15 649 Hyväksytty npx skills add antfu/skills --skill unocss

• vue-pinia-best-practices vuejs-ai/skills

  Pinia stores, state management patterns, store setup, and reactivity with stores.

  15 476 Hyväksytty npx skills add vuejs-ai/skills --skill vue-pinia-best-practices

• dbs-wechat-html dontbesilent2025/dbskill

  把 Markdown 转成可粘贴到微信公众号后台的 HTML，并提供 15 种内置风格。用户要求生成公众号 HTML、制作微信版本或排版公众号文章时使用。

  15 448 Hyväksytty npx skills add dontbesilent2025/dbskill --skill dbs-wechat-html

• react-native-design wshobson/agents

  Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

  14 892 Hyväksytty npx skills add wshobson/agents --skill react-native-design

• clerk-react-router-patterns clerk/skills

  React Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router, useNavigate may be used only in the context of a Router.

  14 665 Hyväksytty npx skills add clerk/skills --skill clerk-react-router-patterns

• clerk-tanstack-patterns clerk/skills

  TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

  14 600 Hyväksytty npx skills add clerk/skills --skill clerk-tanstack-patterns

• react-state-management wshobson/agents

  Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

  14 570 Hyväksytty npx skills add wshobson/agents --skill react-state-management

• react-native-architecture wshobson/agents

  Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

  14 522 Hyväksytty npx skills add wshobson/agents --skill react-native-architecture

• backend-patterns affaan-m/ecc

  Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.

  14 149 Hyväksytty npx skills add affaan-m/ecc --skill backend-patterns

• frontend-patterns affaan-m/ecc

  Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

  13 995 Hyväksytty npx skills add affaan-m/ecc --skill frontend-patterns

• building-components vercel/components.build

  Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

  13 923 Hyväksytty npx skills add vercel/components.build --skill building-components

• react vercel-labs/json-render

  React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

  13 687 Hyväksytty npx skills add vercel-labs/json-render --skill react

• vue-router-best-practices vuejs-ai/skills

  Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

  13 538 Hyväksytty npx skills add vuejs-ai/skills --skill vue-router-best-practices

• clerk-astro-patterns clerk/skills

  Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.

  13 478 Hyväksytty npx skills add clerk/skills --skill clerk-astro-patterns

• clerk-vue-patterns clerk/skills

  Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.

  13 246 Hyväksytty npx skills add clerk/skills --skill clerk-vue-patterns

• clerk-nuxt-patterns clerk/skills

  Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.

  13 137 Hyväksytty npx skills add clerk/skills --skill clerk-nuxt-patterns

• agentation benjitaylor/agentation

  Add Agentation visual feedback toolbar to a Next.js project

  13 127 Hyväksytty npx skills add benjitaylor/agentation --skill agentation

• clerk-expo clerk/skills

  Add Clerk authentication to Expo and React Native apps using @clerk/expo.

  13 027 Hyväksytty npx skills add clerk/skills --skill clerk-expo

• svelte5-best-practices ejirocodes/agent-skills

  Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

  12 990 Hyväksytty npx skills add ejirocodes/agent-skills --skill svelte5-best-practices

• expo ui swiftui expo/skills

  12 853 Hyväksytty npx skills add expo/skills --skill expo-ui-swiftui

• expo ui jetpack compose expo/skills

  12 816 Hyväksytty npx skills add expo/skills --skill expo-ui-jetpack-compose

• web-component-design wshobson/agents

  Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

  12 605 Hyväksytty npx skills add wshobson/agents --skill web-component-design

• create-adaptable-composable vuejs-ai/skills

  Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.

  12 589 Hyväksytty npx skills add vuejs-ai/skills --skill create-adaptable-composable

Kuvaukset ovat tekijöiden omia ja englanninkielisiä. Lue taidon koodi sen repositoriosta ennen asentamista.