LobeHub

编辑 TypeScript 代码时，可参考此指南统一类型安全和代码风格，涵盖导入、异步输入输出、导出、共用辅助函数、错误抑制与日志处理。

• 编辑代码并保持类型安全
• 添加异步输入输出
• 确认导入和导出规范

将大型功能拆分为按能力划分的 React 部件，让不同页面按需组合；并把数据、界面状态和操作放到对应部件中，减少轻量页面加载无用依赖。

• 在多个页面共用功能
• 避免轻量页面加载无用功能
• 按能力安置状态与操作

用于使用 `debug` 库添加或查看日志，了解统一的 `lobe-*` 命名空间和格式指定符，并按浏览器、Node.js 或 Electron 环境启用日志输出。

• 为模块添加调试日志
• 确定日志命名空间
• 在浏览器中启用日志

本指南介绍如何编写和排查 Vitest 测试，涵盖模拟方式、行为验证、数据库集成测试、界面库模拟，以及判断失败测试应更新还是删除。

• 为缺陷修复添加回归测试
• 排查 Vitest 测试失败原因
• 确定数据库或界面的测试方式

为使用 react-i18next 的应用添加和管理界面翻译键，选择名称空间并使用插值；按流程更新英中预览，处理英文原文变更，避免已生成的译文长期过时。

• 为新页面添加翻译键
• 统一键名和名称空间
• 将英文修改同步到其他语言

本技能按请求范围分阶段开展网页、桌面和移动端界面设计，涵盖业务理解、页面结构、交互流程、视觉与文案优化，以及发布前检查。

• 设计新的管理后台或仪表盘
• 改进现有页面与交互
• 根据截图还原界面

本指南介绍如何添加和整理 SPA 路由，将页面入口放在 `src/routes/`，将领域功能和界面放在 `src/features/`，并协调桌面与移动端路由及加载骨架。

• 为 SPA 添加新页面
• 确定路由与功能的代码位置
• 协调网页、桌面和移动端路由

Connect provider, model, or agent IDs to existing icons in lobe-icons. Use it to add or adjust keyword mappings when an item shows the default fallback icon, including keeping the main and React Native configurations aligned.

中文简介正在准备中。当前显示英语简介。

• Map a new provider ID to its existing brand icon
• Fix a model that displays the fallback icon
• Add model or agent keyword matching rules

Build a product or documentation landing page by arranging @lobehub/ui/awesome components for the hero, live examples, feature sections, and install call to action. Wire links and theming, then review the page for responsive layout and accessibility preferences.

中文简介正在准备中。当前显示英语简介。

• Create a product landing page from existing components
• Build a home page for a lobedocs documentation site
• Add live component examples and feature sections

Set up and write a static documentation site with @lobehub/docs-kit and its lobedocs CLI. Create component pages with live demos and API tables, guides, a home page, and changelog, while following the kit’s build validations.

中文简介正在准备中。当前显示英语简介。

• Set up a docs site with lobedocs
• Write component pages with demos and API tables
• Migrate existing documentation from dumi

Use this skill to tune lobe-ui color tokens for brand palettes, status colors, and light or dark themes. It audits contrast and color values, generates scales from new inputs, and prepares a visual review board so people can assess the results.

中文简介正在准备中。当前显示英语简介。

• Adjust status colors that look pink, gray, muddy, or too dark
• Create a brand palette for lobe-ui
• Review contrast in light and dark themes

Verify the local lobe-ui component library and documentation site in a browser using agent-browser. Check documented routes, standalone demos, interactions, light and dark themes, responsive layouts, screenshots, and browser or server errors.

中文简介正在准备中。当前显示英语简介。

• Checking a component change in the local documentation site
• Testing a standalone demo’s interactions and appearance
• Verifying responsive layouts and capturing screenshot evidence

Use this skill to set up and write a static documentation site with @lobehub/docs-kit. It covers site configuration, component pages, interactive demos, API tables, guides, and changelogs, along with the validations that catch documentation issues during a build.

中文简介正在准备中。当前显示英语简介。

• Set up a documentation site with @lobehub/docs-kit
• Write component pages with demos and API tables
• Migrate documentation pages from dumi

Use this skill to migrate an app from @lobehub/ui 5.x to 6.x. It helps remove obsolete dependencies, update theme setup and imports, address changed component props, and verify the migration with codemod reports and project checks.

中文简介正在准备中。当前显示英语简介。

• Upgrade an app from @lobehub/ui 5.x to 6.x
• Replace ThemeProvider and update theme setup
• Review codemod findings and fix changed component props

