Skills tagged "frontend" (1279)

🎨 Research

This skill orchestrates parallel intelligence gathering across codebase, history, and web sources to produce a structured research task file.

researchfrontenddocsai

🧪 Responsive System

This skill helps implement responsive layouts and fluid typography using mobile-first patterns, container queries, and adaptive components for scalable UI.

frontendtypescriptdesignux

🎨 Responsive Web Design

This skill helps you design responsive web interfaces with mobile-first CSS, flexible grids, and fluid typography across devices.

frontenduxdesignaccessibility

🎨 Rhdh Context

This skill provides essential context on Red Hat Developer Hub, its relation to Backstage, and how to develop and deploy RHDH plugins.

backendfrontenddocskubernetes

🎨 Rhdh Frontend Dynamic Plugin

This skill guides you to bootstrap and wire frontend dynamic plugins for Red Hat Developer Hub, delivering UI pages, routes, and theme integrations.

frontenduxdesignproductivity

🎨 Rive React

Trigger when: (1) Using @rive-app/react-canvas or @rive-app/react-webgl, (2) Using useRive hook or RiveComponent, (3) Building React components with Rive animations, (4) User mentions "Rive React" or "useRive", (5) Implementing scroll-based or parallax animations with Rive. Best practices for integr

stevysmithfrontend

🎨 Rive Skills

This skill helps you integrate and control Rive animations in React/Next.js apps, write Luau scripts, and drive state machines for interactive graphics.

frontendapidebuggingdata

🎨 Rive Web

Trigger when: (1) Loading or embedding .riv files on the web, (2) Using @rive-app/canvas or @rive-app/webgl packages, (3) Controlling Rive state machines from JavaScript, (4) Reading/writing Rive inputs or handling events, (5) User mentions "Rive runtime" or "Rive animation" in web context. Best pra

stevysmithfrontend

🎨 Rivetkit Client Javascript

This skill guides building JavaScript RivetKit clients for browser, Node.js, or Bun, enabling easy actor calls and real-time connections.

frontendbackendapijavascript

🎨 Rivetkit Client React

This skill helps React developers connect to Rivet Actors using @rivetkit/react, create hooks with createRivetKit, and manage realtime actor state.

reactfrontendtypescriptwebsocket

🎨 Rmslop

This skill removes AI-generated slop by diff-checking main and pruning inconsistent or unnecessary code patterns across the repository.

code-reviewrefactorlintingdebugging

🎨 Robis Design Best Practice

Apply Robi's UI design principles for beautiful, accessible interfaces. Use when building UI components, reviewing designs, choosing colors, setting spacing, or implementing animations. Covers color theory (HSL, WCAG, halation), spacing (4px system), icons, shadows, and micro-interactions.

ethiopian-cursor-communityfrontend

🧪 Routing

This skill helps optimize Angular routing performance by enabling lazy loading, guards, preloading, change detection tuning, and bundle analysis.

frontendperformancedebuggingtesting

🎨 Rsc Data Optimizer

This skill converts slow client-side data fetching to server-side rendering with React Server Components to speed up initial load and improve SEO.

frontendbackendfullstackperformance

🎨 Rss Agent Viewer

This skill helps you manage RSS feeds from the terminal by discovering, subscribing, reading, and searching across feeds.

cliscriptingproductivitydata

🧪 Runhuman Skills

This skill helps you validate web app UX with human testers, capturing real user feedback and visual issues not caught by automation.

uxtestingaccessibilityproduct

🎨 Runtime Env Vite Plugin

This skill helps you apply runtime-env with Vite by distinguishing build-time and runtime variables, ensuring safe migration and correct configuration.

typescriptjavascriptfrontendmigration

🎨 Salla Docs

This skill provides comprehensive Salla documentation across APIs, storefront SDKs, and theme development to help you integrate and build quickly.

apidocsfrontend

🎨 Sass

Sass/SCSS preprocessing with variables, mixins, and nesting. Use when organizing styles, creating reusable components, or implementing design systems.

simon-jarillofrontend

🎨 Say Hi

This skill greets you with a warm, friendly hello, matching your energy and keeping the exchange brief.

aifrontendwritingcontent

🎨 Scraping

Fetch web pages, parse HTML with CSS selectors, call REST APIs, and scrape dynamic content. Use when extracting data from websites, querying JSON APIs, or automating browser interactions.

knoopxfrontend

🧪 Screenshot To Slack

This skill captures a webpage screenshot via Playwright and uploads it to Slack with an optional comment for context.

automationfrontendtestingdebugging

🎨 Semi Ui Skills

This skill helps you efficiently query Semi Design components, generate code, and troubleshoot usage with MCP workflows and best practices.

designfrontenddocscode-review

🧪 Senior Fullstack

This skill helps you coordinate frontend, backend, and infra decisions to design and scaffold full-stack projects efficiently.

fullstackfrontendbackenddevops

🛡️ Sensitive Browser

This skill securely executes sensitive browser actions such as login and payments via a dedicated CLI, keeping credentials isolated from the main agent.

securitycliautomationfrontend

🎨 Sentry Setup Metrics

Setup Sentry Metrics in any project. Use this when asked to add Sentry metrics, track custom metrics, setup counters/gauges/distributions, or instrument application performance metrics. Supports JavaScript, TypeScript, Python, React, Next.js, and Node.js.

troykellyfrontend

🎨 Seo Ai Search Skill

This skill helps you optimize metadata and structured data for AI-friendly SEO across React apps, improving discoverability and rich results.

seocontentanalyticsfrontend

🎨 Seo Audit Report

Document how to scaffold a Vite+React SEO audit report that ingest Search Console data, stores it in sql.js, and visualizes query/page KPIs.

younesbenallalfrontend

🎨 Seo Optimization Guide

