Skills tagged "frontend" (1279)

🎨 Animejs Skills

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

frontendscriptingdebuggingux

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

🎨 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

🎨 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

Create zero-dependency, animation-rich HTML slide decks from scratch or PowerPoint

zarazhangruifrontend-slidesfrontend

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

🎨 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

🎨 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

🎨 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

🧪 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

🧪 Dojo Client

This skill helps you connect and bind your game clients to a Dojo world, generating bindings and enabling real-time queries.

frontendbackendapidebugging

3

🎨 Epic Forms

This skill guides you through building Epic Stack forms with Zod validation and Conform for progressive enhancement, including file uploads and honeypot

frontendfullstackreacttypescript

3

🎨 Feature Sliced Design

This skill helps you implement Feature-Sliced Design in Next.js with a custom views layer, delivering scalable, maintainable architecture.

frontenddesignuxproduct

3

🧪 Frontend Ai Guide

This skill helps frontend teams apply rigorous technical decision criteria and anti-pattern knowledge to QA, design decisions, and debugging workflows.

frontenddebuggingtestingcode-review

3

🧪 Frontend Testing Best Practices

This skill helps you implement front-end testing best practices, prioritizing end-to-end tests, minimal mocks, and behavior-focused validation across the UI.

testingfrontendintegration-testsdebugging

3

🧪 Fundamentals

This skill helps you master TypeScript fundamentals, enabling safe typing with basic types, interfaces, and type annotations for robust code.

frontendbackenddocstesting

3

🎨 Graphics Troubleshooting

Debug and fix common issues in Three.js, React Three Fiber, and 3D asset pipelines. Use when encountering visual bugs, performance problems, loading failures, or unexpected behavior. Covers black screens, Z-fighting, memory leaks, shader errors, and physics glitches.

anthemflynnfrontend

3

🎨 Gs Zod Validation

This skill helps you enforce input shape with Zod in the presentation layer, while business rules live in entities and server actions use schemas.

backendfrontendtypescriptnextjs

3

🎨 Makepad Font

This skill helps you configure and render crisp text with Makepad fonts, layouts, and SDF-based GPU rendering.

frontendperformancedocsdesign

3

🧪 Mobile

This skill helps you develop mobile apps across iOS, Android, and cross-platform frameworks with best practices and architecture guidance.

aifrontendbackendapi

3

🎨 Modern Tailwind

This skill helps you implement clean, scalable UI with Tailwind CSS by following best practices for utilities, theming, and maintainability.

frontenddesignuxperformance

3

🧪 Openapi Ts V0

This skill generates type-safe TypeScript API clients from OpenAPI specs using @hey-api/openapi-ts with Zod validation.

frontendbackendapiautomation

3

🎨 React Patterns

This skill helps you leverage React 19 patterns including Server Components, Actions, use(), and concurrent features to build scalable, high-performance

reacttypescriptfrontendperformance

3

🎨 Reportlab

Python library for programmatic PDF generation and creation. Use when user wants to generate PDFs from scratch, create invoices, reports, certificates, labels, or custom documents with precise control over layout, fonts, graphics, tables, and charts. Supports both low-level drawing (Canvas) and high

silvainfmfrontend

3

🧪 Review

This skill opens an interactive markdown review UI to inspect content, capture feedback, and export approved changes.

code-reviewproductivityfrontend

3

🎨 Senior Fullstack

Expert full-stack development covering frontend frameworks, backend services, databases, APIs, and deployment for modern web applications.

borgheifrontend

3

🎨 Shadcn Baseui

This skill enforces Base UI patterns in shadcn/ui projects, preventing incorrect Radix UI guidance and ensuring render prop usage.

frontendreactnextjsshadcn

3

🎨 Slides

This skill generates a self-contained, cyberpunk-themed single-file HTML slide deck from user input, delivering a ready-to-share presentation with responsive

frontenddocspythonai

3

🧪 Standards Components

This skill guides building reusable, single-responsibility UI components with clear interfaces and composition for scalable frontend development.

frontenddesignuxaccessibility

3

🎨 Story Check

This skill provides the 12 critical story questions for screenplay evaluation. Covers concept, theme, audience reaction, beginning, ending, rising tensions, characters, protagonist, motivation, antagonist, and believability. Use when: evaluating a screenplay draft, identifying story weaknesses, prep

bybren-llcfrontend

3

🧪 Swift_combine

This skill helps you harness Swift Combine to manage asynchronous data streams with publishers, operators, and UI bindings for reactive apps.

frontenddatadebuggingtesting

3

🎨 Tailwindcss

This skill guides Tailwind CSS v4 usage with utility-first patterns, theme variables, and maintainable composition for scalable UI.

frontenddesignuxproductivity

3