Skill UI

This skill generates a complete React component structure following the industry-standard Container/Presentation pattern. It automatically scaffolds necessary files, including TypeScript, Storybook, and SCSS styles, ensuring adherence to project conventions. Use this when building new, scalable components, allowing you to properly classify whether the component is UI-focused (Presentation) or logic-heavy (Container).

This comprehensive skill serves as an entry point for all web UI design needs, covering components, pages, dashboards, and advanced layouts using React, Vue, or pure HTML/CSS. It addresses not only aesthetics and polish (color, typography, spacing) but also deep structural concerns like responsive design, UX auditing, and visual system implementation. Use it whenever a user asks to improve the look, feel, or function of a digital interface.

A comprehensive guide to implementing isometric design in web and mobile applications, including CSS, SwiftUI, Flutter, and React Native code examples.

This comprehensive guide provides technical implementations for achieving a modern 'Layered Design' aesthetic. It teaches developers how to create depth, intentional overlapping, and clear stratification across various platforms. Includes detailed code examples for CSS, SwiftUI, Flutter, and React Native to build complex, dimensional user interfaces.

This comprehensive skill provides a holistic approach to building modern, accessible, and visually stunning user interfaces. It combines the highly accessible components of shadcn/ui (built on Radix UI), the utility-first power of Tailwind CSS, and sophisticated visual design principles (Canvas). Use this when developing complex React applications, implementing full design systems, ensuring responsive layouts across devices, and requiring professional-grade visual compositions, from dashboards to marketing posters. It guarantees consistency, accessibility, and rapid prototyping.

This skill provides comprehensive best practices for designing modern and robust React user interfaces. It covers critical patterns for managing asynchronous data, including optimal loading state indicators (skeletons vs. spinners), structured error handling hierarchies, and designing contextual empty states. Essential for improving user experience during data fetching and operations.

Provides comprehensive guidelines and utilities for modern unit testing using Jest and React Native. Covers Test-Driven Development (TDD) workflows, Behavior-Driven Development (BDD) principles, advanced mocking strategies for modules and GraphQL hooks, and implementing reusable factory functions for props and data. Use this skill to write robust, maintainable, and highly structured unit tests.

A comprehensive guide for developers on creating and writing native modules and views using the Expo Modules API. It covers platform-specific implementation details for Swift (iOS), Kotlin (Android), and TypeScript. Use this when integrating system APIs, wrapping platform SDKs, or building complex native functionality that goes beyond standard React Native components.

Use @expo/ui to build high-fidelity, native user interfaces across iOS and Android from a single React codebase. This library renders real native UI components, such as SwiftUI on iOS and Jetpack Compose on Android. It promotes a universal component layer for cross-platform consistency, while also providing controlled access to platform-specific optimizations and drop-in replacements for existing community libraries.

This comprehensive skill demonstrates advanced usage patterns for Formik, a popular React form handling library. It covers basic form setup, complex validation schema creation using Yup (including conditional logic), field helper utilities, and integrating form submissions with GraphQL mutations for both creation and editing scenarios.

This skill defines a framework-agnostic, scalable architecture pattern for React and React Native applications. It mandates feature modules, strict state separation (server vs. UI), and disciplined import rules to create predictable, maintainable, and highly scalable codebases, regardless of the chosen framework (Next.js, Remix, etc.).

This discipline establishes a portable, framework-agnostic layer for ensuring type safety at the network edge of any React or React Native application. It mandates a single, typed API client to wrap all network fetching, guaranteeing that raw wire JSON is immediately parsed into trusted, domain-specific types or standardized error objects before entering the application state. This pattern drastically reduces runtime errors and enhances code robustness.