Skills tagged "frontend" (1279)

🎨 Web Design Guidelines

Reviews UI code against Web Interface Guidelines and outputs concise findings

vercel-labsagent-skillsfrontend

64.2k

🎨 Next Best Practices

This skill helps you apply Next.js best practices across routing, data handling, and optimization to improve reliability and performance.

frontendbackendperformancedebugging

3.8k

🎨 Upgrading Expo

This skill guides you through Expo SDK upgrades and dependency fixes, including diagnostics, prebuild considerations, and breaking changes.

migrationdocsdebuggingfrontend

3.1k

🛡️ Create Auth

This skill guides you to add robust authentication in TypeScript/JavaScript apps using Better Auth across frontend, backend, and migrations.

backendfrontendfullstacksecurity

1.6k

🎨 Mobile Android Design

This skill helps you master Material Design 3 and Jetpack Compose to build adaptive Android interfaces with accessible responsive layouts.

designuxaccessibilityfrontend

1.1k

🎨 Turborepo

This skill guides configuring Turborepo monorepos by enforcing package-scoped tasks, proper caching, and root delegation for optimal parallel builds.

devopsbackendfrontendci-cd

923

🎨 Use Ai Sdk

This skill helps developers integrate and reason about the AI SDK to build agents, tools, and chat features efficiently.

aifrontendbackendapi

882

🎨 Baseline Ui

This skill enforces a consistent Baseline UI by guiding components to follow opinionated Tailwind and motion conventions with accessible primitives.

frontenddesignuxaccessibility

824

🎨 Swiftui Ui Patterns

This skill helps you design and refactor SwiftUI interfaces using pattern-driven guidance for views, tabs, and component composition.

frontenddesignuxaccessibility

481

🧪 Vue Best Practices

This skill helps you implement Vue 3 best practices with Composition API, TS, and structured components for maintainable, high-performance apps.

vuefrontendperformancetypescript

354

🎨 Tailwind Css Patterns

This skill helps you implement Tailwind CSS development patterns for mobile-first, responsive layouts, design tokens, and component reuse to speed up UI work.

frontenddesignuxproductivity

342

🎨 Vite

This skill helps you configure Vite, optimize builds, and harness fast updates with TypeScript support and a rich plugin ecosystem.

frontendperformancecliscripting

340

🎨 Vueuse

This skill helps you leverage VueUse composables for reactive state, browser APIs, and sensors, reducing custom code and ensuring SSR safety.

frontendperformancedebuggingdocs

326

🎨 Skills

This skill helps you create responsive HTML emails with React Email templates, enabling brand-driven designs across clients.

frontenddesignuxbranding

286

🎨 Skills

This skill helps you search and retrieve icons from Iconify libraries via a CLI and MCP server, speeding icon integration.

frontendapicliproductivity

227

🎨 Documentation Lookup

This skill fetches up-to-date library and framework documentation and provides accurate code examples for user questions.

frontendapidocswriting

152

🎨 Slidev

This skill helps you create and edit Slidev presentations quickly by generating slides, applying frontmatter, layouts, and components.

frontendproductivitydocsai

127

🎨 Web Perf

This skill analyzes web performance using Chrome DevTools MCP to reveal Core Web Vitals, render-blocking resources, and optimization opportunities.

performancedebuggingfrontendanalytics

126

🎨 Heroui Native

This skill helps you select, install, and customize HeroUI Native components for React Native with Uniwind support.

frontenduxperformancedocs

113

🧪 Playwriter

This skill automates web interactions in Chrome using Playwriter, runs Playwright code in a local sandbox, and captures screenshots and accessibility data.

automationfrontenddebuggingcli

99

🎨 Request Analyzer

This skill proactively analyzes each user request to determine task type, assess prompt quality, and suggest optimal skills for activation.

aiautomationfrontendanalytics

92

🎨 Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity and design-system integration using MCP server context for accurate

designfrontenduxaccessibility

81

