Which frameworks does this skill support?

It automatically detects and supports Vue 3 (Vite), React (Vite/CRA), Next.js, and Ant Design Pro (UmiJS).

What happens if I don't have a package.json file?

The skill will identify the missing configuration and prompt you to create a project first using a frontend agent or manual setup.

Does it support custom build commands?

It currently focuses on standard 'npm run build' workflows but can be adapted for projects following common npm script patterns.

How does the preview link work?

It maps your internal workspace directory to a web-accessible URL based on your environment configuration, allowing for instant browser testing.

How do I access the built-in UI templates?

You can use file reading tools to access the 'templates/' directory within the skill to reference high-quality dashboard and report styles.

Web Build & Preview Automator

Name: Web Build & Preview Automator
Author: SeSiTing

bySeSiTing

0•

Deployment & DevOps

Automates the entire web project lifecycle from framework detection and dependency installation to production builds and preview link generation.

The Web Build skill is a comprehensive automation tool designed to streamline the frontend development workflow within Claude Code. It intelligently identifies various web frameworks like Vue, React, Next.js, and Ant Design Pro, manages package installations, and executes production-ready builds. By automatically mapping workspace paths to accessible preview URLs, it allows developers to instantly verify their changes in a browser environment, reducing the friction between coding and deployment and providing high-quality UI templates for reference.

Key Features

010 GitHub stars

02Access to high-quality UI templates including dashboards and H5 reports

03Intelligent dependency management with automated npm installation

04Automatic project type detection for React, Vue, Next.js, and Ant Design Pro

05Standardized production build execution and verification

06Dynamic preview link generation for instant visual feedback

Use Cases

01Troubleshooting build errors and dependency conflicts in existing web projects

02Automating the build pipeline for complex Ant Design Pro enterprise projects

03Rapidly building and previewing a new React or Vue application from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sesiting/siti-claude-marketplace web-build

For use in Claude.ai and ChatGPT

Download Skill