Frontend Development (1062)

🎨 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

🎨 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

🎨 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

🎨 Swiftui Ui Patterns

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

frontenddesignuxaccessibility

481

🎨 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

🎨 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

🎨 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

🎨 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

🎨 Canvas Design

This skill creates visual design philosophy artifacts and expresses them as printable posters, infographics, and canvases in PNG or PDF formats.

designuxbrandingproduct

48

🎨 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

🎨 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

🎨 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

🎨 Screenshot To Code

This skill converts UI screenshots into production-ready React code with responsive layouts and accessible HTML/CSS.

frontendcode-reviewaccessibilitydesign

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

🎨 Frontend React Best Practices

This skill helps you optimize React components and bundles by applying best-practice guidelines for performance, memoization, and reusable architectures.

reactperformancerefactorcode-review

14

🎨 Micro Interactions

This skill helps design micro-interactions by applying Disney's animation principles to small UI feedback moments for more engaging interfaces.

frontenduxdesignaccessibility

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

🎨 Bencium Innovative Ux Designer

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

benciumfrontend

13

🎨 Jetpack Compose

This skill helps you build Android UIs with Jetpack Compose by managing state and declarative patterns for responsive, reusable components.

kotlindebuggingperformancefrontend

13

🎨 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