Skills tagged "frontend" (1335)

🎨 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

🧪 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

🎨 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

🎨 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

🎨 Animejs Skills

This skill helps you implement web animations using Anime.js v4, covering timelines, SVGs, scroll effects, and draggable interactions.

frontendscriptingdebuggingux

9

🎨 Dashboard Creator

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

frontenddataanalyticsdesign

9

🧪 Ux Specification

This skill translates PRDs into actionable UX specifications, detailing flows, screens, and interactions to guide implementation.

uxdesignproductplanning

9

🧪 Accessibility Tester Skill

This skill audits and remediates WCAG 2.1/2.2 AA compliance through automated testing, screen reader validation, and actionable remediation guidance.

accessibilitytestingci-cdautomation

8

🎨 Remotion Video Skill

This skill helps you create programmatic videos using Remotion with React components, delivering data-driven visuals, subtitles, and AI voiceover integration.

frontendaiscriptingdata

8

🎨 Frontend Design

This skill helps design and review SaaS frontends, clarifying value, improving hierarchy, and delivering production-grade UI that converts.

designuxfrontendproduct

7

🎨 Gluestack Ui V4

This skill helps you create and manage custom gluestack-ui v4 variants using tva for type-safe, scalable design system extensions.

frontenddesignreacttypescript

7

🎨 Pen Design

This skill helps you create and manipulate Pencil .pen designs, read and modify components, and generate code from designs.

designfrontendproductivityscripting

7

🎨 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

7

🎨 Using Shadcn Ui

This skill helps you rapidly build accessible React UIs with shadcn/ui by copying production-ready blocks and integrating Tailwind patterns.

frontendaccessibilitydesign

7

🎨 A2ui_skills

This skill generates A2UI protocol v0.8 compliant UI code and JSONL messages to build agent-driven surfaces across platforms.

frontendapidataux

6

🎨 Flutter Api

This skill provides a comprehensive Flutter API reference guide that accelerates cross platform development by detailing widgets, layout, animations,

apifrontenddocswriting

6

🎨 Frontend Slides

This skill helps you create zero-dependency, animation-rich HTML slide decks from scratch or PPTs, delivering production-ready presentations with distinctive

frontenduxaccessibilityproduct

6

🎨 Performance Optimizer

Expert in React performance optimization, code splitting, lazy loading, memoization, bundle analysis, Core Web Vitals, Lighthouse audits, and runtime performance profiling

deve1993frontend

6

🎨 Shadcn Vue

This skill helps you scaffold and configure shadcn-vue projects with Tailwind, Vite, and TypeScript for accessible UI components.

frontenduxaccessibilitydocs

6

🎨 Tailwind Shadcn Ui Setup

This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup

hopeoverturefrontend

6

🎨 Adynato Mobile

This skill helps you implement and optimize React Native Expo mobile apps with API-driven UI, navigation, performance, and platform considerations.

frontendapiperformance

5

🤖 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

5

🎨 Framer Expert

This skill helps you master Framer workflows from design to production, including MCP integration, motion, and CMS for fast, polished web experiences.

aifrontendproductivityautomation

5

🎨 Gemini Nano Chrome Extension Skill

This skill helps you build Chrome extensions that run on-device AI for text generation, summarization, translation, and writing directly in the browser.

aifrontendapiwriting

5

🧪 Hotwire Patterns

This skill helps you implement and orchestrate Hotwire patterns (Turbo Frames, Streams, Stimulus) for real-time, interactive Rails UIs.

frontendbackendfullstacktesting

5

🎨 Hula Skill

This skill enables consistent frontend, backend, fullstack, and build-release changes for HuLa by applying repo conventions and templates.

frontendbackendfullstackrelease

5

🎨 Skills

This skill helps you manage npm packages and run scripts safely through a unified utoo interface, boosting project setup and maintenance efficiency.

frontendclijavascripttypescript

5

🛡️ Tauri Architecture

This skill explains Tauri architecture, core-shell design, IPC, and security, helping you architect desktop apps with a safe Rust backend and native webview

backendfrontendsecuritydesign

