copy-component
OfficialReplicate web components instantly.
Authorstrapi
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the process of copying and adapting UI components from live websites, significantly speeding up front-end development by reusing existing designs and structures.
Core Features & Use Cases
- Component Replication: Extracts structure, styles, and content from a specified section of a webpage.
- Design Token Mapping: Converts extracted CSS styles into local design system tokens (e.g., Tailwind CSS classes).
- Full-Stack Generation: Delegates the creation of Strapi schemas and React components to other skills, ensuring a complete, integrated solution.
- Use Case: A designer finds an attractive hero section on a competitor's website and wants to implement a similar component in the current project. This Skill can extract that section, map its styles to the project's design system, and initiate the creation of the corresponding Strapi content type and React component.
Quick Start
Use the copy-component skill to copy the hero section from https://strapi.io/pricing.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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: copy-component Download link: https://github.com/strapi/website/archive/main.zip#copy-component 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.