Skills tagged "frontend" (1279)

🧪 Devtools

This skill helps you set up and use Chrome DevTools MCP to debug, inspect, and automate browser tasks from Claude.

debuggingautomationfrontendtesting

🎨 Diagram Generator

This skill generates draw.io diagrams from natural language requests, outputs valid mxCell XML, and renders them in a browser preview.

aiautomationfrontendcloud

🎨 Diagram To Image

This skill converts Mermaid diagrams and Markdown tables into PNG or SVG images, enabling visual exports for platforms that don't support rich formatting.

aiautomationdatacontent

🎨 Dioxus

This skill should be used when asking about "Dioxus", "dioxus framework", "Rust UI framework", "RSX macro", "dioxus components", "dioxus signals", "hot reload in Dioxus", "WASM splitting", "wasm_split macro", "Manganis assets", "asset! macro", "dioxus Stores", "nested reactivity", "dioxus renderers"

nevaberryfrontend

🎨 Dioxus Knowledge Patch

This skill helps you write up-to-date Dioxus 0.5+ code, RSX, signals, server functions, and components across platforms.

rustfrontendfullstackcode-review

🎨 Display Html In Flutter

This skill helps Flutter developers display and interact with HTML content using easy_web_view across web and mobile platforms.

flutterjavascriptfrontenddebugging

🎨 Docs

This skill guides you to use the AIRIOT client for API, auth, forms, models, pages, and real-time data integration with TypeScript.

frontendapireacttypescript

🎨 Docs

This skill helps you search, retrieve, and bundle icons from the Unicon library for React, Vue, Svelte, or web projects.

frontendcliproductivityscripting

🎨 Docs Demo

This skill helps you add interactive demos to Remotion docs by guiding you through composing, registering, and embedding demos in MDX pages.

docsreacttypescriptfrontend

🎨 Document Design

This skill helps you design print-ready HTML documents with brand-aware CSS, producing clean PDFs and print-ready outputs.

designbrandingfrontenddocs

🎨 Document Writer

This skill helps you write clear Nuxt documentation and blog posts with proper grammar, structure, and MDC/nuxt-ui guidance.

docswritingcontentfrontend

🎨 Docusaurus Expert

This skill helps you build fast, SEO-optimized Docusaurus sites with MDX, plugins, and GitHub Pages deployment for production-ready docs.

docsseofrontendgit

🎨 Dust Writing React Effects

This skill guides writing React components to avoid unnecessary useEffect by deriving state during render and avoiding effect-driven updates.

reactfrontendcode-reviewrefactor

🧪 E2e Studio Tests

This skill runs Playwright e2e tests for the Studio app from the e2e/studio directory, enabling targeted and repeatable UI verification.

testingdebuggingautomationfrontend

🧪 E2e Testing

This skill helps you set up and run Playwright e2e tests and Lighthouse audits to ensure reliable UI and performance.

testingdebuggingperformanceautomation

🧪 E2e Testing Generator

This skill generates end-to-end test suites for web apps using Playwright, Cypress, or Selenium with page objects and accessibility checks.

testingautomationci-cdfrontend

🎨 Easy App Maker

This skill helps non-programmers rapidly create runnable web, mobile, or document apps by guiding through simple conversations and code generation.

frontendfullstackjavascripttailwind

🎨 Edge Rendering Strategies

This skill helps you optimize edge rendering strategies by distributing rendering to edge nodes to reduce TTFB and enable personalized caching.

performancecloudfrontendbackend

🧪 Effect Ts

This skill helps you implement and refactor Effect-TS patterns, services, and error handling, including Next.js integration with effects.

typescriptbackendfrontendtesting

🛡️ Electron

This skill helps you build cross-platform desktop apps with Electron by guiding main/renderer processes, IPC, windows, packaging, and best practices.

frontendfullstackdocsdebugging

🛡️ Electron Base

This skill helps you build secure Electron apps with type-safe IPC and protocol handling, improving cross-platform packaging and OAuth flows.

frontendbackendsecurityfullstack

🛡️ Encapsulation

This skill enforces encapsulation in TypeScript by guiding you to hide internal state and expose behavior through validated methods.

code-reviewdesignrefactorfrontend

🎨 Enhance Prompt

This skill transforms vague UI ideas into polished Stitch prompts with design system context and structured output for better generation results.

designuxfrontendai

🎨 Epic Routing

This skill guides you through Epic Stack routing with file-based conventions, loaders, actions, and parameter handling for clean, scalable apps.

reacttypescriptprismafrontend

🎨 Epsimo Agent

Interact with the EpsimoAI platform to manage agents, projects, and threads, and design frontends.

thierryteisseirefrontend

🎨 Excalidraw Skill

This skill helps you design and refine Excalidraw diagrams in real time, export/import scenes, and manage elements across a live canvas.

frontenddesignuxapi

🎨 Expo

This skill helps you accelerate cross-platform React Native development with Expo, router navigation, and EAS build strategy for rapid iteration and reliable

frontendperformancedebuggingci-cd

🎨 Expo Tailwind Setup

This skill configures Tailwind CSS v4 in Expo with NativeWind and react-native-css for universal styling across iOS, Android, and Web.

frontenddocsproductscripting

🎨 Faion Ui Designer

UI design: wireframes, prototypes, design systems, visual design.

faionfaionfrontend

