mahir-m01/opencode/skills/ui-cloner
opencode/skills/ui-cloner/SKILL.md
# Skill: ui-cloner Analyze and reverse-engineer existing web interfaces, mapping their technology stack, and reproducing key components with modern standards. ## Core Mission - **Understand**: Map the framework, libraries (Three.js, Framer Motion, GSAP, Lenis, etc.), and design system accurately. - **Map**: Extract knowledge from site documentation/usage patterns. - **Implement**: Code elements as separate, reusable snippets/blocks using React, Next.js, Tailwind CSS, Lucide React, Lenis, GSAP,
$ install --global
skillsauthnpx skillsauth add mahir-m01/dot_files opencode/skills/ui-clonerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 7, 2026, 2:34 AM92.1s1 file scanned
SKILL.md
Skill: ui-cloner
Analyze and reverse-engineer existing web interfaces, mapping their technology stack, and reproducing key components with modern standards.
Core Mission
- Understand: Map the framework, libraries (Three.js, Framer Motion, GSAP, Lenis, etc.), and design system accurately.
- Map: Extract knowledge from site documentation/usage patterns.
- Implement: Code elements as separate, reusable snippets/blocks using React, Next.js, Tailwind CSS, Lucide React, Lenis, GSAP, Framer Motion, and Three.js.
- Goal: Recreate design patterns and features rather than exact site-wide HTML clones.
Required Tools
- agent-browser (Exclusive): Navigate, capture screenshots, extract DOM structure, and read documentation.
Workflow
Phase 1: Reconnaissance
- Explore the codebase: Read
package.jsonto identify framework and dependencies, styling approach, and component patterns. - Explore the target site: Navigate to the site using
agent-browser, map framework, libraries, and design system. - Capture & Analyze: Capture screenshots and snapshots to analyze layout, spacing, colors, typography, and component patterns visually.
Phase 2: Pattern Extraction
- Component Mapping: Break down complex UI into distinct, reusable components/blocks.
- Implementation: Default stack: React + Next.js + Tailwind + Lucide + Lenis + GSAP + Framer Motion + Three.js.
Phase 3: Output Compilation
- Compile: Create a folder within the project:
.ai-workflow/cloned-ui/{site-name}/.docs/: Mapped knowledge/docs/spec.components/: UI snippets/blocks.README.md: How to use/integrate extracted patterns.
Session Management
- Always create a new, isolated session for each task.
- Use the
--session <name>flag to name your session. - Close the session only when the task is completely finished.
Related Skills
mahir-m01/typeset
tools
VerifiedTrustedCommunity
Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.
1SKILL.mdUpdated Apr 7, 2026
mahir-m01/teach-impeccable
documentation
VerifiedTrustedCommunity
One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
1SKILL.mdUpdated Apr 7, 2026
mahir-m01/quieter
testing
VerifiedTrustedCommunity
Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
1SKILL.mdUpdated Apr 7, 2026
mahir-m01/polish
development
VerifiedTrustedCommunity
Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
1SKILL.mdUpdated Apr 7, 2026