Skill UI

A comprehensive guide to utilizing a core, token-driven component library and design system patterns. It details best practices for managing UI styles—including spacing, color, and typography—by using semantic design tokens instead of hard-coded values. Ideal for building consistent, scalable, and maintainable user interfaces across different platforms.

Frontend Patterns documents modern React and Next.js UI best practices, covering component composition, compound components, render-props, reusable hooks, and context-reducer state management to build performant interfaces.

A modern, dark-themed UI component library built with React, Tailwind CSS, and Framer Motion. It provides a comprehensive set of components and styles ideal for developing professional dashboards, admin panels, and data-rich applications. Features include advanced glassmorphism effects and tasteful, smooth animations to enhance user experience.

This skill provides comprehensive patterns and templates for developing custom, reusable node components within the React Flow library. It ensures adherence to best practices by integrating proper TypeScript types and facilitating connection with global application state stores. Ideal for building complex, interactive workflow diagrams and visual programming interfaces.

A comprehensive collection of production-ready, reusable Terraform modules designed for standardized infrastructure provisioning across major cloud platforms: AWS, Azure, and GCP. This library enforces Infrastructure as Code (IaC) best practices, allowing users to build, test, and deploy multi-cloud compatible components efficiently and reliably.

This skill generates code to create complex, interactive 3D scenes and visualizations on the web using the Three.js library and WebGL. It covers the entire development lifecycle, including setting up the core components (Scene, Camera, Renderer), defining geometry, applying materials, adding lighting, and implementing animation loops. Ideal for web developers needing to display product mockups, scientific data visualizations, or immersive user experiences.

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.

Gradio is a powerful Python library designed for creating interactive web user interfaces and showcasing machine learning demos quickly. This skill covers core patterns like Interface, Blocks, and ChatInterface, allowing users to build complex applications, components, and event-driven chatbots with minimal effort. Ideal for rapid prototyping and deep learning model visualization.

Generates a precise, evidence-based installation plan for a project's component catalog (ECC). Instead of loading a full, noisy bundle, this skill analyzes the repository's actual code structure, dependencies, and CI/CD evidence to classify skills, rules, and commands into 'DAILY' (essential) and 'LIBRARY' (referenceable) buckets. It ensures only necessary components are active, optimizing the development environment.

This comprehensive guide outlines best practices for writing robust JavaScript and TypeScript unit tests using the Jest framework. It covers essential topics including proper test structure, effective dependency mocking strategies (using jest.mock and jest.spyOn), handling asynchronous code, implementing snapshot testing, and modern techniques for testing React components with React Testing Library. It also provides a detailed reference of common Jest matchers.

This guide details the process of implementing internationalization (i18n) in a Next.js application using the next-intl library. It provides step-by-step instructions on adding new languages, covering translation updates, configuring routing, modifying middleware, and updating UI components to ensure complete multi-language support.

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.