@bovinphang/frontend-craft 2.7.0 → 2.8.0

package/skills/fec-validation-fix/references/report-template.md

@@ -1,43 +1,43 @@
-# 验证修复报告模板
+# Verify repair report template
 
 ```markdown
-# 验证修复报告
+# Verify repair report
 
-> 生成时间: YYYY-MM-DD HH:mm
-> 验证范围: lint / type-check / test / build / CI
+> Generation time: YYYY-MM-DD HH:mm
+> Verification scope: lint/type-check/test/build/CI
 
-## 命令状态表
+## Command status table
 
-| 命令 | 初始状态 | 修复后状态 | 备注 |
+| Command | Initial state | Repaired state | Remarks |
 | --- | --- | --- | --- |
-| `npm run type-check` | 失败 / 通过 / 未运行 | 失败 / 通过 / 未运行 | ... |
+| `npm run type-check` | failed/passed/didn’t run | failed/passed/didn’t run | ... |
 
-## 失败摘要
+## Failure summary
 
-- 最早出现且会级联的错误
-- 受影响文件、错误类型和关键日志
-- 是否属于 CI 专属、测试环境、依赖版本或 flaky 问题
+- Errors that occur earliest and cascade
+- Affected files, error types and critical logs
+- Whether it is CI exclusive, test environment, dependent version or flaky issue
 
-## 根因
+## Root cause
 
-- 确认的根本原因
-- 支持该结论的输出、日志或复现证据
+- Confirmed root cause
+- Output, logs, or reproduction evidence to support the conclusion
 
-## 修复内容
+## Fix content
 
-- 修改的文件和行为
-- 为什么没有通过关闭规则、删除断言或降低类型安全来规避失败
+- Modified files and behavior
+- Why the failure was not circumvented by turning off rules, removing assertions, or reducing type safety
 
-## 验证结果
+## Verification results
 
-- 重新执行的命令
-- 命令输出摘要
-- 是否仍有失败项
+- Command to re-execute
+- Summary of command output
+- Are there still failed items?
 
-## 剩余风险
+## Residual risk
 
-- 未覆盖的验证命令
-- 仍需用户决策或外部环境确认的问题
+- Uncovered verification commands
+- Issues that still require user decision-making or external environment confirmation
 ```
 
-验证修复完成后，将报告保存到 `reports/validation-fix-YYYY-MM-DD-HHmmss.md`，并告知用户报告路径。
+After the verification fix is completed, save the report to `reports/validation-fix-YYYY-MM-DD-HHmmss.md` and inform the user of the report path.

package/skills/fec-vite-project-standard/SKILL.md

@@ -1,44 +1,44 @@
 ---
 name: fec-vite-project-standard
-description: Use when creating, configuring, reviewing, or debugging Vite-based frontend projects, vite.config.ts, env variables, dev server proxy, HMR, plugin ordering, library mode, dependency pre-bundling, bundle splitting, or Vite build performance. Use framework-specific skills for React/Vue component architecture; Chinese triggers include Vite 配置, vite.config, Vite 构建, Vite 性能.
+description: Use when creating, configuring, reviewing, or debugging Vite-based frontend projects, vite.config.ts, env variables, dev server proxy, HMR, plugin ordering, library mode, dependency pre-bundling, bundle splitting, or Vite build performance. Use framework-specific skills for React/Vue component architecture; Chinese triggers include Vite configuration, vite.config, Vite build, Vite performance.
 ---
 
-# Vite 项目规范
+# Vite Project Specifications
 
-适用于 Vite 应用、组件库、开发服务器和构建配置的设计与审查。
+Design and review of Vite applications, component libraries, development servers, and build configurations.
 
 ## Purpose
 
-规范 Vite 配置、安全边界和构建性能，避免开发环境与生产构建的常见陷阱。
+Standardize Vite configurations, security boundaries, and build performance to avoid common pitfalls of development environments and production builds.
 
 ## Procedure
 
