Introduction.

Want to add your own website design to the registry? Here's how:

Each skill is a complete website design — HTML, CSS, React components, or Next.js pages — that you can copy-paste or install via the shadcn CLI. AI can then consume these references directly from your codebase.

Installation.

Install any skill using the shadcn CLI:

npx shadcn@latest add batraaryan03/100xsystems-design/open-design-landing-html

Install an illustration pack:

npx shadcn@latest add batraaryan03/100xsystems-design/open-doodles-style

Or browse the registryand copy the install command from any skill's detail page.

List available skills

npx shadcn@latest list batraaryan03/100xsystems-design

Available Skills.

Browse all available skills in the registry. Skills come in four types:

• Websites — Complete HTML, CSS, or React page designs
• Illustrations — SVG character and icon illustration packs
• Images — Textures, gradients, and background patterns
• Videos — CSS-animated looping backgrounds

Each skill includes live preview, source code, install command, and license attribution.

Add Your Own.

Want to add your own website design to the registry? Here's how:

Step 1: Create your design

Create your website design as a self-contained HTML file, or as separate HTML/CSS files, or as a React component.

Step 2: Add to the registry

Add your pack to public/registry/data.json:

{
  "id": "my-awesome-design",
  "slug": "my-awesome-design",
  "title": "My Awesome Design",
  "description": "A beautiful landing page",
  "tags": ["landing", "modern"],
  "framework": "html",
  "category": "landing",
  "files": [
    { "path": "index.html", "type": "component" }
  ],
  "installCommand": "npx shadcn@latest add batraaryan03/100xsystems-design/my-awesome-design",
  "license": "MIT",
  "author": { "name": "Your Name" }
}

Step 3: Add the files

Place your design files in public/registry/packs/my-awesome-design/

Step 4: Sync the registry

npx tsx scripts/sync-registry.ts

Step 5: Commit and push

git add .
git commit -m "feat: add my-awesome-design"
git push

Contributing.

We welcome contributions! You can:

• Add new website designs, illustrations, textures, or video loops
• Improve existing designs
• Report bugs or suggest features
• Improve documentation

Visit the contribute page for more details.