Skeleton Generator

Generate polished skeleton loading states from JSX/TSX in seconds. Paste real UI code on the left, get a ready-to-use skeleton component on the right. Built with Next.js, Monaco Editor, and a lightweight Babel-powered parser.

Project Navigation

• Interface Preview
• Features
• Quick start
• Usage
• How it works
• Tech stack
• Scripts
• Contributing
• Forking and keeping your fork updated
• License

Features

• Auto-detects JSX/TSX/HTML and debounces generation as you type
• Monaco-based side-by-side editor with light/dark theme toggle and keyboard shortcut (Cmd/Ctrl + Enter)
• Copy or download the generated skeleton snippet in one click
• Local storage persistence for your last input and theme
• MIT-licensed and open to contributions

Quick start

pnpm install   # or npm install / yarn / bun install
pnpm dev       # or npm run dev / yarn dev / bun dev

Then open http://localhost:3000 and start pasting UI code.

Usage

1. Paste JSX/TSX (or HTML) into the left editor. The app auto-detects syntax and generates a skeleton on the right.
2. Click Generate (or press Cmd/Ctrl + Enter) to force regeneration.
3. Use Copy or Download to grab the output; Clear resets both panes.
4. Toggle the theme to match your editor preference.

How it works

• generateSkeleton parses your code with Babel and walks the first JSX tree, replacing content nodes with a reusable Skeleton component.
• detectCodeType does a lightweight language guess to keep generation focused on JSX/TSX.
• The UI experience (editors, keyboard shortcuts, local persistence) lives in app/page.tsx and supporting components under app/components.

Tech stack

• Next.js 16, React 19
• Tailwind CSS 4 for styling
• Monaco Editor for the code panes
• Babel parser/traverse for AST transforms
• React Hot Toast for feedback

Scripts

• pnpm dev – start the Next.js dev server
• pnpm build – production build
• pnpm start – run the built app
• pnpm lint – lint the codebase

Contributing

We welcome issues, ideas, and pull requests.

1. Fork the repo and clone your fork.
2. Create a branch: git checkout -b feature/my-improvement.
3. Install deps and run pnpm dev for local development.
4. Before opening a PR, run pnpm lint and pnpm build to ensure the app still compiles.
5. Open a pull request with a clear description and, if possible, a short demo or screenshot.

If you are filing an issue, include:

• A short summary of the problem or enhancement
• Steps to reproduce (when applicable)
• Expected vs. actual behavior
• Screenshots or example code snippets when helpful

Forking and keeping your fork updated

1. Fork this repository on GitHub.
2. Clone your fork: git clone git@github.com:<your-username>/skeleton-generator.git.
3. Add the upstream remote: git remote add upstream git@github.com:achraf-ayar/skeleton-generator.git.
4. Regularly sync: git fetch upstream && git rebase upstream/main (or merge if you prefer).
5. Push your branch to your fork and open a PR back to achraf-ayar/skeleton-generator.

License

MIT License — see LICENSE.