flowsterix
为 React 应用提供基于状态机的引导式导览和用户上手流程。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：flowsterix。 它的用途是：为 React 应用提供基于状态机的引导式导览和用户上手流程。 完整的 Skill 内容见：https://321skill.com/skills/flowsterix/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个React后台管理系统，需要为新用户添加一个功能导览，引导他们完成创建第一个项目和设置通知的关键步骤。”，它会引导你使用 Flowsterix 定义包含多个步骤的流程，为每个步骤指定目标DOM元素（如按钮或表单区域）、展示的提示内容，并设置通过点击事件或手动点击‘下一步’来推进流程的规则。
介绍
Flowsterix 解决了 React 应用在用户引导、新功能介绍或产品上手流程开发中的复杂性问题。它通过声明式定义步骤、目标元素和交互规则，让开发者能快速构建出交互自然、状态可追踪的导览流程。
使用 Flowsterix，开发者只需安装核心包和预设的 UI 组件，然后在代码中定义包含步骤、目标和内容的流程对象，最后在应用根组件中包裹 Provider 即可。其核心在于将复杂的交互流程抽象为一个状态机，并提供了丰富的规则（如手动、事件、延迟触发）来控制流程的推进。
这个工具非常适合需要提升用户体验、降低用户学习成本的产品团队和前端开发者。无论是 SaaS 产品的首次使用引导，还是复杂后台系统的功能教学，都能通过它高效实现。
建议在开发阶段启用其内置的 DevTools，可以方便地调试步骤顺序、捕获元素选择器和管理流程状态。同时，注意利用其版本控制和持久化功能，以便在未来更新流程时能平滑迁移用户状态。
核心特点
与同类引导库相比，Flowsterix 的核心区别在于其严格基于状态机模型，提供了完全的类型安全（TypeScript）和内置的、可扩展的持久化层，能够可靠地记录用户进度并支持流程版本迁移。
注意事项
目前主要专注于 React 技术栈，对于 Vue、Svelte 等其他前端框架的支持有限或需要额外适配。
常见问题
Flowsterix 如何与 Next.js 或 React Router 集成？
Flowsterix 提供了与主流路由库（如 TanStack Router、React Router、Next.js）的官方集成支持，可以通过路由变化规则（route advance rule）来触发或暂停流程。
导览流程的数据（如用户完成进度）存储在哪里？
默认使用浏览器的 localStorage 进行持久化，但也支持通过自定义存储适配器将数据保存到远程 API 或其他后端服务。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/flowsterix/raw/index.md 读取 flowsterix 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/flowsterix/raw/index.md（查看排版版本）