🎨 Gsap React

This skill simplifies GSAP animations in React by providing useGSAP hooks, scoped refs, cleanup, and context utilities for reliable lifecycle handling.

frontendperformancedebuggingcode-review

70

🛡️ Auth Web

This skill helps you implement Web frontend authentication with CloudBase, supporting multiple login methods and seamless user management for your app.

cloudfrontendsecuritybackend

61

🎨 Infographic Creator

This skill creates compelling infographics from text using AntV Infographic, translating information into visual structures for quick understanding and

dataaifrontenddesign

61

🎨 Cloudbase Guidelines

This skill guides CloudBase development across web, mini programs, and backends, aligning with guidelines and MCP usage to boost reliability.

cloudbackendfrontenddevops

59

🎨 Expo App Design

This skill helps you design and implement cross-platform mobile apps using Expo Router, NativeWind, and React Native styling best practices.

frontenddesignuxproduct

58

🎨 Ui Ux Pro Max

UI/UX 设计情报库：50 种风格、21 套配色、50 组字体搭配、20 类图表、8 个技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。动作：plan、build、create、design、implement、review、fix、improve、optimize、enhance、refactor、check UI/UX code。项目：website、landing page、dashboard、admin panel、e-commerce、SaaS、portfolio、blog、mobile app

dcjanusfrontend

57

🎨 Datastar

Guide for building interactive web UIs with Datastar and gomponents-datastar. Use this skill when adding frontend interactivity to Go web applications with Datastar attributes.

maragudkfrontend

54

🛡️ React 19

This skill helps you write React 19 components and hooks efficiently by enforcing proper imports, server components-first patterns, and ref-as-prop usage.

frontenddebuggingrefactorcode-review

54

🎨 Flutter Architecture

This skill guides structuring Flutter apps with MVVM, feature-first organization, and clean layers to improve scalability, maintainability, and team

frontenddesignplanningrefactor

52

🎨 Spec Workflow

This skill guides structured software development from requirements to task execution using EARS syntax and UI-design references to ensure quality.

planningdesignfrontendbackend

50

🎨 Shopify Expert

This skill helps you build Shopify themes, apps, and headless storefronts with Liquid, Storefront API, and optimized checkout flows.

frontendbackendfullstackapi

49

🎨 Ui Freeze

Protects design and theme files from unintended changes. Locks tailwind.config, global CSS, and theme variables. Requires explicit confirmation before modifying UI components. Activate on changes to CSS, theme config, or layout components.

svenja-devfrontend

46

🎨 Relational Database Web

This skill enables browser apps to initialize CloudBase Relational Database with a single shared db client and use Supabase-style queries.

cloudfrontenddatabasejavascript

41

🧪 Chrome Devtools

This skill automates browser tasks with Puppeteer, capturing screenshots, scraping data, filling forms, and profiling performance for reliable web testing.

automationtestingperformancedebugging

39

🛡️ Cloud Storage Web

This skill helps you manage CloudBase cloud storage in web apps by uploading, generating temporary URLs, downloading, and deleting files with the Web SDK.

cloudfrontendapitypescript

39

🧪 Opentui

This skill helps you build robust terminal UIs with OpenTUI, guiding framework selection, components, layout, input, and testing practices.

frontendapitestingcli

39

🎨 Mastering Animate Presence

This skill audits AnimatePresence usage in TypeScript projects, delivering file:line findings and actionable improvements for exit animations and presence

reacttypescriptcode-reviewdebugging

38

🎨 Ai Model Web

This skill enables browser apps to generate and stream AI text using CloudBase JS SDK, with Hunyuan or DeepSeek models.

aicloudfrontendreact

37

🎨 Landing Page Guide V2

This skill creates distinctive, high-converting landing pages using Next.js 14+ and ShadCN UI, delivering memorable design and production-ready code.

frontenddesignmarketingseo

35

🎨 Nextjs Turborepo

