Skill UI

Artifacts Builder scaffolds Claude.ai-ready React+TypeScript projects with Tailwind/shadcn/ui, automating init and Parcel bundling into a shareable single HTML artifact for complex UI experiences.

Creates complex claude.ai HTML artifacts by initializing a ready React+TypeScript Vite project, leveraging Tailwind and shadcn/ui components, and bundling everything into a single inline HTML file for sharing in conversations.

Generates a production-ready SaaS boilerplate with authentication, database schema, billing integration, API routes, and a dashboard built with Next.js 14 App Router, TypeScript, Tailwind, shadcn/ui, Drizzle ORM, and Stripe—ideal for bootstrapping new subscription-based products.

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.

A comprehensive guide for frontend engineers specializing in shadcn/ui. Learn best practices for component discovery, installation, and deep customization using Tailwind CSS and Radix UI. This resource covers project setup, component architecture, and advanced styling techniques for building robust, owned, and highly customizable applications.

Act as an expert design-system guideline author specializing in the Shadcn aesthetic. This skill generates comprehensive, implementation-ready design system documentation, covering foundational tokens (color, spacing, typography), component anatomy, interaction states (hover, focus, error), and strict accessibility requirements (WCAG 2.2 AA). It enforces semantic consistency and provides structured guidelines for developers and designers to build robust, clean UI components.

A comprehensive skill for building beautiful, accessible, and production-ready user interfaces. It combines the modularity of shadcn/ui components (built on Radix UI), the utility-first flexibility of Tailwind CSS, and the visual power of canvas-based design systems. Use this skill for implementing complete design systems, creating responsive layouts, managing themes (including dark mode), and generating polished visual assets across multiple applications.

Tinte is an agent-native infrastructure designed for generating, compiling, and managing consistent design systems from a single source of truth. It maintains a graph of 13 semantic OKLCH color tokens, compiling them into multiple formats including shadcn/ui presets, VS Code themes, and terminal configurations. Use it to ensure brand consistency, extract themes from images (via AI), and generate code previews with professional styling.

Generates, compares, and integrates multiple production-ready UI component variations using Magic by 21st.dev. Delivers modern, responsive TypeScript components inspired by premium design patterns like Shadcn UI, Magic UI and Tailwind CSS.

Skill for building powerful frontend claude.ai artifacts using React 18, TypeScript, Vite, Parcel, Tailwind CSS and shadcn/ui. Provides scripts to initialize, develop, bundle and test artifacts, with guidance to avoid common AI slop design patterns.

AI Elements is a component library built on shadcn/ui designed to help developers build AI-native applications faster. It provides pre-built components for conversations, messages, tool displays, and prompt inputs. Ideal for creating chatbots, AI assistants, or any AI-powered chat interface. Supports React and Next.js with easy CLI installation and full customization options using Tailwind CSS.