원클릭으로 Manus에서 모든 스킬 실행

clone-website

스타2

포크0

업데이트2026년 2월 21일 17:52

Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

lucasgrow

lucasgrow/some-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Clone Website Skill

Transform any website into production-ready Next.js 16 code using Firecrawl MCP.

Workflow

Execute these 3 phases in order. Never skip Phase 2.

Phase 1: Scrape

Extract URL from user request
Identify section filter if specified (e.g., "hero only", "just the pricing")
Scrape using Firecrawl:

firecrawl-mcp___firecrawl_scrape:
  url: [TARGET_URL]
  formats: ["markdown", "html"]
  onlyMainContent: true

If scrape fails, fallback to firecrawl-mcp___firecrawl_crawl

Phase 2: Analysis (MANDATORY)

STOP. Present analysis to user before ANY code generation.

Read references/analysis-template.md and fill out the template with:

Detected sections and component breakdown
Extracted design tokens (colors, typography, spacing)
Image inventory with download/fallback status
Proposed file structure

Ask user: "Ready to proceed? (y/n or request modifications)"

Do not generate code until user confirms.

Phase 3: Code Generation

After user confirmation, generate files in this order:

app/globals.css - Design tokens as CSS variables
app/layout.tsx - Root layout with SEO metadata
components/landing/[Section].tsx - Each component
app/page.tsx - Main page composing components
Download images to public/images/

Reference references/tech-stack.md for Next.js 16 conventions. Reference references/component-patterns.md for component structure.

Tech Stack (Fixed)

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict)
Styling	Tailwind CSS v4
Components	Shadcn UI
Icons	Lucide React
Font	Geist Sans (default) or extracted

Image Handling

Extract all image URLs from scraped content
Attempt download via fetch
On failure, use Unsplash fallback:
- Hero: https://images.unsplash.com/photo-[id]?w=1920&h=1080
- Avatars: https://images.unsplash.com/photo-[id]?w=100&h=100
- Features: Prefer Lucide icons over images
Save to public/images/ with descriptive kebab-case names

Partial Cloning

Parse user request for section filters:

Request	Action
"clone the hero from X"	Generate only Hero.tsx
"clone pricing and footer"	Generate Pricing.tsx + Footer.tsx
"clone X" (no filter)	Full page clone

Code Standards

Mobile-first responsive design
Use Tailwind arbitrary values for pixel-perfection: w-[347px]
Extract repeated colors to CSS variables
Use cn() utility for conditional classes
Add brief comments only for non-obvious patterns
Prefer gap-* over margins for flex/grid spacing
Use size-* over w-* h-* when values match

이 저장소의 다른 Skills

같은 저장소

agent-browser

lucasgrow/some-skills

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

2026-02-212

ask-gemini

lucasgrow/some-skills

Asks Gemini CLI for coding assistance. Use for getting a second opinion, code generation, debugging, or delegating coding tasks.

2026-02-212

cron-management

lucasgrow/some-skills

Create, verify, and manage OpenClaw cron jobs reliably. Use when the user asks to schedule tasks, set reminders, create recurring jobs, or manage existing cron jobs. Triggers on: "remind me", "schedule", "cron", "every morning", "in 20 minutes", "recurring task", "set a timer", "lembrete", "agendar", "todo dia", "daqui a". Ensures correct sessionTarget/payload pairing, verifies jobs after creation, and handles delivery, isolation, and model overrides properly.

2026-02-212

diagram-generation

lucasgrow/some-skills

Mermaid diagram generation for architecture visualization, data flow diagrams, and component relationships. Use for documentation, PR descriptions, and architectural analysis.

2026-02-212

git-commit

lucasgrow/some-skills

A skill for writing Git commit messages. It follows rules combining Conventional Commits and Gitmoji to maintain a consistent commit history.

2026-02-212

humanizer

lucasgrow/some-skills

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.

2026-02-212

name

clone-website

description

Clone Website Skill

Transform any website into production-ready Next.js 16 code using Firecrawl MCP.

Workflow

Execute these 3 phases in order. Never skip Phase 2.

Phase 1: Scrape

Extract URL from user request
Identify section filter if specified (e.g., "hero only", "just the pricing")
Scrape using Firecrawl:

firecrawl-mcp___firecrawl_scrape:
  url: [TARGET_URL]
  formats: ["markdown", "html"]
  onlyMainContent: true

If scrape fails, fallback to firecrawl-mcp___firecrawl_crawl

Phase 2: Analysis (MANDATORY)

STOP. Present analysis to user before ANY code generation.

Read references/analysis-template.md and fill out the template with:

Detected sections and component breakdown
Extracted design tokens (colors, typography, spacing)
Image inventory with download/fallback status
Proposed file structure

Ask user: "Ready to proceed? (y/n or request modifications)"

Do not generate code until user confirms.

Phase 3: Code Generation

After user confirmation, generate files in this order:

app/globals.css - Design tokens as CSS variables
app/layout.tsx - Root layout with SEO metadata
components/landing/[Section].tsx - Each component
app/page.tsx - Main page composing components
Download images to public/images/

Reference references/tech-stack.md for Next.js 16 conventions. Reference references/component-patterns.md for component structure.

Tech Stack (Fixed)

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict)
Styling	Tailwind CSS v4
Components	Shadcn UI
Icons	Lucide React
Font	Geist Sans (default) or extracted

Image Handling

Extract all image URLs from scraped content
Attempt download via fetch
On failure, use Unsplash fallback:
- Hero: https://images.unsplash.com/photo-[id]?w=1920&h=1080
- Avatars: https://images.unsplash.com/photo-[id]?w=100&h=100
- Features: Prefer Lucide icons over images
Save to public/images/ with descriptive kebab-case names

Partial Cloning

Parse user request for section filters:

Request	Action
"clone the hero from X"	Generate only Hero.tsx
"clone pricing and footer"	Generate Pricing.tsx + Footer.tsx
"clone X" (no filter)	Full page clone

Code Standards

Mobile-first responsive design
Use Tailwind arbitrary values for pixel-perfection: w-[347px]
Extract repeated colors to CSS variables
Use cn() utility for conditional classes
Add brief comments only for non-obvious patterns
Prefer gap-* over margins for flex/grid spacing
Use size-* over w-* h-* when values match