Frontend

A reference skill for Makepad's font and text rendering system. Provides comprehensive documentation on font loading, text shaping, GPU-based text rendering with SDF (Signed Distance Fields), and DSL integration for styling text widgets in Makepad applications.

A reference skill for Makepad UI framework developers that provides comprehensive documentation on event handling (mouse, keyboard, touch, timers) and the action system for widget communication. Contains Rust code examples and API patterns without any executable scripts.

This skill provides expert guidance on the Makepad DSL (Domain Specific Language) used with the makepad-widgets Rust crate. It helps users write DSL code for UI components, understand inheritance patterns, link DSL to Rust structs, and follow best practices for the Makepad framework.

This skill provides documentation and code patterns for building cross-platform GUI applications using the Makepad Rust framework. It covers app structure, event handling, widget usage, and platform-specific setup for desktop, web, and mobile targets.

A comprehensive reference skill for the Makepad UI framework's animation system. It provides documentation on states, transitions, easing functions, keyframe animations, and Rust API patterns for building animated interfaces in Makepad.

A comprehensive skill for Makepad UI framework development that auto-routes queries to relevant sub-skills, detects compilation errors and suggests fixes, and provides templates for contributing patterns and documentation. Includes hooks for version detection, skill routing, and session learning capture.

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 mobile UI design reference for React Native developers. Provides patterns for touch targets, color contrast, typography, navigation, and animations with strict accessibility standards for iOS and Android platforms.

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.

A comprehensive React Native development guide covering project structure, component patterns, state management with Zustand and React Query, testing with React Native Testing Library, and platform-specific code handling. This is a pure documentation skill with no executable scripts.

This skill provides comprehensive guidance for building Progressive Web Apps (PWAs). It covers service worker implementation, caching strategies (Cache First, Network First, Stale While Revalidate), Workbox configuration, offline support, push notifications, and app-like features such as install prompts and share targets.

A comprehensive Flutter development guide covering Riverpod state management, Freezed data models, go_router navigation, and mocktail testing. Provides project structure templates, code patterns, CI/CD configuration, and common anti-patterns to avoid.

Provides comprehensive Android Java development guidance covering MVVM architecture, ViewBinding patterns, Activity/Fragment lifecycle management, unit testing with Mockito, instrumentation testing with Espresso, and GitHub Actions CI/CD configuration. Includes best practices for avoiding common Android anti-patterns like memory leaks and context leaks.

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.

Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.

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.