Skills tagged "frontend" (1335)

🎨 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

🎨 Onboard

This skill designs and improves onboarding experiences to help new users understand value quickly and achieve their first success.

designuxfrontendproduct

🎨 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

🎨 Optimize

This skill helps you identify and fix performance issues to deliver faster, smoother interfaces with optimized loading, rendering, and assets.

performancefrontenddebugging

🎨 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

🎨 Overdrive

This skill helps you push interfaces beyond conventional limits by applying extraordinary frontend techniques that wow users.

frontenduxdesignperformance

🎨 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

🎨 Performance Profiler

This skill runs performance audits with Lighthouse and Web Vitals, analyzes results, and delivers actionable optimizations to speed up pages.

performancedebuggingfrontendanalytics

🎨 Pf Code Review

This skill reviews PF frontend TypeScript code against React 19 patterns and conventions, offering actionable feedback.

frontendcode-reviewrefactorlinting

🎨 Pf Component

This skill helps generate PF frontend React UI components following PF conventions for atoms, molecules, organisms, and app components.

frontenddesignproductivity

🎨 Pf Doc Component

This skill generates component README documentation using a standardized template for PF components, accelerating documentation and consistency.

docsfrontendwritingcontent

🎨 Pf Pr

This skill helps you automate PR creation for the pluxity pf-frontend project by guiding commit messages and PR templates.

frontendgitautomationci-cd

🧪 Pf Test Hook

This skill generates comprehensive tests for custom hooks using Vitest and Testing Library, covering initialization, actions, prop changes, async hooks, and

testingunit-testsfrontendautomation

🎨 Phase 3 Mockup

This skill helps you rapidly create trendy UI mockups and wireframes without a designer, with HTML/CSS/JS ready for Next.js components.

frontenddesignuxaccessibility

🧪 Phoenix Liveview

This skill helps you develop real-time Phoenix apps with LiveView by teaching server-rendered UI, OTP supervision, and BEAM patterns.

backendfrontendfullstackperformance

🧪 Phoenix Liveview Essentials

This skill enforces LiveView best practices, ensuring proper mounting, connected rendering, and safe state management for reliable interactive UI.

backendfrontendfullstackdebugging

🧪 Pinia

This skill helps you manage Vue state with Pinia, providing type-safe stores, getters, and actions for scalable, maintainable apps.

frontendtestingproductivitydevops

🎨 Pixel Perfect Ui

This skill converts Figma designs into production-ready Next.js components with pixel-perfect accuracy and automated visual validation.

frontendnextjsdesignux

🧪 Planner

This skill analyzes requirements and delivers actionable implementation plans for complex features and refactors, including risks, dependencies, and phased

frontendjavascriptrefactorcode-review

🛡️ Plasmo Extension Architect

This skill helps you architect Plasmo MV3 extensions by organizing messaging, storage, and UI across background, content, and popup surfaces.

frontendfullstackdevopssecurity

🛡️ Playwright

This skill helps you write robust Playwright E2E tests using Page Object Model, precise selectors, and MCP-guided exploration.

testingfrontenddevopsscripting

🧪 Playwright

This skill helps you write end-to-end UI tests for Blazor apps using Playwright .NET, validating UI flows, responsiveness, and JavaScript errors.

testingautomationfrontendintegration-tests

🧪 Playwright

This skill automates browser tasks using Playwright to navigate, fill forms, capture screenshots, and inspect pages with a stateful session.

automationtestingscriptingdebugging

🧪 Playwright Best Practices

This skill helps you write reliable Playwright tests by enforcing semantic selectors, proper waits, accessibility checks, and isolation across viewports.

testingfrontendautomationaccessibility