5

🎨 Threejs Skills

This skill helps you create high-quality 3D scenes and interactive visuals using Three.js with CDN-r128 best practices.

frontendjavascriptpython

5

🧪 Ui Extractor

This skill analyzes UI sources like URLs and recordings to generate implementation specs, design systems, and component catalogs.

frontenddesignuxjavascript

5

🎨 Uniapp

This skill helps you develop cross-platform uni-app apps by applying official guidance across platforms, components, and lifecycle with best-practice patterns.

vuetypescriptfrontendproduct

5

🎨 Ant Design

This skill helps you select Ant Design components and theming strategies for a performant, accessible SSR React app using v6 and Pro/X patterns.

reactfrontendperformanceaccessibility

4

🎨 Base Ui Docs

Base UI (@base-ui/react) の公式ドキュメント参照とAPI確認を行うためのスキル。Base UIのコンポーネント/ハンドブック/概要に関する質問が来たら使う。

yumehikofrontend

4

🎨 Composable Svelte Navigation

This skill helps you implement state-driven navigation and Motion One animations for modals, sheets, and route transitions in Composable Svelte.

frontenduxproductdesign

4

🎨 Design Exploration

This skill generates a visual design catalogue with multiple proposals to explore directions before implementing.

designuxresearchfrontend

4

🎨 Epic React Patterns

This skill helps you implement React patterns, optimize performance, and maintain code quality in Epic Stack apps.

reactperformancerefactorcode-review

4

🎨 Plugin Installer

Find, install, and configure OpenCode plugins from the catalog or community. Use proactively when user asks about plugins, requests new capabilities, or mentions extending OpenCode functionality. Examples: - user: "Is there a plugin for Tailwind CSS?" → list catalog, read tailwind plugin details, in

igorwarzochafrontend

4

🛡️ Storyblok

This skill helps you apply Storyblok best practices for content modeling, SDK integration, and visual editor setups to accelerate agency development.

contentapifrontendperformance

4

🎨 Tauri Project Setup

This skill guides you through setting up Tauri v2 projects, including prerequisites, scaffolding, and project structure for multiple frontends.

frontenddevopscliscripting

4

🧪 Tdd Mastery

This skill enforces strict test-first discipline to deliver robust JavaScript code by guiding you through the red-green-refactor cycle.

testingunit-testsrefactorfrontend

4

🎨 Theme Factory

Style artifacts with 10 pre-set themes including colors and fonts for slides, docs, and pages

anthropicsofficialfrontend

4

🎨 Vercel React

This skill helps you optimize React and Next.js performance by applying Vercel best practices across components, pages, and data fetching.

performancefrontendcode-reviewrefactor

4

🎨 Web Artifacts Builder

Create elaborate multi-component claude.ai HTML artifacts with React, Tailwind, and shadcn/ui

anthropicsofficialfrontend

4

🧪 Workleap Chromatic Best Practices

This skill audits and updates repositories to enforce Workleap Chromatic best practices, optimizing snapshot costs and CI efficiency.

typescriptci-cdtestingautomation

4

🧪 Agent Browser

This skill drives browser-based UI validation by executing agent-browser commands to open pages, perform interactions, and capture DOM evidence for Ralph tasks.

frontendtestingautomationcli

3

🎨 Ai Sdk Ui

This skill helps you build AI-powered chat, streaming, and generative UI in React/Next.js with the Vercel AI SDK.

aifrontendfullstackapi

3

🎨 Angular Signals

Reactive state management with Angular Signals including signal(), computed(), linkedSignal(), effect(), and RxJS interop. Use when managing component state, creating derived values, handling side effects, or converting between signals and observables in Angular 16+.

simon-jarillofrontend

3

🎨 Animejs V4

This skill enables smooth web components animations using Anime.js 4 for drag interactions, visual feedback, swaps, and automatic cleanup.

frontendperformancescriptingdebugging

3

🛡️ Auth

This skill guides you through interactive authentication with the browse CLI, helping securely complete login flows and MFA prompts.

clisecurityautomationdebugging

3