Frontend

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.

This skill helps developers modernize React applications by providing comprehensive guidance on upgrading from React 16 to 18, migrating class components to functional components with hooks, and adopting concurrent features like Suspense and Transitions. It includes code examples, codemod commands, and migration checklists.

A comprehensive accessibility compliance skill that provides WCAG 2.2 guidelines, ARIA patterns, keyboard navigation implementations, and screen reader optimization techniques. It includes ready-to-use code examples for accessible React components including buttons, dialogs, forms, and focus management utilities.

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 comprehensive reference guide for Three.js shader programming. Covers ShaderMaterial and RawShaderMaterial usage, uniform types, varyings, common shader patterns like fresnel effects, noise, gradients, and rim lighting, plus performance optimization tips.

A comprehensive reference guide for Three.js post-processing effects. Covers EffectComposer setup, common effects like bloom, depth of field, anti-aliasing, and ambient occlusion, plus custom shader development and performance optimization tips.

A comprehensive Three.js materials reference guide covering all material types (Basic, Lambert, Phong, Standard, Physical, Toon, Shader), their properties, and usage patterns. Includes code examples for glass, car paint, environment maps, and custom GLSL shaders.

A reference skill for Three.js developers that provides comprehensive documentation on loading 3D models (GLTF, FBX, OBJ), textures (including HDR/EXR), and managing loading progress. Includes examples for async loading patterns, caching strategies, and error handling.

A comprehensive Three.js lighting reference covering all light types (AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight), shadow setup and optimization, image-based lighting with HDR environments, and common lighting patterns like three-point and studio setups.

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.

A comprehensive reference guide for Three.js fundamentals including scene setup, camera types (Perspective, Orthographic, Cube, Array), WebGL renderer configuration, Object3D hierarchy, and essential math utilities. Provides ready-to-use code snippets for common 3D graphics tasks like animation loops, responsive canvas handling, and proper resource cleanup.

A comprehensive reference guide for Three.js animation systems including keyframe animations, skeletal animation, morph targets, and animation blending. Provides code examples and best practices for creating smooth 3D animations in web applications.

A comprehensive reference guide for Vue 3 development with TypeScript. Covers vue-tsc strict template checking, Volar 3.0 migration, Pinia store mocking, Vue Router typed params, CSS modules, and various compiler options for catching type errors at compile time.

This skill provides comprehensive React Native performance optimization guidelines from Callstack's 'Ultimate Guide to React Native Optimization'. It covers JavaScript/React optimizations (FPS, re-renders, animations), native performance (Turbo Modules, memory management), and bundling optimizations (tree shaking, code splitting) with practical code patterns and debugging commands.

A comprehensive reference for Makepad/Robius widget development patterns. Provides production-ready code patterns for modals, tooltips, collapsible sections, drag-and-drop, grid layouts, LRU caching, hover effects, and responsive adaptive views extracted from real codebases like Robrix and Moly.

This skill provides comprehensive guidance for implementing event handling and action patterns in Makepad applications. It covers custom actions, widget-to-widget communication, centralized action handling, and various event types including keyboard, mouse, and timer events, with real-world examples from Robrix and Moly codebases.

A comprehensive reference skill for Makepad widgets and UI components in Rust. It provides detailed documentation, code examples, and best practices for building GUI applications using Makepad's View, Button, Label, TextInput, rich text rendering (Markdown/Html/TextFlow), and 80+ other widgets.

A comprehensive reference skill for Makepad's shader system. It provides documentation for writing GPU shaders using Makepad's custom shader language, including Sdf2d (Signed Distance Field 2D) APIs for drawing shapes, gradients, animations, and interactive effects like hover states and toggles.

This skill serves as an intelligent router for Makepad and Robius framework development questions. It analyzes user queries and loads appropriate sub-skills (like makepad-widgets, makepad-layout, makepad-animation) based on keywords, providing context-aware guidance for creating widgets, building apps, and designing UIs in Rust.

A comprehensive reference guide for Makepad UI framework developers. It provides troubleshooting solutions for common compilation errors, runtime issues, borrow checker conflicts, and shader problems, along with code quality guidelines that respect Makepad-specific patterns that should not be refactored.

This skill provides documentation and guidance for Makepad cross-platform development. It explains supported platforms (macOS, Windows, Linux, iOS, Android, Web), graphics backends (Metal, D3D11, OpenGL, WebGL), platform detection APIs, and conditional compilation patterns.

This skill provides comprehensive documentation for the Makepad UI framework's layout system. It helps developers understand and write layout code using Makepad's turtle-based layout model, including sizing (Fit/Fill/Fixed), flow directions (Down/Right/Overlay), alignment, spacing, and common layout patterns like sidebars and headers.