Social Shots

A curated collection of UI/UX design shot assets by Rakibul, including:

• Dribbble shots (single-shot project folders)
• Instagram carousel shots (1/1, 1/2, and 1/3 carousel formats)

Repository Structure

.
├── Dribbble Shot/
├── Instagram Carousel Saas Shot - 1/
├── index.html          # Public index (project/image explorer)
├── project.html        # Per-project detail page
├── shots-data.js       # Generated gallery dataset
├── styles.css          # Shared styles for all gallery pages
├── viewer.html         # Dedicated image viewer experience
└── README.md

Public Gallery Experience

• index.html supports:
  • Project view (browse by project card)
  • Single image view (browse all images directly)
  • Layout switches: Grid, List, Compact
  • Light / Dark mode toggle
  • Search, category filtering, and design tag filtering
  • Favorites collections (save projects + share favorites link)
• Clicking any project in project view opens project.html with that project's details and images.
• Clicking an image opens viewer.html with previous/next navigation, filmstrip thumbnails, download/open actions, and a Make video with this project shortcut to Reecap.

Current Collection Snapshot

• 51 project folders indexed
• 270 total image files

How to Browse

1. Open index.html in a browser (or serve this repository with any static file server).
2. Start in Project view to identify assets by project.
3. Click a project card to open the dedicated project page.
4. Click any image to open the dedicated image viewer with navigation controls.
5. Switch to Single image view if you want a flat all-images explorer.

MCP Integration

A minimal MCP server is available under mcp/server.py, with setup details in mcp/README.md.

The MCP server includes expanded tools for tags, similarity, and video sequencing workflows.

To distribute MCP publicly, this repo includes package.json with CLI command social-shots.

After publishing to npm, users can run:

npm install -g social-shots-mcp
social-shots --data /path/to/shots-data.js

You can also provide the data file path via environment variable:

SHOTS_DATA_PATH=/path/to/shots-data.js social-shots

If the file is missing, the CLI now exits with a clear error message instead of crashing.

License

This repository is distributed under the terms of the LICENSE file.