-1. 识别项目类型
-   - 应用项目优先检查 `root`、`base`、`server.proxy`、`envPrefix`、`build` 和框架插件。
-   - 组件库项目优先检查 `build.lib`、类型产物、peer dependencies external 和导出入口。
-   - Monorepo 额外检查 `server.fs.allow`、路径别名和包依赖边界。
-
-2. 选择插件
-   - React 默认优先 `@vitejs/plugin-react-swc`；需要 Babel 插件时才用 `@vitejs/plugin-react`。
-   - Vue 项目使用 `@vitejs/plugin-vue`，路径别名优先交给 `vite-tsconfig-paths`。
-   - TypeScript 项目必须通过 `tsc --noEmit`、CI 或 `vite-plugin-checker` 补齐类型检查。
-
-3. 管理环境变量
-   - 客户端只读取明确公开的前缀，如 `VITE_`。
-   - `loadEnv` 第三个参数使用显式前缀数组，不使用空字符串加载全部变量。
-   - 密钥、数据库地址、私有 token 必须留在服务端或构建系统，不进入客户端 bundle。
-
-4. 优化开发体验
-   - 慢启动先用 `vite --profile` 定位插件、解析或预构建瓶颈。
-   - 对 CJS/UMD 依赖用 `optimizeDeps.include` 处理互操作问题。
-   - 大项目可用 `server.warmup.clientFiles` 预热核心入口。
-
-5. 优化生产构建
-   - 发布前运行 `vite build`，并用 `vite preview` 做本地构建烟测。
-   - 手动分包使用稳定的对象形式优先，避免把每个依赖拆成独立小 chunk。
-   - 生产 sourcemap 默认关闭；若上传错误追踪平台，上传后不随站点公开。
-   - 动效、3D、图表、编辑器、地图和音视频处理库优先通过动态导入或路由级拆包隔离。
-   - 检查静态资源是否进入正确目录、是否被 hash/cache、是否存在占位 URL 或过大的未压缩媒体。
+1. Identify the project type
+   - Application projects check `root`, `base`, `server.proxy`, `envPrefix`, `build` and framework plugins first.
+   - Component library projects check `build.lib`, type products, peer dependencies external and export entries first.
+   - Monorepo additional checks for `server.fs.allow`, path aliases and package dependency boundaries.
+
+2. Select plugin
+   - React gives priority to `@vitejs/plugin-react-swc` by default; use `@vitejs/plugin-react` only when the Babel plug-in is required.
+   - The Vue project uses `@vitejs/plugin-vue`, and path aliases are given priority to `vite-tsconfig-paths`.
+   - TypeScript projects must complete type checking via `tsc --noEmit`, CI or `vite-plugin-checker`.
+
+3. Manage environment variables
+   - Clients only read explicitly exposed prefixes, such as `VITE_`.
+   - The third parameter of `loadEnv` uses an explicit prefix array and does not use an empty string to load all variables.
+   - Keys, database addresses, and private tokens must stay on the server or build system and not enter the client bundle.
+
+4. Optimize development experience
+   - Use `vite --profile` to locate plug-in, parsing or pre-built bottlenecks before slow start.
+   - Use `optimizeDeps.include` for CJS/UMD dependencies to handle interop issues.
+   - Large projects can use `server.warmup.clientFiles` to warm up the core entrance.
+
+5. Optimize production builds
+   - Run `vite build` before release and use `vite preview` to do local build smoke testing.
+   - Prioritize manual subcontracting by using stable object forms to avoid splitting each dependency into independent small chunks.
+   - The production sourcemap is turned off by default; if uploaded to the error tracking platform, it will not be published with the site after uploading.
+   - Motion effects, 3D, charts, editors, maps, and audio and video processing libraries are prioritized for isolation through dynamic import or route-level unpacking.
+   - Check whether static resources go into the correct directory, have been hashed/cache, have placeholder URLs, or are too large uncompressed media.
 
 ## Minimal Config
 