This skill helps you implement comprehensive SEO strategies covering technical SEO, on-page optimization, and core web vitals to boost rankings and UX.

seoperformancefrontendnextjs

🛡️ Server Actions

This skill guides server actions and form handling in Next.js App Router, enabling secure mutations, validations, and revalidation through server-side logic.

frontendbackendfullstackapi

🎨 Server Components

This skill helps you master React Server Components in Next.js, guiding when to use server vs client, data fetching, and composition.

frontendbackendfullstackdata

🧪 Setup Playwright

This skill configures Playwright for end-to-end testing, providing ready-to-use fixtures, projects, and CI-ready defaults to streamline browser testing.

testingdevopsci-cdautomation

🧪 Setup Vitest

This skill configures Vitest for unit and integration tests, enabling seamless setup, coverage, and Testing Library integration.

testingunit-testsintegration-testsjavascript

🧪 Shabbat Times

This skill retrieves Shabbat and Jewish calendar data from Hebcal to power apps with accurate timings and holidays.

apibackendfrontenddata

🧪 Shadcn

This skill guides you to implement and customize shadcn/ui components using the latest version and modern patterns.

frontenduxaccessibilitydesign

🎨 Shadcn Layouts

This skill helps you generate correct shadcn/Tailwind layouts by applying CSS layout mental models to ensure scrolling, height, and grid correctness.

shadcnfrontendreacttypescript

🎨 Shadcn Management

This skill helps you manage shadcn/ui components, generate install commands, and assemble multi-component UI features efficiently.

frontendautomationscriptingproductivity

🎨 Shadcn Setup

Initialize Shadcn UI in an EXISTING Next.js or React (Vite) project.

wiztralfrontend

🎨 Shadcn Tailwind

This skill helps you design themed UIs with shadcn/ui and Tailwind v4 by applying semantic tokens, dark mode, and responsive patterns.

tailwindshadcnpythonfrontend

🎨 Shadcn Ui

This skill guides you to build accessible, component-based UIs with shadcn/ui in Next.js, including forms, dialogs, tables, and dark mode.

frontendaiautomationdesign

🎨 Shadcn Ui

This skill guides you through setting up shadcn/ui, installing components, and building accessible, Tailwind-styled React UI patterns.

reactshadcnaccessibilityux

🎨 Shadcn Ui

This skill helps you discover, install, and customize shadcn/ui components in your project with best practices and zero runtime overhead.

frontendreacttypescripttailwind

🎨 Shadcn Ui

This skill guides you in adding, customizing, and troubleshooting shadcn/ui components with CVA, theming, and architecture guidance.

shadcnfrontendtailwindreact

🛡️ Ship

This skill performs adversarial review, commits final changes, and records reflections to capture outcomes and improve future tasks.

code-reviewsecuritygitfrontend

🛡️ Shopify Apps

This skill guides you to scaffold, configure, and develop Shopify apps with Remix, Admin API, and checkout extensions end-to-end.

frontendbackendapidevops

🎨 Shopify Apps

This skill helps you implement Shopify app patterns using Remix/React Router, App Bridge, Polaris, and GraphQL Admin API with best practices.

backendfrontendfullstackapi

🎨 Shopify Developer

This skill provides a comprehensive Shopify development reference to accelerate Liquid, themes, APIs, and app builds with best-practice guidance.

apibackendfrontendperformance

🧪 Shopify Developer Skill

This skill helps you implement and debug Shopify theme architecture, Liquid, APIs, and checkout extensions with validated, versioned guidance.

frontendbackendapidebugging

🎨 Shopify Metafields

This skill helps you work with Shopify Metafields by using definitions, accessing via Liquid, and reading or writing with GraphQL.

frontendapidatagraphql

🎨 Shopify Pos

This skill helps you build Shopify POS UI extensions to add tiles, modals, and blocks across the smart grid and product screens.

frontendreactapiperformance

🛡️ Shopware6

This skill guides Shopware 6.6+ development by applying best practices across plugins, storefronts, admin modules, and apps to boost quality and speed.

backendfrontendapiperformance

🧪 Signal Forms

This skill helps you build type-safe Angular forms with built-in schema validation and real-time error handling for robust user input.

frontenddebuggingproductivitycode-review

🎨 Signup Flow Cro

This skill helps you optimize signup flows to maximize conversion by reducing friction, selecting fields, and choosing single-step vs multi-step forms.

growthproductanalyticsfrontend

🎨 Skill

This skill helps you build production-quality Rails UIs with maquina_components, using Tailwind and data attributes to ensure consistent, accessible interfaces.

railstailwindshadcnaccessibility

🛡️ Skill

This skill guides Stellar and Soroban development end-to-end, enabling secure asset issuance, dApp frontends, and RPC-driven integrations.

rustjavascriptfrontendtesting

🎨 Skill

This skill translates TemPad Dev UI evidence into project-native TypeScript code, enabling accurate integration without guessing styles.

frontendtypescriptdesignux

🛡️ Skill

This skill helps you implement Phantom Connect wallet integrations across React, React Native, and browser apps for Solana.

frontendfullstackapisecurity

🎨 Skill

This skill guides you through integrating AIRIOT client features for API, auth, forms, state, real-time data, and configuration to accelerate frontend

frontendapireacttypescript

🎨 Skill Search

Use when working with ANY external library, framework, tool, or API. Use when starting a project, adding dependencies, debugging unfamiliar code, or when user mentions technologies like React, Next.js, PostgreSQL, AWS, Docker, etc. Be generous - if there might be a skill, search for it.

tejasdcfrontend

🎨 Skills

This skill helps you scaffold and configure an Expo React Native app with RevenueCat paywall, AdMob banners, i18n localization, onboarding, and NativeTabs

frontendadsuxdesign