مهارات الوكلاء

• 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.

  ٩٥٣٬٩٦٧ ناجح 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.

  ٧٧٠٬٧١٩ ناجح 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.

  ٦٦٦٬٢٩١ ناجح 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).

  ٦٣٧٬٢٤٤ ناجح 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.

  ٥٦٥٬٩٨٩ ناجح 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.

  ٥٢٠٬٥٦٥ ناجح 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.

  ٣٨٢٬٩٥١ ناجح 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.

  ٣٧٩٬٩٧١ ناجح 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.

  ٣٧٨٬٩١٢ ناجح 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.

  ٣٥٥٬٥٤٢ ناجح 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.

  ٣٣٨٬٥٨١ ناجح 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.

  ٣٣٢٬٥٩٦ ناجح 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.

  ٢٨٩٬٢٧٦ ناجح 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.

  ١٤٢٬٩٥٩ ناجح 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.

  ١٣٨٬٨١٢ ناجح 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.

  ١٣٤٬٥٧٠ ناجح 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.

  ١٢٣٬٧٤٦ ناجح 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.

  ٩٥٬٩٣٢ ناجح 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.

  ٨٩٬٧٥٨ ناجح 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`.

  ٨٤٬٠٩٧ ناجح 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.

  ٧٤٬٧٥٤ ناجح npx skills add cloudflare/skills --skill turnstile-spin

• css-animations heygen-com/hyperframes

  ٧٢٬٣٠٤ ناجح npx skills add heygen-com/hyperframes --skill css-animations

• tailwind heygen-com/hyperframes

  ٧٠٬٥٥٣ ناجح 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.

  ٦٧٬١١٦ ناجح 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.

  ٦١٬٤٣٣ ناجح npx skills add anthropics/claude-code --skill frontend-design

• building-native-ui expo/skills

  ٥٨٬٠٩٢ ناجح 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.

  ٥٦٬١٥٧ ناجح 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.

  ٥٥٬٦٦٠ ناجح npx skills add msmps/opentui-skill --skill opentui

• expo-tailwind-setup expo/skills

  ٥٣٬٥٥٣ ناجح 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.

  ٥٣٬٣١٦ ناجح npx skills add greensock/gsap-skills --skill gsap-frameworks

• frontend-design pbakaus/impeccable

  ٥٣٬١٧٧ ناجح 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.

  ٥٢٬٠٥٣ ناجح 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.

  ٥٠٬٣٣٢ ناجح npx skills add firecrawl/cli --skill firecrawl-parse

• clerk-nextjs-patterns clerk/skills

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

  ٤٩٬١٥٠ ناجح 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.

  ٤١٬١٦٣ ناجح 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.

  ٤٠٬١٦٩ ناجح 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.

  ٣٩٬١٤٠ ناجح 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.

  ٣٨٬٥٢٣ ناجح 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.

  ٣٧٬١٨٩ ناجح 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.

  ٣٤٬٦٩١ ناجح 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.

  ٣٣٬٣٠٠ ناجح 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.

  ٣٢٬٧٨٦ ناجح npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

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

  ٣٢٬٤٣١ ناجح 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.

  ٣١٬٧٢١ ناجح 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.

  ٣١٬٣٤٧ ناجح 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.

  ٢٨٬٨٢٣ ناجح 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

  ٢٦٬٦٧٣ ناجح 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.

  ٢٦٬٣٤٩ ناجح 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.

  ٢٥٬٤٠١ ناجح 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.

  ٢٥٬٣٢٢ ناجح 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.

  ٢٤٬٣٥١ ناجح 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.

  ٢٣٬٣٦٥ ناجح npx skills add antfu/skills --skill nuxt

• vue-best-practices antfu/skills

  ٢٣٬٣٦١ ناجح 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.

  ٢١٬٩٤٤ ناجح 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.

  ٢١٬٨٧٨ ناجح 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.

  ٢١٬٨١٦ ناجح 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.

  ٢١٬٧٤٠ ناجح 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.

  ٢١٬٦١٧ ناجح 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.

  ٢٠٬٢١٢ ناجح 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.

  ١٩٬٨٤٦ ناجح 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.

  ١٩٬٧٢٢ ناجح 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.

  ١٩٬٦٢٥ ناجح 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.

  ١٨٬٨٩٠ ناجح 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.

  ١٨٬٨٦٨ ناجح npx skills add antfu/skills --skill pinia

• vue-router-best-practices antfu/skills

  ١٨٬٧٦٢ ناجح 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.

  ١٨٬٤٣٤ ناجح 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`.

  ١٨٬٣٠٢ ناجح 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.

  ١٧٬٥٣٦ ناجح 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.

  ١٧٬٢٢٨ ناجح npx skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

• vue-testing-best-practices antfu/skills

  ١٧٬١٨٣ ناجح 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.

  ١٧٬٠٧٨ ناجح 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.

  ١٦٬٧٨٠ ناجح 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.

  ١٦٬٤٨٧ ناجح 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.

  ١٦٬٣٩٢ ناجح 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.

  ١٦٬٣١٢ ناجح 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.

  ١٥٬٩١٩ ناجح 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.

  ١٥٬٦٥٢ ناجح 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.

  ١٥٬٦٤٩ ناجح 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.

  ١٥٬٤٧٦ ناجح npx skills add vuejs-ai/skills --skill vue-pinia-best-practices

• dbs-wechat-html dontbesilent2025/dbskill

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

  ١٥٬٤٤٨ ناجح 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.

  ١٤٬٨٩٢ ناجح 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.

  ١٤٬٦٦٥ ناجح 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.

  ١٤٬٦٠٠ ناجح 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.

  ١٤٬٥٧٠ ناجح 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.

  ١٤٬٥٢٢ ناجح 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.

  ١٤٬١٤٩ ناجح 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.

  ١٣٬٩٩٥ ناجح 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.

  ١٣٬٩٢٣ ناجح 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.

  ١٣٬٦٨٧ ناجح 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.

  ١٣٬٥٣٨ ناجح 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.

  ١٣٬٤٧٨ ناجح 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.

  ١٣٬٢٤٦ ناجح 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.

  ١٣٬١٣٧ ناجح npx skills add clerk/skills --skill clerk-nuxt-patterns

• agentation benjitaylor/agentation

  Add Agentation visual feedback toolbar to a Next.js project

  ١٣٬١٢٧ ناجح npx skills add benjitaylor/agentation --skill agentation

• clerk-expo clerk/skills

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

  ١٣٬٠٢٧ ناجح 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.

  ١٢٬٩٩٠ ناجح npx skills add ejirocodes/agent-skills --skill svelte5-best-practices

• expo ui swiftui expo/skills

  ١٢٬٨٥٣ ناجح npx skills add expo/skills --skill expo-ui-swiftui

• expo ui jetpack compose expo/skills

  ١٢٬٨١٦ ناجح 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.

  ١٢٬٦٠٥ ناجح 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.

  ١٢٬٥٨٩ ناجح npx skills add vuejs-ai/skills --skill create-adaptable-composable

الأوصاف من كتابة المؤلفين أنفسهم وباللغة الإنجليزية. اقرأ شيفرة المهارة في مستودعها قبل تثبيتها.