Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Generates production-ready React pages from natural language descriptions and serves them live on a local port. Handles the full cycle: project setup, preferences, code generation, screenshot review, and iterative refinement. Pages use CDN-based React and Tailwind with no build step required.
Combines design generation, live preview, and screenshot-based review in one automated loop, removing the back-and-forth between design tools and a separate frontend environment.
When to use it
- Prototyping a SaaS landing page from a one-line brief
- Building a dashboard mockup for a client presentation
- Iterating on a UI design without writing HTML manually
- Creating a mobile-responsive portfolio page from scratch
- Generating a multi-page product site with consistent styling
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Create a landing page for a SaaS app called Trackly with a dark theme
- 1Creates project directory and project.json with dark theme and font preferences
- 2Confirms page slug and generates React HTML file using CDN dependencies
- 3Serves the page on the configured local port
- 4Takes desktop and mobile screenshots and reviews for layout or contrast issues
- 5Shares live URL and screenshot, asks for feedback to iterate
Live URL at http://localhost:5174/trackly/landing/ with a responsive dark-themed landing page and a preview screenshot attached