skills.rest
hunvreus
hunvreusCOMMUNITY
Explore all skills by this author →
Website𝕏@hunvreusGitHub

clonecn

Generate shadcn/ui themes with CSS variables from screenshots or URLs.

12|Updated Apr 13, 2026
Search Tags:#screenshots#theme#generate#design-system#shadcn-ui#dark-mode#css-variables
One-click install
npx skills add https://github.com/hunvreus/clonecn --skill clonecn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clonecn
Source: https://github.com/hunvreus/clonecn/tree/main/skills/clonecn
Command: npx skills add https://github.com/hunvreus/clonecn --skill clonecn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating and aligning consistent shadcn/ui themes from screenshots, URLs, or general style directions to speed up design-to-code handoffs and ensure design fidelity.

Core Features & Use Cases

  • Generate a complete shadcn/ui theme with CSS variables and a chosen style family (Nova, Vega, Maia, Lyra, Mira, or Luma) from a reference image or site.
  • Create light and dark mode variants with consistent typography, radius tokens, and color tokens, plus a final preview URL for validation.
  • Use inputs like screenshots, site URLs, or style prompts to produce design-system assets ready for integration.

Quick Start

Provide a screenshot, URL, or style direction to generate a shadcn/ui theme with a preview URL.

Frequently Asked Questions about clonecn

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

FAQPage Schema
How do I generate a shadcn/ui theme from a screenshot?▼

You can generate a shadcn/ui theme from a screenshot by providing the image as input, which the Skill processes to output complete CSS variables, tokens, and a final preview URL.

Can I create light and dark mode CSS variables for shadcn-ui from a website URL?▼

Yes, inputting a website URL generates a shadcn/ui theme complete with light and dark mode CSS variables, typography, and color tokens validated through a preview URL.

What style families are available when building a shadcn/ui design system?▼

Available style families for building a shadcn/ui design system include Nova, Vega, Maia, Lyra, Mira, and Luma, which define component styling alongside radius and color tokens.

Does clonecn work with general style directions or do I need an exact reference image?▼

You do not need an exact reference image; clonecn accepts general style directions or text prompts to generate a complete shadcn/ui theme with validated CSS variables.

What outputs do I get when converting a visual reference into shadcn-ui tokens?▼

Converting a visual reference outputs CSS variables, radius and color tokens, typography settings, a design reference mapping, and a final preview URL for complete design validation.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
verivendverivend

design-system

Document design tokens and shadcn-vue component mappings for Tailwind CSS.

Official
Intermediate
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
NextSpark-jsNextSpark-js

shadcn-theming

Initialize and customize shadcn/ui themes with CSS variables and OKLCH colors.

Official
Intermediate