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
Open a React component file (.jsx/.tsx) in VS Code.
Right-click in the editor and select GhostFrame: Generate Skeleton Loader, or run GhostFrame: Generate Skeleton Loader from the Command Palette (Ctrl+Shift+P).
Choose the output style: Plain CSS or Tailwind CSS.
Preview your skeleton loader in the Webview, adjust shimmer color via settings if needed.
Click Copy skeleton to copy to clipboard, or Insert into project to create a .skeleton.jsx/.tsx file.
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
Fork the repo and create your feature branch (git checkout -b feature/...).