This skill helps you optimize Next.js apps and manage monorepos with Turborepo, delivering faster builds and scalable architectures.

frontendfullstackperformanceci-cd

30

🎨 Tailwind Capacitor

Guide to using Tailwind CSS in Capacitor mobile apps. Covers mobile-first design, touch targets, safe areas, dark mode, and performance optimization. Use this skill when users want to style Capacitor apps with Tailwind.

cap-gofrontend

30

🎨 Brand Messaging Architecture

Provides brand messaging architecture, value proposition, and brand pillar development frameworks including Peep Laja's Message Layers, Osterwalder's Value Proposition Canvas, Geoffrey Moore positioning template, April Dunford's Five Components, StoryBrand SB7, Andy Raskin's Strategic Narrative, the

mike-coulbournfrontend

26

🎨 Mobile Responsiveness

This skill helps you implement responsive, mobile-first layouts and interactions across breakpoints, touch events, and viewport-safe navigation.

frontenduxdesign

24

🎨 App Store Review Skill

Evaluates code against Apple's App Store Review Guidelines. Use this skill when reviewing iOS, macOS, tvOS, watchOS, or visionOS app code (Swift, Objective-C, React Native, or Expo) to identify potential App Store rejection issues before submission. Triggers on tasks involving app review preparation

safaiyehfrontend

23

🎨 Infographic Template Updater

This skill updates template catalogs and UI prompts when new infographic templates are added, syncing lists across skill files and prompt references.

aiautomationdatafrontend

19

🎨 Api Integration Architect

Expert in API integration with React Query, SWR, RTK Query, REST/GraphQL clients, WebSocket real-time, optimistic updates, caching strategies, and error handling

deve1993frontend

18

🎨 Element Plus Vue3

This skill guides you through installing, configuring, and using Element Plus with Vue 3, including theming and API reference.

frontenddesignproductivity

18

🎨 Ui Design

This skill helps you craft production-grade frontend interfaces with distinctive visuals, cohesive layouts, and polished interactions for web pages and

frontenddesignproductreact

18

🎨 Tailwindcss Development

This skill helps you style components and pages with Tailwind CSS v3, enforcing project conventions, dark mode, and responsive patterns.

frontenddesignuxphp

16

🎨 Tailwind Ui

This skill helps you implement consistent Tailwind CSS patterns, responsive design, and accessible components using a utility-first approach.

frontenduxaccessibilitydesign

15

🧪 Clone Website

This skill converts a webpage into production-ready Next.js 16 code by scraping and proposing a detailed analysis before code generation.

frontendfullstackautomationcode-review

14

🎨 React Tanstack Mastery Skill

This skill helps you build and optimize React apps with TanStack libraries, ensuring clean code, scalable structure, and reliable performance.

frontendperformancedebuggingrefactor

14

🎨 Shopify

This skill helps you build and customize Shopify apps, themes, and extensions using CLI, APIs, and Liquid for seamless store enhancements.

backendapifrontendcli

14

🎨 Webgpu Threejs Tsl

This skill helps you build WebGPU-enabled Three.js apps using TSL shaders, node materials, and compute pipelines for GPU acceleration.

frontendperformancedebuggingdocs

14

🎨 Nextjs App Router Fundamentals

This skill helps you master Next.js App Router fundamentals, guiding migrations, layouts, routing, and metadata to build robust 13+ apps.

frontendmigrationdocsseo

13

🎨 Suggest Lucide Icons

This skill helps you pick Lucide icons that symbolize concepts or UI contexts with real icon recommendations and rationale.

designuxfrontenddocs

13

🎨 Arcgis Core Utilities

Core utilities including Accessor pattern, Collection, reactiveUtils, promiseUtils, and workers. Use for reactive programming, property watching, async operations, and background processing.

saschabrunnerchfrontend

11

🎨 Flowchart Creator

This skill generates interactive HTML flowcharts and process diagrams with nodes, arrows, and swimlanes for clear workflow visualization.

frontendautomationdesignux

10