Frontend

This skill provides a complete toolkit for testing local web applications using Playwright. It includes helper scripts for managing server lifecycles, capturing browser console logs, discovering page elements, and automating interactions with both dynamic web apps and static HTML files.

A design methodology skill that guides creation of visually striking, memorable frontend interfaces. It provides principles for typography, color, motion, and spatial composition while encouraging bold aesthetic choices that avoid generic AI-generated looks. The skill contains no executable code - only design thinking frameworks and implementation guidelines.

A comprehensive reference guide for modern frontend development with React and Next.js. Covers component composition patterns, custom hooks, state management with Context/Reducer, performance optimization techniques (memoization, code splitting, virtualization), form handling, error boundaries, animations with Framer Motion, and accessibility patterns for keyboard navigation and focus management.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

This skill guides developers through migrating legacy AngularJS (1.x) applications to modern Angular (2+). It covers hybrid app setup for running both frameworks side-by-side, component and service conversion patterns, dependency injection changes, routing migration, and forms modernization with practical code examples.

A comprehensive frontend development skill that provides patterns and best practices for Next.js 14+ App Router, React Native with Expo, modern state management (Redux Toolkit, Zustand, Jotai), and Tailwind CSS design systems. Includes agent definitions for frontend and mobile development, plus component scaffolding templates.

This skill reviews your frontend UI code against Vercel's Web Interface Guidelines. It fetches the latest rules from GitHub and checks your specified files for compliance with accessibility, performance, and semantic HTML best practices, outputting findings in a concise file:line format.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

This skill provides comprehensive design guidelines for creating distinctive, production-grade frontend interfaces. It covers typography choices, color themes, motion/animations, spatial composition, and background effects while explicitly avoiding generic 'AI slop' aesthetics like overused fonts and clichéd color schemes.

A comprehensive reference guide for working with textures in Three.js. Covers texture loading, configuration options, UV mapping, cube textures, HDR environments, render targets, and performance optimization. Ideal for developers building 3D web applications who need quick access to texture-related patterns and best practices.

A reference guide for implementing user interactions in Three.js 3D applications. Covers raycasting for click detection, various camera controls (Orbit, Fly, FirstPerson, PointerLock), drag controls, selection systems, keyboard input handling, and coordinate conversions between world and screen space.

A comprehensive reference guide for Three.js geometry creation. Covers built-in shapes (box, sphere, cylinder, etc.), custom BufferGeometry with typed arrays, InstancedMesh for efficient rendering of many objects, and geometry utilities for merging and optimization.

This skill provides comprehensive guidelines for diagnosing and fixing UI animation performance problems. It covers rendering optimization rules across compositing, paint, and layout phases, with specific guidance for scroll-linked motion, blur effects, view transitions, and avoiding common performance pitfalls like layout thrashing.

This skill provides comprehensive accessibility guidelines for fixing UI issues. It offers a structured checklist covering accessible names, keyboard access, focus management, semantics, forms, announcements, contrast, and media. Use it to review files against WCAG standards and get targeted fix suggestions.

Baseline UI is a style guide skill that enforces opinionated UI constraints to prevent common AI-generated interface issues. It provides rules for Tailwind CSS usage, animation best practices, accessibility requirements, and component patterns. The skill can review files against these constraints and suggest fixes.

This skill provides comprehensive web UI design guidelines focusing on accessibility (WCAG 2.1 AA compliance), glassmorphism effects, dark mode support, and Tailwind CSS component patterns. It includes ready-to-use code snippets for buttons, cards, inputs, and layout systems with best practices for visual hierarchy, typography, and micro-interactions.

A UI verification skill that provides accessibility checklists for catching visibility issues, broken layouts, and contrast problems. It includes pre-flight checks for buttons, touch targets, states, dark mode, and responsive design, along with safe Tailwind color combinations and common fix examples.

A comprehensive React web development skill that enforces test-first development (TDD) methodology. It provides patterns for functional components, custom hooks, state management with Zustand and React Query, routing with React Router, form handling with React Hook Form and Zod, and testing with React Testing Library and Playwright.

Official Figma plugin connecting Claude Code to Figma designs via MCP server. Enables code generation from Figma frames, Code Connect component mapping, and design system rules creation.

Aberdeen is a reactive UI library for building web interfaces in plain TypeScript/JavaScript. It provides fine-grained reactivity using ES6 Proxies, automatic DOM updates without virtual DOM, built-in routing, component-local CSS with Tailwind-like shortcuts, and transition animations. The skill helps developers understand and use Aberdeen's API for creating reactive web applications.