🎨 Favicon

This skill generates a complete favicon set from a source image, updates project HTML, and configures a manifest for consistent branding across platforms.

frontendautomationscriptingdevops

🎨 Favicon Gen

This skill generates complete favicon packages from logos or text, delivering all formats and web manifest to ensure branded presence across platforms.

frontendbrandingdocsai

🧪 Feature Planning

This skill helps you break down feature requests into actionable, implementable plans with tasks, timelines, and clear integration points.

planningautomationbackendfrontend

🧪 Figma And Lit

This skill teaches you to build a Figma plugin using Lit web components, covering setup, UI creation, code integration, and testing.

frontendjavascripttypescriptdebugging

🎨 Figma Api

This skill helps you interact with the Figma REST API by guiding requests, authentication, and resource usage for files, components, and webhooks.

apibackendfrontenddocs

🎨 Figma Code To Canvas

This skill helps you push running UI code to Figma as editable design layers using the Code to Canvas MCP integration.

designuxautomationfrontend

🎨 Figma Illustration Import

This skill helps you convert multi-layer Figma illustrations into reusable React atom components with assets, stories, and theme support.

reactfrontenddesignux

🎨 Figma Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity using MCP workflows and design-system mapping.

designfrontenduxaccessibility

🎨 Figma Mcp Downloader

This skill downloads complete Figma design context and metadata to local files, ensuring 100% complete output before other workflows start.

cliautomationdesignproduct

🧪 Figma Storybook Workflow

This skill translates Figma designs into pixel-perfect Storybook components, enforcing one-at-a-time extraction, exact dimensions, and iterative refinement

frontenddesigncode-reviewtesting

🎨 File Review

This skill helps you review files and process review comments by launching the GUI, parsing feedback, and guiding installation.

code-reviewcliautomationfrontend

🎨 Firecrawl Claude Code Skill

This skill fetches web content, renders markdown, captures screenshots, and extracts structured data to keep you informed with current information.

frontendapidatadocs

🧪 Fix Issue

This skill helps you create a clear plan to fix a GitHub issue and implement it locally, accelerating debugging and validation.

planningdebuggingtestinggit

🧪 Fixing Accessibility

This skill helps you fix accessibility issues in UI by applying targeted, minimal changes that improve usability and compliance.

frontenduxdesignproduct

🎨 Fixing Motion Performance

This skill helps optimize animation performance by applying motion guidelines to CSS, WAAPI, and scroll-linked effects across the UI.

performancefrontenddebuggingux

🎨 Flowkit Naming

Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach.

webflowfrontend

🧪 Flutter

This skill helps you build Flutter apps by guiding widgets, state management, navigation, and platform integration with practical best practices.

frontenddesignuxproductivity

🛡️ Flutter

This skill accelerates Flutter Riverpod development by guiding state patterns, Freezed models, go_router navigation, and mocktail testing setup.

aifrontendtestingci-cd

🧪 Flutter Adaptive Ui

This skill helps you build adaptive Flutter UIs that gracefully respond to screen size and platform, enhancing usability across mobile, tablet, and desktop.

frontenduxaccessibilitydesign

🎨 Flutter Animations

This skill helps you implement Flutter animations effectively by choosing implicit, explicit, hero, staggered, and physics-based approaches for smooth UX.

frontenduxdesignperformance

🧪 Flutter Duit Bdui

This skill helps you integrate Duit into Flutter apps by wiring drivers, transports, and backend-driven UI with reusable components.

backendfrontendintegration-teststesting

🧪 Flutter Expert Skill

This skill helps you build beautiful, high-performance Flutter apps by applying official best practices for architecture, widgets, state, testing, and tooling.

frontendperformancedebuggingtesting

🎨 Flutter Internationalization

This skill helps Flutter developers implement localization with gen-l10n and intl, enabling multilingual UI, locale-aware formatting, and custom language

frontendperformancedebuggingdocs

🎨 Flutter Navigation

This skill helps you implement Flutter navigation and routing with Navigator and go_router, enabling deep linking, data passing, and web history.

frontendperformancedebuggingcode-review

🛡️ Flutter Networking

This skill provides comprehensive Flutter networking guidance for HTTP CRUD, WebSocket, authenticated requests, error handling, and performance optimization.

apiperformancefrontendsecurity

🎨 Flutter Project Creater

This skill creates a Flutter project with initialization, configuration, and template generation, streamlining setup for new Flutter apps.

cligitscriptingautomation

🧪 Flutter Widget Generator

This skill generates complete Flutter widget Dart files with state management and theming for immediate use

flutterfrontendautomationcode-review

🎨 Fluxui Development

This skill helps you build UI with Flux UI Pro components in Laravel Livewire, replacing HTML elements and accelerating component-driven interfaces.

laravelfrontendtailwinddesign

🎨 Fluxui Docs

This skill helps you quickly access Flux UI docs and implement free FluxUI components with Tailwind and Livewire guidance.

docsfrontenduxaccessibility

🎨 Fluxui Docs Pro

This skill helps you implement Flux UI Livewire components with Tailwind CSS across pages, cards, forms, and layouts.

frontenddocsuxaccessibility

🧪 Form Validation With Zod

This skill enforces form validation with Zod across projects, reviewing code, suggesting improvements, and refactoring to ensure strong, type-safe validation.

frontendfullstackcode-reviewrefactor