https://github.com/02muskan/skeleton-symphony

A fun and flexible playground to design, customize, and preview skeleton loaders with real-time drag-and-drop magic. Built with Next.js, Tailwind CSS, for devs who love smooth UX and snappy UI. ⚡
https://github.com/02muskan/skeleton-symphony

animation drag-and-drop nextjs nodejs reactjs tailwindcss typescript

Last synced: about 2 months ago
JSON representation

A fun and flexible playground to design, customize, and preview skeleton loaders with real-time drag-and-drop magic. Built with Next.js, Tailwind CSS, for devs who love smooth UX and snappy UI. ⚡

• Host: GitHub
• URL: https://github.com/02muskan/skeleton-symphony
• Owner: 02Muskan
• Created: 2025-07-09T15:22:10.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-07-09T15:39:36.000Z (11 months ago)
• Last Synced: 2025-07-09T16:48:34.193Z (11 months ago)
• Topics: animation, drag-and-drop, nextjs, nodejs, reactjs, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://skeleton-symphony.vercel.app
• Size: 17.4 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎼 SkeletonSymphony

A playful and powerful UI playground to design, customize, and preview skeleton loader components with drag-and-drop functionality.  

Built for frontend developers who care about performance, UX, and creative freedom.

---

## 🛠 Tech Stack

- **Framework:** Next.js (App Router)

- **Language:** TypeScript

- **Styling:** Tailwind CSS

- **State Management:** Zustand

- **Drag & Drop:** DnD Kit

- **Animation:** Framer Motion

- **Icons/UI:** Lucide Icons, ShadCN UI

- **Code Quality:** ESLint + Prettier

---

## 🚀 Features

- 🎨 Drag-and-drop skeleton builder interface  

- 🔄 Real-time preview of skeleton components  

- ⚙️ Customizable properties (shimmer, size, shape, speed)  

- 🧩 Export ready-to-use Tailwind + JSX code  

- 📦 Modular component system  

- 💾 Save + Load component sets *(coming soon)*  

---

## ⚡ Perceived Performance Boost

Same load time (~1500ms), *very* different vibes.

- **😬 Without Skeletons**: Content pops in abruptly — feels slow and unpolished.  

- **⚡ With Skeletons**: Instant visual feedback keeps users engaged, makes loading feel smoother.

Skeleton loaders don’t speed up your app — they just make it *feel* faster. And that’s what users remember. 🧠✨

---

## 📦 Getting Started

1. Clone the repo  

   ```bash

   git clone https://github.com/02Muskan/skeletonsymphony.git