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

デプロイメントと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.

主な機能

0 GitHub stars
Access to high-quality UI templates including dashboards and H5 reports
Intelligent dependency management with automated npm installation
Automatic project type detection for React, Vue, Next.js, and Ant Design Pro
Standardized production build execution and verification
Dynamic preview link generation for instant visual feedback

ユースケース

Troubleshooting build errors and dependency conflicts in existing web projects
Automating the build pipeline for complex Ant Design Pro enterprise projects
Rapidly building and previewing a new React or Vue application from scratch

概要

主な機能

0 GitHub stars
Access to high-quality UI templates including dashboards and H5 reports
Intelligent dependency management with automated npm installation
Automatic project type detection for React, Vue, Next.js, and Ant Design Pro
Standardized production build execution and verification
Dynamic preview link generation for instant visual feedback

ユースケース

Troubleshooting build errors and dependency conflicts in existing web projects
Automating the build pipeline for complex Ant Design Pro enterprise projects
Rapidly building and previewing a new React or Vue application from scratch