skills.rest
strapi
strapiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

copy-component

Extract DOM structure and computed styles from live web pages into design tokens.

5|4|Updated Jan 30, 2026
Search Tags:#frontend#react#css#component#web scraping#replication#strapi
One-click install
npx skills add https://github.com/strapi/website --skill copy-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: copy-component
Source: https://github.com/strapi/website/tree/main/.agents/skills/copy-component
Command: npx skills add https://github.com/strapi/website --skill copy-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about copy-component

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

FAQPage Schema
How do I replicate a UI component from a live website?▼

Replicate a UI component by extracting the DOM structure and computed styles from the live web page, mapping the styles to local design tokens, and generating full-stack React implementations. This process handles adaptive desktop and mobile styling automatically.

Can I extract CSS from a webpage and convert it to Tailwind classes?▼

Yes, extracting CSS from a webpage and converting it to Tailwind classes is supported through design token mapping. The skill computes extracted styles and maps them directly to your local design system tokens for React component generation.

How do I generate a Strapi schema from an existing web component?▼

Generate a Strapi schema from an existing web component by extracting its DOM structure and content, then delegating schema creation to component scaffolding skills. This integration produces a complete Strapi content type alongside the React component.

Does web scraping for component replication work with responsive designs?▼

Web scraping for component replication handles responsive designs by computing adaptive styling for both desktop and mobile views. It extracts the structure and styles across breakpoints to ensure the generated React component matches the original layout.

What's the best way to copy a hero section from a competitor's website?▼

The best way to copy a hero section is to specify the target webpage URL and section, extract the DOM and computed styles, map them to your design tokens, and generate a full-stack React component integrated with a Strapi schema.

Do I need other skills to generate React components from scraped web pages?▼

Yes, you need component scaffolding skills to generate React components and Strapi schemas from scraped web pages. This skill extracts the structure and styles, then delegates the actual schema and code generation to those downstream skills.

Related Skills

Explore More Software Engineering Skills→
FirzusFirzus
1

extract-theme

Extract a website's visual theme into shadcn/ui and Tailwind CSS v4 tokens.

Community
Advanced
Ameen-AlamAmeen-Alam
1

theme-factory

Apply curated themes from a markdown catalog to slides and documents.

Community
Basic
nnkiennnnkienn
1

app-builder

Orchestrate full-stack application creation by coordinating specialized agents.

Community
Advanced
Mohamed-ElkahefMohamed-Elkahef

webapp-testing

Automates browser-based testing and debugging of local web applications using Playwright scripts.

Community
Intermediate