Skills tagged "frontend" (1279)

🎨 Motion Design

This skill provides motion design guidance for UI components, recommending easing, duration, and implementation to make interactions purposeful and delightful.

designuxfrontendaccessibility

🎨 Mui

This skill applies MUI v7 styling, theme, and responsive patterns to accelerate building consistent, accessible components with sx prop and hooks.

frontenddesignuxaccessibility

🎨 Mux

This skill helps you build and optimize video apps with Mux by enabling streaming, live, analytics, DRM, player integrations, and AI workflows.

frontendanalyticsaibackend

🧪 Mviz

This skill generates clean, data-focused HTML dashboards from compact JSON or markdown specs using mviz and ECharts.

dataanalyticsfrontenddesign

🎨 Nanobanana Ppt Skills2

This skill generates polished PPT slides from your documents with AI-driven visuals, transitions, and an interactive playback viewer.

aiautomationdesignproductivity

🎨 Narrative Text Visualization

This skill transforms data into structured narrative text visualizations with T8 syntax, enabling clear data reports and insights across frameworks.

dataanalyticsfrontendjavascript

🎨 Native Data Fetching

This skill helps you implement and debug any network request using expo fetch, React Query, error handling, caching, and offline support.

apidatadebuggingperformance

🎨 Neon Auth

Sets up Neon Auth for your application. Configures authentication, creates auth routes, and generates UI components. Use when adding authentication to Next.js, React SPA, or Node.js projects.

neondatabasefrontend

🎨 Next Cache Components

This skill helps you implement Next.js 16 Cache Components to mix static, cached, and dynamic content for faster, tailored pages.

nextjsperformancefrontendreact

🧪 Next Upgrade

This skill guides you upgrade Next.js to the latest version following official migration guides, codemods, and dependency updates.

nextjsmigrationautomationfrontend

🎨 Next.js Cache Components

Implement Next.js Cache Components with proactive caching patterns and ISR optimization

vercelnext.jsfrontend

🎨 Nextjs 15

This skill helps optimize Next.js 15 apps by applying App Router patterns, server components, and server actions across routing, data fetching, and middleware.

frontendfullstackapiperformance

🎨 Nextjs App Router

This skill guides you through Next.js App Router patterns, server/client components, and routing files to read, review, or create app directory files.

nextjsreactfrontendfullstack

🎨 Nextjs Best Practices

This skill guides Next.js App Router best practices to optimize performance, server components, data fetching, and deployment across modern apps.

performancefrontendfullstackbackend

🛡️ Nextjs Client Cookie Pattern

This skill teaches a two-file Next.js pattern where a client action triggers a server cookie, ensuring secure, typed, and maintainable cookie handling.

frontendbackendfullstacksecurity

🎨 Nextjs Code Structure

This skill guides structuring Next.js apps using Feature-Sliced Design and Server Components to improve scalability and maintainability.

frontendfullstackdesignrefactor

🧪 Nextjs Devtools

This skill helps you inspect and debug Next.js apps by exposing routes, components, and build info via MCP tooling.

debuggingfrontendautomationcli

🎨 Nextjs Expert

This skill helps you diagnose and optimize Next.js App Router issues, hydration, and performance to deliver faster, reliable deployments.

frontendfullstackperformancedebugging

🎨 Nextjs Google Maps

This skill helps you integrate Google Maps into Next.js apps using @react-google-maps/api, enabling maps, places, directions, and geocoding features.

frontendfullstackapiperformance

🎨 Nextjs Pathname Id Fetch

This skill explains and implements the Next.js pathname ID fetch pattern to load data from URL parameters in server components.

frontendapidatafullstack

🎨 Nextjs Performance

This skill helps optimize Next.js apps for speed by applying best practices for images, fonts, dynamic imports, and caching.

performancefrontendcode-reviewdebugging

🛡️ Nextjs Stripe Integration

This skill helps you implement Stripe payments and subscriptions in Next.js projects, including checkout, webhooks, and customer management.

backendfrontendapifullstack

🎨 Nextjs16 Skills

This skill helps plan upgrades and troubleshoot Next.js 16 migrations, including Turbopack changes and API runtime adjustments.

migrationplanningdebuggingfrontend

🎨 Npm Library Setup

Comprehensive guidance on setting up npm libraries with package.json, with a preference for ES Modules (ESM). Use when setting up npm packages, configuring ESM, TypeScript packages, or React component libraries.

huozhifrontend

🎨 Nuxt

This skill helps you build and optimize Nuxt apps with SSR, routing, and data fetching patterns across server routes and components.

frontendfullstackbackenddata

🛡️ Nuxt Better Auth

This skill helps you implement authentication in Nuxt 4+ using Better Auth, providing useUserSession, server helpers, and route protection.

frontendbackendsecurityapi

🎨 Nuxt Content

This skill helps you work with Nuxt Content in Nuxt 4, enabling seamless querying, rendering, and navigation of markdown content.

contentfrontenddocsseo

🎨 Nuxt Content

This skill helps you work with Nuxt Content v3 by guiding collections querying rendering and database setup for content-driven apps.

frontendbackenddatasql

🎨 Nuxt Module

This skill enables Nuxt projects to render charts with auto-imported vue-chrts components and types for rapid data visualization.

nuxtvuedataanalytics

🧪 Nuxt Modules

This skill helps you build, test, and publish Nuxt modules using defineNuxtModule patterns, Kit utilities, and CI/CD workflows.

ci-cdtestingreleasefrontend

🎨 Nuxt Patterns