Build a product or documentation landing page by arranging @lobehub/ui/awesome components for the hero, live examples, feature sections, and install call to action. Wire links and theming, then review the page for responsive layout and accessibility preferences.

中文简介正在准备中。当前显示英语简介。

• Create a product landing page from existing components
• Build a home page for a lobedocs documentation site
• Add live component examples and feature sections

Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee, LandingSection, BentoGrid/BentoCard, CodeShowcase, FeatureGrid, InstallBanner and FluidGradient. Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist. Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, 首页, 落地页, 官网首页.

中文简介正在准备中。当前显示原文说明。

Set up and author a documentation site with @lobehub/docs-kit (the `lobedocs` CLI, React Router + Vite static docs used by ui.lobehub.com). Covers consumer repo layout, docs.config.ts, package scripts, component doc pages (index.mdx frontmatter, `?demo` imports, <Demo>, <Api>), guide pages, home page, changelog, and the build-time validations that reject bad docs. Trigger on docs-kit, lobedocs, defineDocsConfig, docs.config.ts, migrate from dumi, write component docs, add a demo, <Demo>, <Api>, index.mdx, 文档站, 写文档, 组件文档, 迁移 dumi.

中文简介正在准备中。当前显示原文说明。

Set up and author a documentation site with @lobehub/docs-kit (the `lobedocs` CLI, React Router + Vite static docs used by ui.lobehub.com). Covers consumer repo layout, docs.config.ts, package scripts, component doc pages (index.mdx frontmatter, `?demo` imports, <Demo>, <Api>), guide pages, home page, changelog, and the build-time validations that reject bad docs. Trigger on docs-kit, lobedocs, defineDocsConfig, docs.config.ts, migrate from dumi, write component docs, add a demo, <Demo>, <Api>, index.mdx, 文档站, 写文档, 组件文档, 迁移 dumi.

中文简介正在准备中。当前显示原文说明。

Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee, LandingSection, BentoGrid/BentoCard, CodeShowcase, FeatureGrid, InstallBanner and FluidGradient. Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist. Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, 首页, 落地页, 官网首页.

中文简介正在准备中。当前显示原文说明。

Author and fix the lobe-charts documentation site, which is built with @lobehub/docs-kit (the `lobedocs` CLI, a React Router + Vite static site). Covers this repo's layout, docs.config.ts, package scripts, component doc pages (index.mdx frontmatter, `?demo` imports, <Demo>, <Api>), the home page, the changelog, and the build-time validations that reject bad docs. Trigger on docs-kit, lobedocs, defineDocsConfig, docs.config.ts, write component docs, add a demo, <Demo>, <Api>, index.mdx, docs build error, 文档站, 写文档, 组件文档.

中文简介正在准备中。当前显示原文说明。

Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee, LandingSection, BentoGrid/BentoCard, CodeShowcase, FeatureGrid, InstallBanner and FluidGradient. Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist. Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, docs/home/home.tsx, 首页, 落地页, 官网首页.

中文简介正在准备中。当前显示原文说明。

Compose a product or documentation home page from the @lobehub/ui/awesome landing components: LandingHero, AgentSkillCard, LogoMarquee, LandingSection, BentoGrid/BentoCard, CodeShowcase, FeatureGrid, InstallBanner and FluidGradient. Covers page structure, the lobedocs homePage hook, router links, theming the accent gradient, and a review checklist. Trigger on build a home page, landing page, docs home, marketing page, hero section, redesign home, lobedocs homePage, 首页, 落地页, 官网首页.

中文简介正在准备中。当前显示原文说明。

Set up and author a documentation site with @lobehub/docs-kit (the `lobedocs` CLI, React Router + Vite static docs used by ui.lobehub.com). Covers consumer repo layout, docs.config.ts, package scripts, component doc pages (index.mdx frontmatter, `?demo` imports, <Demo>, <Api>), guide pages, home page, changelog, and the build-time validations that reject bad docs. Trigger on docs-kit, lobedocs, defineDocsConfig, docs.config.ts, migrate from dumi, write component docs, add a demo, <Demo>, <Api>, index.mdx, 文档站, 写文档, 组件文档, 迁移 dumi.

中文简介正在准备中。当前显示原文说明。

package scripts, component doc pages (index.mdx frontmatter, `?demo` imports, <Demo>, <Api>), guide pages, home page, changelog, and the build-time validations that reject bad docs. Trigger on docs-kit, lobedocs, defineDocsConfig, docs.config.ts, migrate from dumi, write component docs, add a demo, <Demo>, <Api>, index.mdx, 文档站, 写文档, 组件文档, 迁移 dumi.

中文简介正在准备中。当前显示原文说明。