21st-dev-components
CommunityAssemble React sections from 21st.dev components.
AuthorJStaRFilms
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill routes between Auto mode and Manual mode to help users build React sites or app sections by leveraging 21st.dev components, turning reference layouts into actionable prompts and ready-made blocks.
Core Features & Use Cases
- Auto mode crawls a reference site URL, detects sections (hero, features, pricing, etc.), maps them to 21st.dev components, and integrates them into a React project.
- Manual mode guides the user to collect and assemble component prompts, handoffs, and code snippets for precise replication.
- Use cases include building a landing page from a reference site, cloning a UI with 21st.dev blocks, or translating prompts into ready-to-use component code.
Quick Start
Tell your agent to start in Auto mode with a reference URL, or switch to Manual mode to guide a handoff.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: 21st-dev-components Download link: https://github.com/JStaRFilms/VibeCode-Protocol-Suite/archive/main.zip#21st-dev-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.