Skill UI

This expert specializes in scaffolding complete, production-ready, accessible, and performant React and React Native components. It generates full boilerplate code including TypeScript definitions, unit tests, styles (CSS Modules, Styled-Components, Tailwind), and accessibility hooks, ensuring adherence to modern best practices for scalable frontend architecture.

Automates frontend lazy-loading workflows by guiding best practices, generating React/Vue-ready code, and validating production configurations for accessible, high-performance web apps.

Guides building accessible Radix UI design systems using headless primitives, focusing on theming, composition, keyboard navigation and WCAG compliance for custom component libraries in React-based apps.

This comprehensive guide details how to control and audit the scope of code and data accessible by AI tools (like Codeium or Windsurf AI). Learn to implement robust data exclusion patterns, set compliance boundaries (e.g., HIPAA, GDPR), and configure secure deployment modes, ensuring sensitive data and secrets are never processed or retained by the AI model.

A comprehensive guide for building modern, accessible, and scalable user interfaces using the shadcn/ui component library. This document outlines core principles, best practices for component composition, styling rules (including Tailwind CSS usage), and structured approaches for forms and layouts. Essential for developers building complex design systems and ensuring code consistency.

This guide provides comprehensive patterns for migrating Enzyme unit tests to React Testing Library (RTL), especially when upgrading to React 18. It emphasizes the crucial philosophical shift from testing internal implementation details (like state or props) to asserting visible user behavior. Learn best practices for rewriting shallow/mount/simulate calls into modern, accessible, and resilient RTL queries, ensuring your tests reflect how a user genuinely interacts with the component.

This skill generates new UI components that strictly adhere to the StyleSeed design system conventions. It ensures the component is structurally sound, accessible, and uses specified design tokens for colors, spacing, and typography. Use this when creating isolated, reusable UI parts following the defined design system standards.

A powerful skill that enables natural-language interaction with complex DeFi protocols across multiple EVM chains. It acts as a non-custodial agent, interpreting user prompts (e.g., 'swap X for Y') into simulated, multi-step transactions (like approve + swap). It utilizes account abstraction (EIP-7702/ERC-4337) to simulate and queue secure, user-signed transactions via the CLI, making advanced DeFi accessible from the terminal.

This skill provides comprehensive, expert guidelines for building a robust and accessible Glassmorphism design system. It offers actionable rules for engineers and designers, covering style foundations (typography, color, spacing), component anatomy, state management, and WCAG 2.2 AA accessibility requirements. Use it to ensure visual consistency, high performance, and modern elegance across all platforms.

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.

A comprehensive guide to building highly accessible user interfaces using React and Next.js. Covers best practices for semantic HTML, proper ARIA attribute usage, managing form labels and error states, and ensuring full keyboard navigation support. Essential when developing any interactive component or form.

A comprehensive guide detailing idiomatic React 18/19 patterns. Covers core principles like component purity, side effect management, hooks discipline, state location decision trees, and advanced topics such as Server/Client Component boundaries (RSC), Suspense, error handling, and using React 19 form actions for building robust, performant, and accessible UIs.