frontend▌

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

Expert guidance for discovering, installing, and customizing shadcn/ui components in your project. \n \n shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in \n Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling \n Supports theme customization via CSS variables, component variants with class-var

Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.

Utility-first CSS framework patterns for responsive, component-based styling with Tailwind v4.1+. \n \n Covers responsive design with mobile-first breakpoints, flexbox/grid layouts, spacing scales, typography, colors, and interactive states \n Includes CSS-first configuration via @theme directive, custom utilities, and container queries for modern styling workflows \n Provides 10+ component patterns (cards, navigation, forms, modals) with accessibility guidelines and dark mode support \n Support

Build distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. \n \n Guides design thinking through purpose, tone, and differentiation before implementation, emphasizing bold aesthetic direction over generic defaults \n Covers five core design areas: typography (distinctive font pairing), color and theming (CSS variables, dominant colors with sharp accents), motion (CSS animations, scroll triggers, staggered reveals), spatial composition (asymmetry, overlap, grid-break

41 performance optimization rules for React Hook Form across form configuration, field subscription, validation, and component integration. \n \n Organized into 8 priority-ranked categories (form configuration and field subscription marked CRITICAL) with prefixed rule identifiers for automated refactoring and code generation \n Covers useForm setup, watch/useWatch patterns, useController isolation, validation resolver caching, useFieldArray best practices, and formState subscriptions \n Includes

Cross-platform mobile app development with Expo Router, NativeWind, and React Native. \n \n Provides navigation patterns using Expo Router for structured, file-based routing in mobile apps \n Includes styling guidance with NativeWind and Tailwind CSS for consistent, utility-first design across platforms \n Covers native UI components including tabs and animation patterns for polished mobile experiences \n Built on React and TypeScript for type-safe, maintainable code \n

Automated React codebase scanner that detects security, performance, correctness, and architecture issues. \n \n Generates a 0-100 diagnostic score with actionable findings across four categories: security vulnerabilities, performance bottlenecks, correctness errors, and architectural problems \n Designed for post-change workflows: run after code modifications, fix flagged issues, then re-run to verify improvements \n Supports verbose output and diff mode to highlight changes between scans \n Id

Skill by ara.so — Daily 2026 Skills collection.

Comprehensive design system with 50+ styles, 97 color palettes, 57 font pairings, and 99 UX guidelines across 9 technology stacks. \n \n Searchable database organized by priority (accessibility, touch interaction, performance, layout, typography, animation, styles, charts) with reasoning-based recommendations \n Supports 9 implementation stacks: HTML/Tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui with stack-specific best practices \n Includes critical access