Skills tagged "frontend" (1332)

🎨 Web Design Guidelines

This skill reviews UI code against Web Interface Guidelines and outputs concise file:line findings to improve accessibility and consistency.

accessibilityfrontenddesigncode-review

64.2k

🎨 Frontend Design

This skill helps you design production-grade frontend interfaces with bold aesthetics and polished code for components, pages, and apps.

frontenddesignuxaccessibility

34.9k

🧪 Agent Browser

This skill automates web navigation, form filling, and data extraction using browser interactions to boost testing and data gathering efficiency.

automationtestingcliscripting

7k

🎨 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

🎨 React Email

This skill helps you rapidly scaffold and preview React Email templates for transactional emails across clients.

reactfrontendtailwindtypescript

928

🎨 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

🧪 Frontend Code Review

This skill helps you review frontend code efficiently by inspecting pending changes or targeted files using a comprehensive checklist for quality, performance,

frontendcode-reviewperformancedebugging

751

🛡️ Stripe Best Practices

This skill guides Stripe integration design using CheckoutSessions and APIs, ensuring up-to-date practices and safe migration paths for robust payments.

apibackendfrontendfullstack

580

🎨 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

🎨 Web Perf

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

performancedebuggingfrontendanalytics

304

🎨 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

🎨 Color Palette

This skill generates complete, accessible color palettes from a brand hex, including 11-shade scales, semantic tokens, dark mode, and WCAG checks.

brandingdesignaccessibilityfrontend

206

🎨 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

🎨 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

🎨 Vueuse Functions

This skill guides selecting and implementing VueUse composables to build concise, maintainable Vue.js / Nuxt features with optimal performance.

frontendperformancerefactorcode-review

88

🎨 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

🎨 Custom Ui

This skill helps you tailor Clerk component appearance by applying themes, layout, colors, and fonts to match branding.

frontendnextjsdesignux

78

🎨 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

🎨 Ios Ux Design

This skill analyzes iOS UI/UX, applies Human Interface Guidelines, and proposes interface improvements with SwiftUI patterns and accessibility in mind.

uxdesignaccessibilityfrontend

68

🛡️ 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

🎨 Gsap Fundamentals

This skill helps you learn and apply core GSAP animation concepts like tweens, timelines, and easing to create smooth web animations.

frontendperformancescripting

38

🎨 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

🧪 Angular Development

This skill helps developers build modern Angular apps with standalone components, routing, forms, signals, and DI, following official guidance.

frontendproductivitycode-reviewdebugging

32

🎨 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