@@ -69,15 +69,15 @@ export default defineConfig(({ mode }) => {
 
 ## Constraints
 
-- `vite build` 只转译和打包，不等于类型检查；CI 必须另跑 typecheck。
-- `VITE_` 不是安全边界；任何 `VITE_` 变量都会进入客户端包。
-- 不设置 `envPrefix: ""`，不使用 `loadEnv(mode, root, "")` 后再随意 `define`。
-- 不默认引入 legacy 插件；只有真实用户数据需要时再启用。
-- 不用 `vite preview` 作为生产服务器。
-- 组件库必须 externalize peer dependencies，并单独产出 `.d.ts`。
-- 不把服务端密钥通过 `define`、`import.meta.env` 或空前缀 `loadEnv` 注入客户端。
-- 不把 GSAP、Three.js、Lottie、Monaco、地图 SDK 等重型库放进所有页面共享入口；先评估 async chunk 和首屏影响。
+- `vite build` only translates and packages, not type checking; CI must run typecheck separately.
+- `VITE_` is not a security boundary; any `VITE_` variable goes into the client package.
+- Do not set `envPrefix: ""`, do not use `loadEnv(mode, root, "")` and then `define` at will.
+- Legacy plugins are not introduced by default; only enable them when needed for real user data.
+- Don't use `vite preview` as a production server.
+- Component libraries must externalize peer dependencies and produce `.d.ts` separately.
+- Do not inject server keys into clients via `define`, `import.meta.env` or empty prefix `loadEnv`.
+- Do not put heavy libraries such as GSAP, Three.js, Lottie, Monaco, and Map SDK into all page sharing entries; first evaluate the impact of async chunk and first screen.
 
 ## Expected Output
 
-输出应包含项目类型判断、关键配置变更、环境变量安全说明、构建/开发性能验证方式。完成后 Vite 配置应可类型检查、可构建、密钥不泄露，并能解释 dev 与 build 的差异。
+The output should include project type judgment, key configuration changes, environment variable security instructions, and build/development performance verification methods. When completed, the Vite configuration should be type-checked, buildable, secret-secure, and explain the differences between dev and build.

package/skills/fec-vue3-project-standard/SKILL.md

@@ -1,58 +1,58 @@
 ---
 name: fec-vue3-project-standard
-description: Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include Vue 3 项目规范, Vue 组件架构.
+description: Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include Vue 3 project specification, Vue component architecture.
 ---
 
-# Vue 3 项目规范
+# Vue 3 project specifications
 
-适用于使用 Vue 3 + TypeScript 的仓库。
+For repositories using Vue 3 + TypeScript.
 
 ## Purpose
 
-为 Vue 3 + TypeScript 项目提供工程结构、组件边界、Composables 和默认实现约定，确保约定式开发和类型安全。
+Provides project structure, component boundaries, Composables, and default implementation conventions for Vue 3 + TypeScript projects to ensure conventional development and type safety.
 
 ## Procedure
 
-1. 识别仓库已有 Vue 约定：目录、路由、Pinia、请求层、样式体系、组件库和测试框架。
-2. 划分页面、业务组件、通用组件、composables、stores、services 和 utils 的边界。
-3. 优先沿用 `<script setup lang="ts">`、组合式 API 和仓库现有自动导入/模块出口约定。
-4. 输出时补齐状态归属、API 层、错误处理、样式隔离和专项 skill 分流。
-5. 页面和模块要有可恢复错误 UI；全局 `errorHandler`、`onErrorCaptured`、请求错误映射和路由错误页分工明确。
-6. Tailwind token/variant 或响应式布局需求应分流到对应专项 skill，避免把样式系统规则塞进 Vue 组件规范。
-7. 状态归属复杂时先做状态清单；DTO、公共 props、泛型 composable 或 `tsconfig` 边界复杂时，先使用 TypeScript 项目规范流程收敛跨框架类型契约。
-8. 设计可复用 composable 时明确输入是否支持 plain value、ref、computed 或 getter；测试 Vue 组件时覆盖 Pinia、Router、Teleport、Suspense 和 async setup 的常见边界。
+1. Identify the existing Vue conventions in the warehouse: directory, routing, Pinia, request layer, style system, component library and test framework.
+2. Demarcate the boundaries between pages, business components, common components, composables, stores, services and utils.
+3. Prioritize the existing automatic import/module export conventions of `<script setup lang="ts">`, composite API and warehouse.
+4. Complete state ownership, API layer, error handling, style isolation and special skill offloading when outputting.
+5. Pages and modules must have recoverable error UI; global `errorHandler`, `onErrorCaptured`, request error mapping and routing error page have clear division of labor.
+6. Tailwind token/variant or responsive layout requirements should be diverted to corresponding special skills to avoid stuffing style system rules into Vue component specifications.
+7. When the state ownership is complex, first make a state list; when the boundaries of DTO, public props, generic composable or `tsconfig` are complex, first use the TypeScript project specification process to converge cross-framework type contracts.
+8. When designing reusable composables, clarify whether the input supports plain value, ref, computed or getter; when testing Vue components, cover the common boundaries of Pinia, Router, Teleport, Suspense and async setup.
 
-## 详细参考
+## Detailed reference
 
-按需要加载更细的参考文件：
+Load more detailed reference files as needed:
 
-- 项目目录、组件分层、组件规范、注释和 TypeScript：加载 [references/vue3-project-structure.md](references/vue3-project-structure.md)。
-- Composables、slots、Provide/Inject 和路由组织：加载 [references/vue3-composables-routing.md](references/vue3-composables-routing.md)。
-- Pinia、API 层、错误处理、指令、样式、测试、反模式和输出检查清单：加载 [references/vue3-state-api-quality.md](references/vue3-state-api-quality.md)。
-- Vue 项目规范层面的轻量性能约定：加载 [references/vue3-performance-patterns.md](references/vue3-performance-patterns.md)。
+- Project directory, component layering, component specifications, annotations, and TypeScript: Load [references/vue3-project-structure.md](references/vue3-project-structure.md).
+- Composables, slots, Provide/Inject and routing organizations: Load [references/vue3-composables-routing.md](references/vue3-composables-routing.md).
+- Pinia, API layer, error handling, directives, styles, tests, anti-patterns and output checklist: Loading [references/vue3-state-api-quality.md](references/vue3-state-api-quality.md).
+- Lightweight performance conventions at the Vue project specification level: Load [references/vue3-performance-patterns.md](references/vue3-performance-patterns.md).
 
 ## Constraints
 
-- 使用 `<script setup lang="ts">`，禁止使用 Options API 新增组件
-- 组件文件规模宜约 **300 行**内；逾 **500 行**或复杂度过高须拆子组件与 Composables
-- Props / Emits 必须使用 TypeScript interface 定义，禁止使用 `any`
-- Composable 返回 `readonly` 引用，防止外部意外修改
-- 不要在 store 中存放 UI 临时状态（modal 开关、表单输入等）
-- 服务端数据优先用请求库管理，而非手动存入 Pinia
-- 避免在 `v-for` 中使用 `v-if`（提取为 computed 过滤）
-- 禁止直接从 feature 内部深层路径导入，绕过 `index.ts`
-- 不用全局错误处理吞掉组件内可恢复的 API、表单或权限错误。
-- 不把函数型参数误当 getter 自动调用；composable 参数若可能是回调，应避免使用 getter 型输入约定。
-- 不依赖快照作为 Vue 组件唯一断言；异步组件、Teleport 和 Pinia 场景要有用户可见行为断言。
+- Use `<script setup lang="ts">` to disable using Options API to add new components
+- The size of the component file should be approximately **300 lines**; if it exceeds **500 lines** or is too complex, sub-components and Composables must be separated
+- Props / Emits must be defined using the TypeScript interface, and `any` is prohibited
+- Composable returns a `readonly` reference to prevent accidental external modifications
+- Do not store UI temporary states (modal switches, form inputs, etc.) in the store
+- Server-side data is first managed by the request library rather than manually stored in Pinia
+- Avoid using `v-if` in `v-for` (extract to computed filtering)
+- It is forbidden to import directly from the deep path inside the feature, bypassing `index.ts`
+- No need for global error handling to swallow recoverable API, form or permission errors within components.
+- Do not mistake function parameters for getter automatic calls; if composable parameters may be callbacks, avoid using getter input conventions.
+- Do not rely on snapshots as the only assertions for Vue components; asynchronous components, Teleport and Pinia scenes must have user-visible behavior assertions.
 
 ## Expected Output
 
-- 组件使用 `<script setup lang="ts">`，Props / Emits 类型完整
-- 可复用逻辑已提取到 composable，返回 `readonly` 引用
-- Loading / Error / Empty / Data 状态均已处理
-- 路由组件使用动态 import 加载，状态管理符合就近原则
-- URL 状态、服务端状态、表单状态和 Pinia 全局状态边界明确
-- API 调用有类型约束和统一错误处理
-- 样式使用 scoped 隔离，关键行为有测试覆盖
-- 文件结构与项目约定一致（pages / features / components 分离）
-- 可复用 composable 的输入响应性、Pinia/Router 边界和异步组件测试策略已说明
+- The component uses `<script setup lang="ts">`, and the Props/Emits type is complete
+- Reusable logic has been extracted to composable, returning `readonly` reference
+- Loading / Error / Empty / Data status have been processed
+- Routing components are loaded using dynamic import, and state management conforms to the proximity principle
+- URL status, server status, form status and Pinia global status have clear boundaries
+- API calls have type constraints and unified error handling
+- Styles are isolated using scoped, and key behaviors are covered by tests
+- The file structure is consistent with the project convention (pages/features/components are separated)
+- Input responsiveness, Pinia/Router boundaries and asynchronous component testing strategies for reusable composables explained

package/skills/fec-vue3-project-standard/references/vue3-composables-routing.md

@@ -1,14 +1,14 @@
 # Vue 3 composables and routing patterns
 
-## Composables 规范
+## Composables specification
 
-### 设计原则
+### Design principles
 
-- 以 `use` 前缀命名
-- 返回值使用对象，明确标注类型
-- 内部处理 loading / error / data 三态
-- 支持参数响应式（接受 `Ref` 或 getter）
-- 库级 composable 要明确参数是否支持普通值、`Ref`、`computed` 或 getter，并在副作用内部解析最新值
+- Named with `use` prefix
+- Use objects as return values and clearly mark the type
+- Internal processing loading / error / data tri-state
+-Support parameter responsiveness (accepts `Ref` or getter)
+- Library level composable to clarify whether the parameter supports normal values, `Ref`, `computed` or getter, and parse the latest value inside the side effect
 
 ```typescript
 export function useUserList(params: MaybeRef<QueryParams>) {
@@ -42,31 +42,31 @@ export function useUserList(params: MaybeRef<QueryParams>) {
 }
 ```
 
-### Composable 使用原则
+### Composable usage principles
 
-- 返回 `readonly` 引用防止外部意外修改
-- 数据请求场景优先使用 VueQuery / VueUse 等库（如项目已引入）
-- `onUnmounted` 中清理定时器、事件监听等副作用
-- 避免在 composable 中直接操作 DOM
-- 只读输入可接受普通值、ref、computed 或 getter；需要双向写入的输入只接受可写 ref 或明确的 setter。
-- 如果参数本身是回调、比较器或 predicate，不要把它设计成 getter 型输入，否则解析时可能误调用业务函数。
+- Return a `readonly` reference to prevent accidental modification by outsiders
+- In data request scenarios, libraries such as VueQuery / VueUse are preferred (if the project has been introduced)
+- Clean up timers, event listeners and other side effects in `onUnmounted`
+- Avoid directly manipulating DOM in composable
+- Read-only inputs accept normal values, refs, computed or getters; inputs that require bidirectional writing only accept writable refs or explicit setters.
+- If the parameter itself is a callback, comparator or predicate, do not design it as a getter type input, otherwise the business function may be mistakenly called during parsing.
 
-### Vue Router / Pinia / 测试常见边界
+### Vue Router / Pinia / Test common boundaries
 
-- 路由参数变化不会重新创建同一个路由组件；依赖 `route.params` 的数据要 watch 明确字段，并处理取消和竞态。
-- 导航守卫中避免旧式 `next()` 多分支重复调用；优先返回 `false`、重定向对象或抛出可处理错误。
-- Pinia store 解构会丢失响应性时使用 `storeToRefs`；setup store 必须返回需要被外部追踪的 state、getter 和 action。
-- UI 临时状态、表单输入、弹窗开关不进入全局 store；URL 查询、服务端缓存和本地组件状态先各归其位。
-- Vue Test Utils 测试优先断言用户可见行为，不把快照作为唯一证明；异步更新使用 `await`、`flushPromises` 或框架推荐的等待方式。
-- 测试使用 Pinia、Router、Teleport、Suspense、async setup 或 `defineAsyncComponent` 时，在测试夹具中显式安装插件、挂载目标容器并等待异步稳定。
+- Changes in routing parameters will not recreate the same routing component; data that relies on `route.params` must watch clear fields and handle cancellation and race conditions.
+- Avoid old-style `next()` multi-branch repeated calls in navigation guards; give priority to returning `false`, redirecting objects or throwing handleable errors.
+- Use `storeToRefs` when destructuring the Pinia store will lose responsiveness; the setup store must return state, getters and actions that need to be tracked externally.
+- UI temporary status, form input, and pop-up window switches do not enter the global store; URL query, server-side cache, and local component status are returned to their respective places first.
+- Vue Test Utils tests prioritize user-visible behavior and do not use snapshots as the only proof; asynchronous updates use `await`, `flushPromises` or the waiting method recommended by the framework.
+- When testing using Pinia, Router, Teleport, Suspense, async setup or `defineAsyncComponent`, explicitly install the plugin in the test fixture, mount the target container and wait for async to stabilize.
 
-## Slots 与 Provide/Inject
+## Slots and Provide/Inject
 
 ### Slots
 
-- 用 `<slot>` 实现组件组合，而非过多 props
-- 具名 slot 用于明确的布局区域
-- 作用域 slot 传递数据给父组件自定义渲染
+- Use `<slot>` to achieve component composition instead of too many props
+- Named slots are used for explicit layout areas
+- Scope slot passes data to parent component for custom rendering
 
 ```vue
 <template>
@@ -83,9 +83,9 @@ export function useUserList(params: MaybeRef<QueryParams>) {
 
 ### Provide/Inject
 
-- 用于跨多层级的上下文共享（主题、配置、权限）
-- 提供 InjectionKey 保证类型安全
-- 不要用 provide/inject 替代 props 传递直接父子数据
+- For context sharing across multiple levels (topics, configurations, permissions)
+- Provide InjectionKey to ensure type safety
+- Do not use provide/inject instead of props to pass direct parent-child data
 
 ```typescript
 // keys.ts
@@ -98,9 +98,9 @@ provide(ThemeKey, theme);
 const theme = inject(ThemeKey);
 ```
 
-## 路由规范
+## Routing specifications
 
-### 路由组织
+### Routing organization
 
 ```typescript
 // app/router.ts
@@ -144,15 +144,15 @@ const routes: RouteRecordRaw[] = [
 ];
 ```
 
-### 路由原则
+### Routing principles
 
-- 路由配置集中管理，每个路由必须有 `name`
-- 页面组件使用动态 `import()` 按需加载
-- 权限控制使用路由守卫（`beforeEach`），而非在每个页面内判断
-- URL 参数（分页、筛选、排序）与路由状态同步
+- Centralized management of routing configuration, each route must have a `name`
+- Page components are loaded on demand using dynamic `import()`
+- Permission control uses route guard (`beforeEach`) instead of judging within each page
+- URL parameters (pagination, filtering, sorting) and routing status are synchronized
 
 ```typescript
-// 导航守卫
+// Navigation guard
 router.beforeEach((to) => {
   const authStore = useAuthStore();
   if (to.meta.requiresAuth && !authStore.isLoggedIn) {

package/skills/fec-vue3-project-standard/references/vue3-performance-patterns.md

@@ -2,12 +2,12 @@
 
 This file keeps lightweight Vue project-standard performance guidance. Use the frontend performance workflow when the task needs metrics, traces, profiles, bundle analysis, network evidence, or a formal performance report.
 
-## 性能
-
-- 使用 `shallowRef` / `shallowReactive` 优化大型对象
-- 大列表使用虚拟滚动
-- 避免在 `v-for` 中使用 `v-if`（提取为 computed 过滤）
-- 使用 `defineAsyncComponent` 懒加载重型组件
-- `v-for` 必须有稳定的 `:key`
-- 路由组件使用动态 `import()` 按需加载
+## Performance
+
+- Use `shallowRef` / `shallowReactive` to optimize large objects
+- Use virtual scrolling for large lists
+- Avoid using `v-if` in `v-for` (extract to computed filtering)
+- Use `defineAsyncComponent` to lazily load heavy components
+- `v-for` must have a stable `:key`
+- Routing components are loaded on demand using dynamic `import()`