VS Code Extensions
GhostFrame

GhostFrame

by ZeelshSonagara

Generate CSS or Tailwind skeleton loaders from React JSX/TSX components in VS Code.

Downloads

3

Rating

— (0)

Version

1.0.1

Last updated

Apr 07, 2026

Generate skeleton loaders from JSX/TSX React components.

Features

Requirements

Badges & quick install info in README

  • Added version, marketplace, license, and CI build shields. This extension adds the following settings under the ghostframe namespace: | Setting | Type | Default | Description | |---------------------------|----------|-------------|----------------------------------------------------------| | ghostframe.style | string | "css" | Default output style (css or tailwind). | | ghostframe.listItemCount| number | 3 | Default number of list items for <ul>/<ol> elements. | | ghostframe.shimmerColor | string | #e0e0e0 | Background color for animated skeleton shimmer. | | ghostframe.outputDir | string | "" | Relative folder to save skeleton file (empty = same). |

Usage

  1. Open a React component file (.jsx/.tsx) in VS Code.
  2. Right-click in the editor and select GhostFrame: Generate Skeleton Loader, or run GhostFrame: Generate Skeleton Loader from the Command Palette (Ctrl+Shift+P).
  3. Choose the output style: Plain CSS or Tailwind CSS.
  4. Preview your skeleton loader in the Webview, adjust shimmer color via settings if needed.
  5. Click Copy skeleton to copy to clipboard, or Insert into project to create a .skeleton.jsx/.tsx file.
  6. The skeleton component is saved next to your component or inside the configured ghostframe.outputDir.

Release Notes

Refer to CHANGELOG.md for details on all releases.

Contributing

  1. Fork the repo and create your feature branch (git checkout -b feature/...).
  2. Install dependencies: npm install.
  3. Build: npm run compile.
  4. Run tests: npm test.
  5. Submit a pull request.

License

MIT