Design Skills · Vol. 01
MMXXVI · Open Source
Design Skills · Vol. 01A 100X Systems product·Open-source website designsv0.1.0 / MIT
DSDesign Skills
100X Systems★ GitHub
V.Contribute•001 / 001
Publish a Pack · Nº 01

Share your designs.

Contributed designs help the community grow. Follow these steps to publish your own website designs to the registry.

1

Create Your Design

Build your website design. It can be a single HTML file, a split HTML/CSS setup, or a React component. Make sure it works standalone without external dependencies (except fonts).

2

Prepare the Pack

Create a folder with your pack name (e.g., modern-landing). Include:

  • •Your design files (HTML, CSS, or React components)
  • •manifest.json (copy the template below)
  • •README.md with usage instructions
3

Fork & Add to Registry

Fork the repository, add your pack folder to public/registry/packs/, and update the registry index. Then open a pull request.

4

Submit Pull Request

Open a PR with your pack. Use the template below and include:

  • •Description of your design
  • •Screenshots or live preview links
  • •License information
5

Review & Merge

We'll review your PR for quality, formatting, and license compatibility. Once approved, your design will be available to the community!

Need Help?

Check out existing packs for reference, or open an issue on GitHub if you have questions about the contribution process.

Templates

manifest.json Template

json
{
  "id": "my-awesome-landing",
  "slug": "my-awesome-landing",
  "title": "My Awesome Landing",
  "description": "A beautiful landing page with modern design",
  "tags": ["landing", "modern", "responsive"],
  "framework": "html",
  "category": "landing",
  "assetType": "component",
  "screenshots": [],
  "files": [
    { "path": "index.html", "type": "component" }
  ],
  "dependencies": [],
  "installCommand": "npx shadcn@latest add batraaryan03/100xsystems-design/my-awesome-landing",
  "license": "MIT",
  "author": { "name": "Your Name" },
  "featured": false,
  "createdAt": "2026-06-16"
}

PR Template

markdown
## Add [Pack Name] to Registry

### What does this pack do?
A brief description of the design/template.

### Pack type
- [ ] Component (HTML/CSS/React website)
- [ ] Illustration (SVG illustration pack)
- [ ] Image (texture/photo/gradient pack)
- [ ] Video (video/animation pack)

### How to use it
1. Run `npx tsx scripts/sync-registry.ts`
2. Run `npx shadcn@latest registry validate`
3. Done!

### Checklist
- [ ] Pack follows naming convention: `[category]-[name]`
- [ ] All files in `files` array
- [ ] Entry added to `public/registry/data.json`
- [ ] `npx tsx scripts/sync-registry.ts` passes
- [ ] `npx shadcn@latest registry validate` passes
- [ ] License specified (MIT, Apache-2.0, or CC0)
- [ ] Author info complete
- [ ] Attribution for third-party assets