pf-frontend
一个基于现代技术栈的React前端Monorepo项目模板与开发套件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pf-frontend。 它的用途是：一个基于现代技术栈的React前端Monorepo项目模板与开发套件。 完整的 Skill 内容见：https://321skill.com/skills/pf-frontend/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要基于PF-Dev创建一个新的管理后台应用，包含仪表盘和基础的CRUD功能，并集成地图组件。”，AI可以引导你使用 `pnpm turbo gen admin` 命令，并根据提示选择包含 Dashboard 页面、CRUD 示例以及 `@pf-dev/map` 包，快速生成项目骨架和基础代码。
介绍
PF-Dev 是一个为现代前端开发设计的 Monorepo 项目模板，旨在解决企业级前端项目中技术栈分散、代码复用率低和开发环境搭建复杂的问题。它通过 Turborepo 统一管理多个应用和共享包，集成了 React、TypeScript、Tailwind CSS 等主流技术，并内置了地图、3D、CCTV流媒体等业务场景的专用包，提供了一套开箱即用的开发基础设施。
开发者可以通过简单的命令启动整个项目或特定应用，利用内置的 Turbo Generator 快速生成新的应用或管理后台，极大提升了从零搭建项目的效率。项目还配置了统一的代码规范、构建和部署流程，确保代码质量和团队协作的一致性。
它非常适合需要同时开发多个关联前端应用（如平台用户端、管理后台、内部工具）的团队，尤其是涉及3D可视化、地图或实时视频流等复杂功能的前端项目。对于希望采用现代化、标准化架构进行快速原型开发或产品迭代的团队和个人开发者，这是一个高效的起点。
建议在使用前确保 Node.js 和 pnpm 版本符合要求。由于项目结构较为复杂，初次接触 Monorepo 的开发者可能需要花些时间熟悉 Turborepo 的过滤（—filter）命令和 workspace 概念。项目中的部分包（如地图、CCTV）依赖特定业务场景，可根据实际需要选择性使用。
核心特点
核心区别在于它不仅是一个基础模板，更是一个集成了3D地图（CesiumJS）、实时视频流（HLS/WHEP）和Three.js可视化等垂直领域解决方案的完整前端工程化套件，并通过Turborepo Generator实现了应用和后台的代码脚手架自动化生成。
注意事项
该项目主要面向中大型、多应用的前端项目，对于只需要开发单个简单页面的场景显得过于重型。
常见问题
如何只运行或构建其中的某一个应用？
使用 pnpm 的 --filter 参数，例如：`pnpm --filter yongin-platform-app dev` 来启动特定应用。
如何基于这个模板创建一个新的应用？
使用内置的 Turbo Generator，运行 `pnpm turbo gen app` 或 `pnpm turbo gen admin` 并按照提示操作即可快速生成。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pf-frontend/raw/index.md 读取 pf-frontend 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pf-frontend/raw/index.md（查看排版版本）