From task
探索前端项目架构:分析组件树层级、状态管理流向、路由结构、样式体系。当需要理解前端页面组织、组件props/事件传递、代码分割策略时触发。支持React/Vue/Svelte/Angular。
npx claudepluginhub lazygophers/ccplugin --plugin taskThis skill uses the workspace's default tool permissions.
深入理解前端项目架构:组件树/状态管理/路由结构/样式体系。支持React 18+/Next.js/Remix、Vue 3/Nuxt 3、Svelte/SvelteKit、Angular 17+。
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
深入理解前端项目架构:组件树/状态管理/路由结构/样式体系。支持React 18+/Next.js/Remix、Vue 3/Nuxt 3、Svelte/SvelteKit、Angular 17+。
| 框架 | 标志 | 入口文件 |
|---|---|---|
| React | react in package.json | src/main.tsx, src/index.tsx |
| Next.js | next.config.* | app/layout.tsx, pages/index.tsx |
| Vue 3 | vue in package.json | src/main.ts, src/App.vue |
| Nuxt 3 | nuxt.config.ts | app.vue |
| Svelte | svelte.config.js | src/App.svelte |
| SvelteKit | svelte.config.js + routes | src/routes/+layout.svelte |
| Angular | angular.json | src/app/app.component.ts |
| 方案 | 依赖/标志 | 搜索模式 |
|---|---|---|
| Redux Toolkit | @reduxjs/toolkit | createSlice, configureStore |
| Zustand | zustand | create(), useStore |
| Jotai | jotai | atom(), useAtom |
| TanStack Query | @tanstack/react-query | useQuery, useMutation |
| Context API | 内置 | createContext, useContext |
| Pinia | pinia | defineStore, useXxxStore |
| Vuex | vuex | createStore, mutations |
| Composition API | Vue 3内置 | ref(), reactive() |
| Svelte Stores | 内置 | writable(), $store |
| 方案 | 标志 | 模式 |
|---|---|---|
| React Router v6 | react-router-dom | createBrowserRouter, <Route> |
| Next.js App Router | app/目录 | 文件系统路由 |
| Vue Router | vue-router | createRouter |
| Nuxt | pages/目录 | 文件系统路由 |
JSON包含:framework{name,version,variant} + component_tree[{name,path,type,children,props,state}] + state_management{solution,stores} + routing{solution,routes} + styling{solution,config,design_system} + build_tool{name,config} + architecture
glob("**/*.tsx") / glob("**/*.vue") / glob("**/*.svelte")grep("createBrowserRouter|useNavigate") / 文件系统 glob("**/pages/**")glob("tailwind.config.*") / glob("**/*.module.css")serena:get_symbols_overview / serena:find_symbol / serena:find_referencing_symbols必须:先识别框架版本 → 从入口组件开始 → 先高层后深入 → 覆盖状态和路由
禁止:忽略样式体系 | 遗漏构建配置 | 假设组件无业务逻辑 | 跳过composables/hooks分析
Monorepo:先识别前端包再分析内部。设计系统:先理解约定再分析业务组件。