Agent skill

Skyroc Admin Prd Prototype

by Ohh-889 in Ohh-889/skyroc

为 Skyroc Admin / RuoYi Plus Fast 模块编写来源可追溯的 PRD,并生成可独立打开、可交互、经过桌面端和移动端验收的 HTML 设计原型。仅在用户明确要求使用本 Skill 时启用。

MITAuto-check passedProduct & Project Management

Install Skyroc Admin Prd Prototype

skills CLI
$ npx skills add Ohh-889/skyroc --skill skyroc-admin-prd-prototype -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Ohh-889/skyroc skyroc-admin-prd-prototype --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/skyroc-admin-prd-prototype .claude/skills/skyroc-admin-prd-prototype && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
skyroc-admin-prd-prototype
GitHub stars
795
Token cost
~913 tokens
SKILL.md length
219 words
Files
8 (incl. scripts, references)
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

为 Skyroc Admin / RuoYi Plus Fast 模块编写来源可追溯的 PRD,并生成可独立打开、可交互、经过桌面端和移动端验收的 HTML 设计原型。仅在用户明确要求使用本 Skill 时启用。

  • Works in 5 steps: 明确架构和事实边界 → 决定页面数量 → 编写 PRD → …
  • Tasks that involve PRD writing
  • SKILL.md covers 适用范围, 默认交付物, 必须读取的资料 and 工作流, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node

What it does

Skyroc Admin Prd Prototype is an agent skill from Ohh-889/skyroc. 为 Skyroc Admin / RuoYi Plus Fast 模块编写来源可追溯的 PRD,并生成可独立打开、可交互、经过桌面端和移动端验收的 HTML 设计原型。仅在用户明确要求使用本 Skill 时启用。

Its SKILL.md is about 910 tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `references/acceptance-checklist.md`, `references/evidence-order.md` and `references/prd-rules.md`).

It sits in Product & Project Management, covering PRD writing. It works with React and FastAPI. The repository describes itself as: Skyroc 是一个基于 React 19 + TypeScript 的跨端前端工程化 monorepo:既提供开箱即用的 Web 中后台模板(Admin / RuoYi 对接版)和 Expo 移动端业务模板,也把请求、状态、日志、主题、双端 UI 组件库等能力沉淀为边界清晰的 workspace 包。 The licence is MIT.

When your agent uses it

  • Tasks that involve PRD writing

Example prompts

  • “/skyroc-admin-prd-prototype”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 明确架构和事实边界
  2. 决定页面数量
  3. 编写 PRD
  4. 生成独立 HTML 原型
  5. 验收

What it can do on your machine

Read from SKILL.md and the folder at commit 10ddd27. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Skyroc Admin Prd Prototype loads about 913 tokens when it runs, and up to ~4.2k if it reads all its reference files. Until then it costs about 33 tokens; SKILL.md has 219 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~33
When it runs · the whole SKILL.md, loaded when a task matches
~913
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 219 words, ~913 tokens.

Download SKILL.mdSave it as .claude/skills/skyroc-admin-prd-prototype/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
skyroc-admin-prd-prototype
description
为 Skyroc Admin / RuoYi Plus Fast 模块编写来源可追溯的 PRD,并生成可独立打开、可交互、经过桌面端和移动端验收的 HTML 设计原型。仅在用户明确要求使用本 Skill 时启用。

Skyroc Admin PRD 与 HTML 原型

本 Skill 用于把当前 FastAPI 契约、React 实现、仓库设计规范以及可用的历史或外部参考整理成一套可实施的 PRD,并为每个真实页面生成独立 HTML 原型。

不要把历史接口、字段或权限字符当作永久事实。每次任务都必须重新读取当前源码。

适用范围

在用户明确说出以下任一表达时使用本 Skill:

  • “使用 skyroc-admin-prd-prototype”
  • “按 Skyroc Admin PRD 原型 Skill 做”
  • “用之前那套 PRD 和 HTML 设计流程”且明确指向本 Skill

典型任务包括:

  • 为一个管理模块编写 PRD。
  • 判断模块需要拆成几个页面。
  • 生成一个或多个独立 HTML 设计图。
  • 在已有 PRD 或原型基础上继续设计。
  • 对照当前 FastAPI、React 实现和可用参考资料修订设计。

本 Skill 不负责把 HTML 原型直接改造成生产 React 页面,除非用户同时明确要求实施前端功能。

默认交付物

没有另行指定时,交付:

  1. 一份 Markdown PRD。
  2. 每个真实页面一份独立的 index.html。
  3. 必要的桌面端和移动端验收截图。
  4. 一份简短验收结论,区分已验证内容和未验证内容。

默认路径:

text
design/ruoyi-plus-fast/pages/<domain>/<module>.md
design/ruoyi-plus-fast/prototypes/<page-slug>/index.html
design/ruoyi-plus-fast/prototypes/<page-slug>/qa/*.png

如果相邻模块使用不同目录层级,沿用相邻模块,不为统一路径而搬动旧文件。

必须读取的资料

开始设计前,完整执行 证据读取顺序。至少确认:

  • 当前设计系统和信息架构。
  • 至少一个业务形态相近的 PRD 和一个视觉或交互形态相近的原型;需要比较设计模式时再读取两个以上样例。
  • FastAPI 当前 routes、schemas、service/use case、权限,以及与当前模块直接相关的测试或接口文档。
  • 当前 React 路由、页面、API 类型与请求封装(如果已经存在)。
  • 用户提供或仓库中确实存在的历史、外部参考实现(如果有)。

用户给出的路径优先于默认路径。路径不存在时,先在相邻仓库中搜索实际位置,不要直接向用户索要可自行发现的信息。

工作流

1. 明确架构和事实边界

在动手写文件前,用简短说明明确:

  • 模块解决什么问题。
  • 前端、后端、基础设施各自负责什么。
  • 哪些是当前源码确认的事实。
  • 哪些是为了补齐体验提出的设计假设。
  • 哪些能力当前不存在,原型不得伪装成已经对接。

创建一份内部事实表,至少包含:

证据已确认能力缺口或冲突对设计的影响
当前 FastAPI
当前 React
设计系统和旧原型
可选参考资料

遇到冲突时,以当前目标系统的真实后端契约为实现事实;历史或外部参考只用于理解业务边界和比较设计方案。不要为了视觉一致而虚构接口。

2. 决定页面数量

按照任务目标而不是参考页面的文件数量拆分页面:

  • 不同菜单入口、权限边界、用户角色或长期工作区通常是独立页面。
  • 新增、编辑、详情、确认等短任务通常使用抽屉或弹窗。
  • 用户明确要求两个页面时,必须生成两个能独立打开的 HTML 文件;不能用一个页面里的 Tab 或状态切换冒充两个页面。
  • 独立页面之间需要真实导航关系时,使用相对链接互相跳转。

在 PRD 中先给出页面清单、页面 ID、路由、使用者和边界,再展开页面细节。

3. 编写 PRD

以 PRD 产物规范 为准,并从 PRD 模板 起草。

PRD 必须做到:

  • 来源可追溯,事实与假设分开。
  • 页面结构、字段、表格列、筛选、状态和交互足够具体。
  • 接口、权限、错误、空状态、并发和危险操作有明确设计。
  • 同时说明桌面端和窄屏行为。
  • 明确原型与当前生产实现之间的差距。
4. 生成独立 HTML 原型

以 HTML 原型规范 为准。

优先参考当前仓库中的黄金样例:

  • design/ruoyi-plus-fast/prototypes/user/index.html
  • design/ruoyi-plus-fast/prototypes/role/index.html
  • design/ruoyi-plus-fast/prototypes/menu-final/index.html
  • design/ruoyi-plus-fast/prototypes/oss/index.html
  • design/ruoyi-plus-fast/prototypes/oss-config/index.html

黄金样例用于理解布局、层级、信息密度和交互质量,不是复制固定业务内容。新页面应保持同一产品家族感,同时让业务特征决定局部布局。

可以从 后台页面骨架 起步。交付前必须替换模板占位内容,并删除未使用的演示结构。

5. 验收

完整执行 验收清单。最低要求:

  1. 使用 Oxfmt 检查 PRD 和 HTML。
  2. 使用本 Skill 的静态检查脚本检查每个原型。
  3. 启动本地静态服务,通过浏览器访问,不只使用文件预览。
  4. 分别检查桌面、窄屏和手机宽度。
  5. 点击查询、重置、新增、编辑、详情、危险操作、关闭浮层等主要交互。
  6. 检查浏览器控制台错误和页面横向溢出。
  7. 截取能证明主页面、关键浮层和移动端状态的图片。

静态检查命令示例:

bash
node .agents/skills/skyroc-admin-prd-prototype/scripts/verify-prototypes.mjs \
  design/ruoyi-plus-fast/prototypes/example-a \
  design/ruoyi-plus-fast/prototypes/example-b

不可妥协的规则

  • 不复制旧 PRD 中可能已经过期的接口事实。
  • 不把历史或外部参考行为描述成 FastAPI 已实现行为。
  • 不把静态 HTML 描述成已经完成后端联调。
  • 不用 Tab 冒充用户要求的多个页面。
  • 不把所有业务塞进一个超长弹窗。
  • 不生成只有视觉、没有关键点击反馈的“截图式页面”。
  • 不使用外部图标 CDN 作为关键依赖;优先内联 SVG。
  • 不在原型中写入真实密钥、Token、个人信息或生产地址。
  • 不因制作原型而修改当前 React 生产代码,除非用户明确要求。

完成报告

最终只需要说明:

  1. PRD 和页面数量。
  2. 每个页面的主要内容和关键交互。
  3. 生成文件的绝对路径。
  4. 执行过的格式、静态和浏览器验证。
  5. 当前仍属于设计假设或尚未真实联调的部分。

© Ohh-889, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (scripts, references) in .agents/skills/skyroc-admin-prd-prototype of Ohh-889/skyroc.

  • SKILL.md
  • references/acceptance-checklist.md
  • references/evidence-order.md
  • references/prd-rules.md
  • references/prototype-rules.md
  • scripts/verify-prototypes.mjs
  • templates/admin-page.html
  • templates/prd.md

Open the folder on GitHubat commit 10ddd27

Compare with similar skills

Skyroc Admin Prd Prototype next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Skyroc Admin Prd Prototype compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Skyroc Admin Prd Prototype this skillOhh-889/skyroc795—~913Automated safety check: PassMIT
Code to PRDalirezarezvani/claude-skills28k1 repos~4.9kAutomated safety check: PassMIT
Superplane Dashboard And Widgetssuperplanehq/superplane7.7k—~3.9kAutomated safety check: PassCustom licence
Parse Prdpony-maggie/code_minions156—~669Automated safety check: PassNone
Python Web Plan Taskspony-maggie/code_minions156—~501Automated safety check: PassNone
Writing Specbartstc/vite-ts-react-template122—~3.4kAutomated safety check: PassMIT

Similar skills

  • Code to PRD

    alirezarezvani/claude-skills

    Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.

    28k GitHub starsUsed in 1 repo~4.9k tokens
    Product & Project ManagementAuto-check passed
  • Superplane Dashboard And Widgets

    superplanehq/superplane

    Implements and configures SuperPlane canvas consoles (markdown, node, table, board, chart, number, scorecard panels), widget data sources, CEL/templates, table row trigger actions, and console YAML.

    7.7k GitHub stars~3.9k tokensUpdated today
    Product & Project ManagementAuto-check passed
  • Parse Prd

    pony-maggie/code_minions

    Parse a PRD file into a structured representation. An agent skill from pony-maggie/code_minions.

    156 GitHub stars~669 tokensUpdated 4 mo ago
    Product & Project ManagementAuto-check passed
  • Python Web Plan Tasks

    pony-maggie/code_minions

    Decompose a Python web PRD into implementation tickets that preserve one FastAPI app.

    156 GitHub stars~501 tokensUpdated 4 mo ago
    Product & Project ManagementAuto-check passed
  • Writing Spec

    bartstc/vite-ts-react-template

    Collaboratively write a feature spec with the developer. An agent skill from bartstc/vite-ts-react-template.

    122 GitHub stars~3.4k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Game Changing Features

    openstatusHQ/data-table-filters

    Find 10x product opportunities and high-leverage improvements.

    2.3k GitHub starsUsed in 3 repos~2.1k tokens
    Product & Project ManagementAuto-check passed

More from Ohh-889/skyroc

All 18 skills in this repo
  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Auto-check passed
  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Auto-check passed
  • Brand

    Ohh-889/skyroc

    Brand voice, visual identity, messaging frameworks, asset management, brand consistency.

    795 GitHub starsUsed in 13 repos~733 tokens
    Auto-check passed
  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Auto-check: notes
  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Auto-check passed
  • Frontend Testing

    Ohh-889/skyroc

    Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities.

    795 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

Works with

Questions about Skyroc Admin Prd Prototype

What does Skyroc Admin Prd Prototype do?

为 Skyroc Admin / RuoYi Plus Fast 模块编写来源可追溯的 PRD,并生成可独立打开、可交互、经过桌面端和移动端验收的 HTML 设计原型。仅在用户明确要求使用本 Skill 时启用。. Skyroc Admin Prd Prototype is an agent skill from Ohh-889/skyroc.

When should I use Skyroc Admin Prd Prototype?

Skyroc Admin Prd Prototype fits situations like: tasks that involve PRD writing.

How do I install Skyroc Admin Prd Prototype in Claude Code?

Run `npx skills add Ohh-889/skyroc --skill skyroc-admin-prd-prototype -a claude-code`. Or copy the skill folder (.agents/skills/skyroc-admin-prd-prototype in Ohh-889/skyroc) into .claude/skills/skyroc-admin-prd-prototype in your project. Claude Code loads it when a task matches its description.

How do I install Skyroc Admin Prd Prototype in Codex?

Run `npx skills add Ohh-889/skyroc --skill skyroc-admin-prd-prototype -a codex`. Or copy the skill folder (.agents/skills/skyroc-admin-prd-prototype in Ohh-889/skyroc) into .agents/skills/skyroc-admin-prd-prototype in your project. Codex loads it when a task matches its description.

Can I use Skyroc Admin Prd Prototype in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Ohh-889/skyroc --skill skyroc-admin-prd-prototype -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/skyroc-admin-prd-prototype, .gemini/skills/skyroc-admin-prd-prototype, .github/skills/skyroc-admin-prd-prototype and .opencode/skills/skyroc-admin-prd-prototype in your project.

What does Skyroc Admin Prd Prototype need to run?

Going by SKILL.md and its folder, Skyroc Admin Prd Prototype needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Skyroc Admin Prd Prototype access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Skyroc Admin Prd Prototype safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Skyroc Admin Prd Prototype use?

Skyroc Admin Prd Prototype is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Skyroc Admin Prd Prototype use?

About 913 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.3k tokens, read only when the agent opens those files.

What are the alternatives to Skyroc Admin Prd Prototype?

Skills that share tags, products or a category with Skyroc Admin Prd Prototype: Code to PRD (alirezarezvani/claude-skills, 28k stars), Superplane Dashboard And Widgets (superplanehq/superplane, 7.7k stars), Parse Prd (pony-maggie/code_minions, 156 stars) and Python Web Plan Tasks (pony-maggie/code_minions, 156 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Skyroc Admin Prd Prototype?

Ohh-889 (a GitHub user) maintains it in Ohh-889/skyroc, which has 795 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on September 1, 2026.

Source: Ohh-889/skyroc on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.