frontend▌

Automated frontend code review against a multi-category checklist, supporting both pending-change and targeted file reviews. \n \n Triggers on user requests to review frontend files ( .tsx , .ts , .js ) and applies a canonical checklist across Code Quality, Performance, and Business Logic categories \n Supports two review modes: pending-change review for staged/working-tree files before commit, and file-targeted review for specific named files \n Flags violations with urgency metadata (Urgent vs

Install and configure shadcn/ui components in themed React projects with guided component selection and common UI patterns. \n \n Requires tailwind-theme-builder to have set up CSS variables, ThemeProvider, and dark mode infrastructure first \n Covers 20+ components organized by category: foundation (button, input, card), forms (form, textarea, select), feedback (toast, alert), overlays (dialog, sheet, popover), data display (table, tabs), and navigation \n Documents installation order, external

Establish design tokens, spacing systems, and color palettes for cohesive, accessible visual designs. \n \n Provides modular typography scale, 8-point spacing grid, semantic color tokens, and iconography system with CSS variable templates \n Includes WCAG contrast requirements (4.5:1 for body text, 3:1 for UI), dark mode implementation patterns, and font-pairing guidelines \n Covers responsive typography with clamp() , color accessibility checking, and vertical rhythm techniques for visual consi

Use this skill to navigate a locally synced Tailwind CSS v4 documentation snapshot and answer development, configuration, and migration questions with official guidance.

Best practices and patterns for building SwiftUI views, navigation, and state management. \n \n Covers state ownership strategies (from @State and @Binding to @Observable on iOS 17+), async/await patterns with .task , and environment injection for shared dependencies \n Includes cross-cutting references for NavigationStack routing, sheet presentation, deep linking, and app-level wiring with concrete ownership rules \n Provides component-specific guidance via indexed references, with anti-pattern

Cross-platform mobile apps with React Native styling, navigation, and performant Reanimated animations. \n \n Covers StyleSheet patterns, dynamic styling, Flexbox layouts, and platform-specific designs for iOS and Android \n Includes React Navigation 6+ setup for stack and tab navigators with type-safe route definitions \n Provides Reanimated 3 fundamentals including shared values, animated styles, and Gesture Handler integration for drag interactions \n Features best practices for performance (

Generate Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities. \n \n Covers component rendering, props validation, user interactions, edge cases, and async operations with Vitest 4.0.16 and React Testing Library 16.0 \n Enforces incremental, one-file-at-a-time testing workflow for multi-file directories; process by complexity (utilities → hooks → simple components → complex components → integration) \n Requires integration-first approach: import real project

125+ accessible Vue components with Tailwind CSS theming, built on Reka UI for rapid interface development. \n \n Supports Nuxt, Vue (Vite), Laravel (Inertia), and AdonisJS with unified component API across frameworks \n Includes 200,000+ Iconify icons via i-{collection}-{name} naming, with local collection support and custom icon directories \n Seven semantic colors (primary, secondary, success, info, warning, error, neutral) configurable at runtime; override components via ui prop, class prop,

Production-ready React Native patterns with Expo, navigation, offline-first architecture, and native module integration. \n \n Covers Expo Router for file-based navigation, authentication flows with secure token storage, and route protection patterns \n Includes offline-first data sync using React Query with AsyncStorage persistence and online status detection \n Demonstrates native module integration for haptics, biometrics, push notifications, and platform-specific code patterns \n Provides pe

To build powerful frontend claude.ai artifacts, follow these steps: