skills.rest
VXerys
VXerysCOMMUNITY
Explore all skills by this author →
GitHub

refactor-21st-ui

Refactor 21st.dev UI components to Next.js App Router and shadcn/ui standards.

Updated Feb 24, 2026
Search Tags:#Next.js#Framer Motion#Tailwind CSS#GSAP#Lenis#ui-component-refactoring
One-click install
npx skills add https://github.com/VXerys/marketiv-web --skill refactor-21st-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-21st-ui
Source: https://github.com/VXerys/marketiv-web/tree/main/.github/skills/refactor-21st-ui
Command: npx skills add https://github.com/VXerys/marketiv-web --skill refactor-21st-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill converts raw UI components from 21st.dev into a format compatible with your project's standards, ensuring consistency and maintainability.

Core Features & Use Cases

  • Component Refactoring: Converts 21st.dev components to use Next.js App Router client boundaries, shadcn/ui conventions, and hybrid animation policies.
  • Use Case: If you have a 21st.dev component using Framer Motion and Tailwind CSS, you can use this Skill to integrate it with your project standards.

Quick Start

Use the refactor-21st-ui skill to transform the raw 21st.dev component code into your project's standards for the file 'myComponent.tsx'.

Frequently Asked Questions about refactor-21st-ui

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

FAQPage Schema
How do I convert 21st.dev UI components to Next.js App Router conventions?▼

To convert 21st.dev UI components to Next.js App Router conventions, this Skill refactors raw component code by enforcing client boundaries and aligning imports with shadcn/ui standards for seamless project integration.

What is the best way to manage Framer Motion and GSAP animations in a Next.js project?▼

Managing Framer Motion and GSAP animations involves applying a hybrid policy: GSAP and Lenis handle scroll and macro-interactions, while Framer Motion manages micro-interactions to maintain performance consistency.

Can I use 21st.dev components with shadcn/ui conventions?▼

You can use 21st.dev components with shadcn/ui conventions by refactoring the raw component files to transform utility classes and imports into your project's specific configuration standards.

How do I integrate Tailwind CSS utility classes from 21st.dev into my existing project?▼

To integrate Tailwind CSS utility classes from 21st.dev into an existing project, the Skill processes the raw component code and converts the utility classes to match your project's defined formatting and styling standards.

Does this refactoring process handle scroll animations using Lenis?▼

Yes, the refactoring process handles scroll animations using Lenis by integrating it with GSAP for macro scroll-interactions, while converting component animations to fit the hybrid animation policy.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
darkroomengineeringdarkroomengineering
41

lenis

Set up Lenis smooth scroll in Next.js/React projects with provider and useLenis hook.

Official
Intermediate
sonth87sonth87
1

shadcn-design-system

Provide React components and utility hooks for Tailwind CSS interfaces.

Community
Intermediate
secondskysecondsky
204

aceternity-ui

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

Community
Advanced