skills.rest
Michae2xl
Michae2xlCOMMUNITY
Explore all skills by this author →
Website𝕏@michae2xlGitHub

Componentry

Provide React components with animated gradients and cursor-driven effects.

1|Updated Apr 7, 2026
Search Tags:#React#Tailwind CSS#UI components#interactive components#animated UI
One-click install
npx skills add https://github.com/Michae2xl/claude-skills-michael --skill componentry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Componentry
Source: https://github.com/Michae2xl/claude-skills-michael/tree/main/skills/componentry
Command: npx skills add https://github.com/Michae2xl/claude-skills-michael --skill componentry

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, tailwindcss, framer-motion, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a library of React components that enhance the visual impact of your UI, including animated and interactive elements.

Core Features & Use Cases

  • Interactive Components: Offers a variety of interactive components like cursor-driven typography, image ripple effects, and magnetic docks.
  • Visual Effects: Provides components for visual effects such as animated gradients, circuit board patterns, and particle galaxies.
  • Data Display: Includes components for displaying data like flight status cards, GitHub contribution calendars, and interactive keyboards.
  • Use Case: If you're building a pitch page or a Next.js/React project and need to add cool UI elements or animated components, this Skill can help.

Quick Start

Install the Componentry library and use the 'animated-gradient' component in your project.

Frequently Asked Questions about Componentry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add animated gradients and cursor-driven effects to my React UI?▼

You can add animated gradients and cursor-driven effects to your React UI by utilizing a component library like Componentry, which provides pre-built interactive elements using Tailwind CSS and Framer Motion.

Does Componentry work with Tailwind CSS 4 and React 19?▼

Yes, Componentry explicitly supports Tailwind CSS 4 and React 19. It is designed for web developers and designers focusing on UI/UX enhancement within modern React ecosystems without version compatibility issues.

How do I build interactive React components for a pitch page?▼

To build interactive React components for a pitch page, Componentry offers visually impressive elements such as particle galaxies, circuit board patterns, and flight status cards. These interactive UI elements enhance visual impact for Next.js or React projects.

What dependencies do I need to use Componentry components?▼

To use Componentry components, you need React, Tailwind CSS, and Framer Motion as dependencies. These frameworks power the interactive user interface elements and animated gradients within the library.

Can I display data like GitHub contribution calendars using React and Tailwind CSS?▼

Yes, you can display data like GitHub contribution calendars using React and Tailwind CSS with Componentry. It includes specific data display components for interactive keyboards and flight status cards to enhance visual data presentation.

Related Skills

Explore More Design & Creative Skills→
STier-AiSTier-Ai
5

frontend-ui-dark-ts

Build dark-themed React UIs with Tailwind CSS and Framer Motion.

Official
Intermediate
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
tranhieutttranhieutt
70

frontend-ui-dark-ts

Create dark-themed React dashboards with Tailwind CSS and Framer Motion.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced