frontend-dev

Name: frontend-dev
Availability: InStock
Author: w020316

Automate frontend stack selection and project scaffolding for React, Vue, uni-app, and Vite ecosystems.

Updated May 15, 2026

Search Tags:#typescript #frontend #react #vue #web-development #tailwind

Ready to run

npx skills add https://github.com/w020316/cautious-broccoli --skill frontend-dev-w020316

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/w020316/cautious-broccoli/tree/main/frontend-dev
Command: npx skills add https://github.com/w020316/cautious-broccoli --skill frontend-dev-w020316

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

自动化为前端项目选择合适的技术栈、工具链与工程规范，实现跨平台（Web、H5、小程序、后台管理）的一键起步与快速落地。

Core Features & Use Cases

自动选型规则：基于项目特征自动推荐 React、Vue、uni-app、Next.js/Nuxt.js、Tailwind、GSAP 等栈及相关工具。
UI 组件库选型：针对 React 与 Vue 生态给出主流组件库及适用场景，并提供安装与集成要点。
工程实践与优化：提供核心框架、目录结构、状态管理、数据获取与性能优化的最佳实践。
代码规范与性能清单：涵盖路由懒加载、图片优化、代码分割、缓存策略、骨架屏等。

Quick Start

基于项目特征自动选型并搭建一个初始前端开发环境。

Frequently Asked Questions about frontend-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I choose the right frontend technology stack for a new web project?▼

Choosing a frontend technology stack involves evaluating project traits to recommend React, Vue, or uni-app with appropriate toolchains. It automates stack selection based on specific project features like web apps, mobile web, mini-programs, or admin dashboards.

What is the best way to scaffold a Vite and Vue project with standard coding conventions?▼

Scaffolding a Vite and Vue project uses automated bootstrapping to establish directory structures, state management, and coding conventions. It generates a foundational setup incorporating best practices for routing and component library integration.

Does this automated frontend selection support mini-programs and admin dashboards?▼

Automated frontend selection supports mini-programs and admin dashboards by recommending ecosystems like uni-app. It applies tailored architecture guidance and component library suggestions specific to these cross-platform deployment targets.

Can I get UI component library recommendations for React and Vue ecosystems?▼

UI component library recommendations for React and Vue ecosystems provide mainstream options tailored to specific application scenarios. The guidance includes integration points and installation procedures for building admin interfaces efficiently.

How do I apply performance best practices for code splitting and lazy loading in frontend development?▼

Applying performance best practices uses a checklist covering route lazy loading, image optimization, code splitting, and cache strategies. It ensures frontend applications maintain optimal loading speeds and runtime efficiency.

React vs Vue for cross-platform web development: which framework does the automated selector recommend?▼

React versus Vue selection for cross-platform web development depends on specific project traits evaluated by the automated selector. It recommends Next.js for React or Nuxt.js for Vue when SSR capabilities are required.