This skill helps you apply Nuxt 3/4 best practices for auto-imports, composables, server routes, and data fetching across pages.

frontendfullstackapidata

🎨 Nuxt Seo

This skill helps configure Nuxt SEO, generate sitemaps and OG images, and add JSON-LD structured data for richer search results.

seofrontendcontentperformance

🧪 Nuxt Ui

This skill helps you build polished Nuxt and Vue interfaces with 125+ accessible components and Tailwind theming for brand-specific UIs.

nuxtvuefrontendux

🛡️ Nuxtjs Mastery Skill

This skill guides Nuxt 3 and TanStack Query mastery for production-ready architecture, performance, and clean code through expert patterns.

frontendfullstackdebuggingperformance

🧪 Nx Generate

This skill generates code with nx generators to scaffold libraries, apps, and boilerplate, accelerating boilerplate tasks and ensuring consistency.

cliautomationfrontendbackend

🎨 Odoo Upgrade Skill

Comprehensive Odoo ERP upgrade assistant for migrating modules between Odoo versions (14-19). Handles XML views, Python API changes, JavaScript/OWL components, theme SCSS variables, and manifest updates. Use when user asks to upgrade Odoo modules, fix version compatibility issues, migrate themes bet

ahmed-lakoshafrontend

🎨 Og Image

This skill generates Open Graph images aligned with your design system and configures meta tags to optimize social sharing.

frontendbrandingseosocial-media

🎨 Ogie

This skill extracts OpenGraph, Twitter Cards, and metadata from URLs or HTML to power rich previews and SEO tooling.

seodatabackendfrontend

🎨 Onboardjs React

This skill helps you implement OnboardJS in React projects to build multi-step onboarding with flow, persistence, and conditional navigation.

frontendapianalyticsperformance

🎨 Onchainkit

This skill helps you build production-ready onchain apps using React components and TypeScript utilities from OnchainKit, simplifying wallet, token, and NFT

frontendfullstackapiux

🎨 Opentui Projects

This skill helps you scaffold OpenTUI projects with templates, examples, and best practices to accelerate learning and production-ready setups.

frontendclitypescriptdesign

🧪 Ops Browser Uat

This skill automates browser-based user acceptance testing with Playwright MCP tools, logging in, navigating features, and capturing visual proof via

automationtestingfrontendtypescript

🎨 Optimization Mastery

This skill helps you optimize frontend and backend performance by enforcing INP under 200ms, partial hydration, UUIDv7 indexing, and token stewardship.

frontendbackendaiperformance

🎨 Optimizing Performance

This skill analyzes and optimizes application performance across frontend, backend, and database layers, guiding profiling and targeted improvements with

performancefrontendbackenddatabase

🧪 Orpc Contract First

This skill guides implementing oRPC contract-first API patterns in the Dify frontend, from contract creation to router registration and typed service hooks.

frontendapifullstackautomation

🎨 Overview

This skill explains the Agent Runtime purpose, architecture, and value, outlining how it orchestrates isolated AI agent workloads and streams data to apps.

backendaiapifrontend

🎨 Particles Gpu

This skill helps you render thousands to millions of particles efficiently using GPU instancing, custom shaders, and Points geometry for high-performance

frontendperformancedocs

🎨 Particles Lifecycle

This skill helps you manage particle birth, life, and death with emission, pooling, trails, and color/size changes for memory-efficient effects.

performancedebuggingscriptingfrontend

🎨 Particles Physics

This skill helps simulate realistic particle motion by applying gravity, wind, drag, attractors, turbulence, and collisions for dynamic visuals.

frontendperformancedebugging

🧪 Pattern Ui

This skill enhances UI polish by applying layout and styling patterns to pattern-ui components, ensuring responsive structure and two-way data bindings.

frontenddesignuxperformance

🧪 Pdf

This skill helps you read, generate, and validate PDFs with reliable visuals and layout checks using Poppler, ReportLab, and pdfplumber.

pythonautomationdocstesting

🎨 Pdf Reading

This skill helps you view and navigate PDFs with a local server, offering summaries and question-answering after display.

aidocsresearchproductivity

🎨 Pellicule Skills

This skill helps you create videos with Vue using Pellicule, providing zero-config rendering and motion tooling for rapid visual storytelling.

frontendproductivityscriptingai

🎨 Perf Virtual Lists

This skill optimizes performance for virtualized lists on Android TV by applying React Window techniques and overscan, ensuring smooth 60FPS.

reactperformancefrontend

🎨 Performance

This skill helps you boost Next.js and React performance by applying ARC-aligned layout, SVG, and typography optimizations.

performancefrontenddesignautomation

🎨 Performance Audit

This skill helps you identify bottlenecks and optimize code through a thorough performance audit across databases, backend, frontend, and infrastructure.

performancedebugginganalyticsbackend

🎨 Performance Optimization

This skill helps you optimize perceived performance using optimistic UI, skeletons, and latency strategies to boost user trust and loading experience.

performancefrontenduxaccessibility

🎨 Performance Optimization

This skill analyzes bottlenecks and provides production-ready optimizations across algorithms, databases, frontend, and infrastructure to speed up applications.

performancebackendfrontenddatabase

🎨 Performance Optimizer

This skill helps you diagnose performance bottlenecks, prioritize optimizations, and implement benchmarks across frontend, backend, and infrastructure.

performancedebuggingfrontendbackend

🧪 Performance Pass Ui

This skill helps identify and reduce UI performance regressions by applying targeted optimizations with minimal, verifiable code changes.

performancefrontenddebuggingrefactor