react | Agent Skills

shadcn-ui

Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

reacttailwind-cssui-componentsreact-hook-form

giuseppe-trisciuoglio

472

react-patterns

Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.

reacttypescriptcomponent-compositionstate-management

giuseppe-trisciuoglio

472

frontend-component

Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".

reactvuetypescriptui-components

alekspetrov

504

artifacts-builder

一套基于现代前端技术（React、Tailwind CSS、shadcn/ui）的工具，用来创建复杂的 claude.ai HTML 成品。适用于需要状态管理、路由或 shadcn/ui 组件的复杂作品，不适用于简单的单文件 HTML/JSX。

reacttailwind-cssshadcn-uistate-management

LeastBit

10716

typescript

This skill should be used when the user asks to "configure TypeScript", "fix type errors", "use dayjs", "add type definitions", "set up React with TypeScript", mentions ".ts" or ".tsx" files, or asks about TypeScript best practices or TypeScript-specific tooling.

typescripttype-safetytool-usebest-practices

PaulRBerg

6111

typescript-rules

React/TypeScript frontend development rules including type safety, component design, state management, and error handling. Use when implementing React components, TypeScript code, or frontend features.

typescriptreacttype-safetystate-management

shinpr

7222

frontend-design

Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.

html-cssstylingui-componentsdesign-systems

YYH211

12713

react-patterns

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

reactreact-hookscomponent-compositiondesign-patterns

xenitV1

10917

frontend-ui-animator

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".

nextjsreacttailwind-cssanimation