Skill UI

This skill provides comprehensive guidance on leveraging d3.js (Data-Driven Documents) to create sophisticated, interactive, and publication-quality data visualizations. It covers core concepts like data binding, implementing various chart types (network graphs, geo-maps, etc.), handling complex transitions, and ensuring responsiveness across modern JavaScript frameworks (React, Vue, Vanilla JS). Learn the standard workflow for scale definition, axis creation, and drawing custom visual elements with fine-grained control.

Mastery of modern frontend development using React 19+ and Next.js 15. This skill covers building scalable, high-performance user interfaces, managing complex client-server state, implementing advanced features like Server Components (RSC), and ensuring WCAG accessibility compliance. Ideal for architecting full-stack web applications and optimizing Core Web Vitals.

Guides React Server Components workflows, streaming SSR, code splitting, bundle/image/font optimizations, and Core Web Vitals monitoring to keep Next.js frontends fast and responsive.

This tool provides a comprehensive workflow for generating powerful, self-contained frontend artifacts for AI platforms. It initializes a React/TypeScript project using Vite and Tailwind CSS, allowing developers to build complex UIs. The core function is bundling the entire application into a single, shareable HTML file, making it easily viewable within AI conversations.

A comprehensive development tool for building and managing enterprise-grade transactional email systems. It supports modern React Email and MJML templates, generating production-ready code for major providers like Resend, Postmark, and SendGrid. Key features include multi-provider integration, internationalization (i18n), dark mode, spam score optimization, and advanced analytics tracking. Ideal for setting up new products or migrating legacy email infrastructure.

Generates complete, production-ready landing pages using Next.js/React and Tailwind CSS. It incorporates proven copywriting frameworks (AIDA, PAS, BAB), optimizes for SEO with structured data, and adheres to Core Web Vitals standards (LCP, CLS). Ideal for creating high-performing marketing homepages, lead capture forms, and campaign sites.

An expert guide for developing production-grade AI applications, chatbots, and generative UIs using the Vercel AI SDK, Next.js, and React. Covers core concepts including streaming text (`streamText`), managing chat state (`useChat`), implementing complex tool/function calling, and ensuring robust structured data generation (JSON schemas) across multiple LLM providers.

Astro is a modern web framework designed specifically for building high-performance, content-heavy websites like blogs, documentation sites, and portfolios. Its core innovation is the Islands Architecture, which ships zero JavaScript by default, drastically improving performance and Core Web Vitals. It supports multi-framework components (React, Vue, Svelte) in a single project, making it ideal for content developers prioritizing speed and flexibility.

This guide details the functionalities for interacting with Lark Instant Messaging (IM). It covers core concepts like message types, threads, reactions, and flags, and provides methods for managing chat history, creating/managing groups, and handling various message resources (images, files, videos). It is essential for applications needing robust chat communication capabilities.

A comprehensive, multi-chain reference architecture for building robust decentralized applications (dApps) powered by Alchemy. This guide outlines the full stack, from the React/Next.js frontend and API layer to core blockchain interactions, incorporating best practices like rate limiting, caching, and secure API proxying. Ideal for planning complex, production-grade Web3 systems across multiple chains (ETH, Polygon, etc.).

This workflow automates the design handoff process by creating a continuous pipeline from Figma designs to functional React code. It scans Figma components, generates code batches (supporting TypeScript, Tailwind CSS, etc.), and includes change detection to automatically update the codebase when the design source changes. Ideal for building complex design systems and implementing CI/CD design-to-code workflows.

This advanced workflow allows developers to clone live websites directly into structured React or HTML code using the Anima platform. It goes beyond simple cloning by featuring post-generation customization rules (e.g., updating utility classes or imports) and a dedicated design token mapper. This ensures the generated code is immediately usable and adheres strictly to the project's existing design system tokens, while also organizing the final component structure.