Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
面向复杂功能的代码库探索、架构决策、实现与质量审查工作流。仅在用户明确调用本 Skill，或功能明显涉及多个模块或系统、重要架构调整、兼容性决策、数据迁移或高风险实现时使用；不要用于范围清晰的小型或中型改动。
Install Feature Dev
$ npx skills add Ohh-889/skyroc --skill feature-dev -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Ohh-889/skyroc feature-dev --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/feature-dev .claude/skills/feature-dev && rm -rf skills-srcUse ~/.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/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .claude/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-devType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Ohh-889/skyroc --skill feature-dev -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Ohh-889/skyroc feature-dev --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/feature-dev .agents/skills/feature-dev && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .agents/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Ohh-889/skyroc --skill feature-dev -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Ohh-889/skyroc feature-dev --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/feature-dev .cursor/skills/feature-dev && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .cursor/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Ohh-889/skyroc.git --path .agents/skills/feature-dev--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Ohh-889/skyroc --skill feature-dev -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Ohh-889/skyroc feature-dev --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/feature-dev .gemini/skills/feature-dev && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .gemini/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Ohh-889/skyroc feature-devInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Ohh-889/skyroc --skill feature-dev -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/feature-dev .github/skills/feature-dev && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .github/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Ohh-889/skyroc --skill feature-dev -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Ohh-889/skyroc feature-dev --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/feature-dev .opencode/skills/feature-dev && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "feature-dev" agent skill from https://github.com/Ohh-889/skyroc/tree/master/.agents/skills/feature-dev into .opencode/skills/feature-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feature-dev", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
feature-dev- GitHub stars
- 795
- Token cost
- ~413 tokens
- SKILL.md length
- 76 words
- Files
- 1
- Skills in repo
- 18
- Repo updated
- First seen
- Licence
- MIT
At a glance
面向复杂功能的代码库探索、架构决策、实现与质量审查工作流。仅在用户明确调用本 Skill，或功能明显涉及多个模块或系统、重要架构调整、兼容性决策、数据迁移或高风险实现时使用；不要用于范围清晰的小型或中型改动。
- Works in 7 steps: 判断复杂度 → 探索代码库 → 补齐关键信息 → …
- Frontend & Design work in your project
- SKILL.md covers 工作原则, 1. 判断复杂度, 2. 探索代码库 and 3. 补齐关键信息, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Feature Dev is an agent skill from Ohh-889/skyroc. 面向复杂功能的代码库探索、架构决策、实现与质量审查工作流。仅在用户明确调用本 Skill，或功能明显涉及多个模块或系统、重要架构调整、兼容性决策、数据迁移或高风险实现时使用；不要用于范围清晰的小型或中型改动。
Its SKILL.md is about 410 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. 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
- Frontend & Design work in your project
Example prompts
- “/feature-dev”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
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
No scripts in the folder and no shell commands in SKILL.md.
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
Feature Dev loads about 413 tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 76 words of instructions outside code blocks.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 76 words, ~413 tokens.
Download SKILL.mdSave it as
.claude/skills/feature-dev/SKILL.md (or your agent's skills folder).- name
- feature-dev
- description
- 面向复杂功能的代码库探索、架构决策、实现与质量审查工作流。仅在用户明确调用本 Skill，或功能明显涉及多个模块或系统、重要架构调整、兼容性决策、数据迁移或高风险实现时使用；不要用于范围清晰的小型或中型改动。
复杂功能开发
在充分理解现有代码的基础上完成复杂功能。遵循仓库根目录及相关子目录中的 AGENTS.md，将其作为编码规范的唯一事实来源。
工作原则
- 先追踪真实调用链、数据流、模块边界和相邻实现，再确定方案。
- 优先复用现有组件、Hooks、服务、类型和基础设施。
- 默认选择满足需求的最小完整改动，避免无关重构和预设式抽象。
- 只有缺失信息会明显改变业务结果、兼容性、数据安全或实现边界时才询问用户；轻微歧义根据现有代码合理判断并继续。
- 只在方案存在实质性差异时比较多个架构，不为形式完整而制造备选方案。
- 未经用户授权，不扩大任务范围或执行破坏性、不可逆操作。
1. 判断复杂度
先判断任务是否确实需要本工作流。
- 若任务范围清晰、局限于少量文件且不涉及重要架构决策，直接按常规开发流程完成，不强制执行后续阶段。
- 若涉及多个模块或系统、公共接口、数据迁移、复杂状态流或高风险兼容性，继续执行以下流程。
- 仅当任务包含三个以上相互依赖的阶段且计划能帮助跟踪进度时，使用当前环境提供的计划工具。
2. 探索代码库
- 阅读相关
AGENTS.md、包配置、架构说明和相邻实现。 - 追踪入口、调用链、状态变化、数据契约、错误处理和测试方式。
- 搜索可复用的类似功能与扩展点。
- 当存在多个可独立调查的问题且并行探索能明显提高效率时，按需启动探索代理；不要固定代理数量。要求代理返回结论、证据和关键文件列表，随后亲自阅读决定实现所必需的文件。
- 向用户说明会影响实现选择的关键发现；不要输出冗长的文件阅读流水账。
3. 补齐关键信息
根据代码证据识别真正阻塞实现的问题，例如业务边界、错误语义、权限、兼容性、迁移策略和不可逆操作。
- 能从源码、配置、类型、测试或现有行为中确定的信息，直接查明，不反问用户。
- 存在安全且符合项目惯例的默认方案时，说明必要假设并继续。
- 只有不同答案会造成明显不同的业务结果或风险时，集中提出少量具体问题并等待回答。
4. 确定方案
定义目标结构、职责边界、交互方式和兼容策略。
- 通常直接给出一个推荐方案及理由。
- 只有多个方案存在实质性取舍时，简要比较最小改动、长期可维护性和实施风险。
- 若推荐方案仍处于用户已授权的需求范围内，可直接实现。
- 只有方案会扩大范围、改变公共行为、引入数据风险或需要不可逆操作时，才请求用户确认。
5. 实现与验证
- 按选定方案实施最小且完整的修改。
- 严格遵循现有架构、命名、类型和平台规范。
- 保持公共接口和既有行为稳定，除非需求明确要求改变。
- 运行受影响 workspace 的针对性测试、类型检查、lint 或构建；避免默认执行整个大型仓库的全部检查。
- 分析验证失败，区分本次改动、环境问题和已有问题，不把未执行或失败的检查描述为通过。
6. 质量审查
检查功能正确性、边界情况、重复逻辑、抽象边界、项目规范和回归风险。
- 对高风险或跨模块改动，可按需并行委派彼此独立的审查方向；不要固定启动多个审查代理。
- 直接修复任务范围内明确且安全的问题。
- 无关问题只简短记录，不顺手扩大修改范围。
- 需要新增授权或会改变业务行为的问题，向用户说明后再处理。
7. 交付
简洁说明：
- 修改了什么。
- 关键架构或根因是什么。
- 执行了哪些验证以及结果。
- 仍存在的风险或未验证项。
不要生成用户未要求的计划文档、迁移指南或冗长过程复盘。
© 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
Just SKILL.md in .agents/skills/feature-dev of Ohh-889/skyroc.
Open the folder on GitHubat commit 10ddd27
Compare with similar skills
Feature Dev 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Feature Dev this skillOhh-889/skyroc | 795 | — | ~413 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 60k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| React Composition Patternsvercel-labs/openreview | 1.7k | 58 repos | ~721 | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
- Official
React Composition Patterns
vercel-labs/openreview
Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
More from Ohh-889/skyroc
All 18 skills in this repoUI 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.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Brand
Ohh-889/skyroc
Brand voice, visual identity, messaging frameworks, asset management, brand consistency.
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
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…
Frontend Testing
Ohh-889/skyroc
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities.
Related
Categories
Questions about Feature Dev
What does Feature Dev do?
面向复杂功能的代码库探索、架构决策、实现与质量审查工作流。仅在用户明确调用本 Skill，或功能明显涉及多个模块或系统、重要架构调整、兼容性决策、数据迁移或高风险实现时使用；不要用于范围清晰的小型或中型改动。. Feature Dev is an agent skill from Ohh-889/skyroc.
When should I use Feature Dev?
Feature Dev fits situations like: frontend & Design work in your project.
How do I install Feature Dev in Claude Code?
Run `npx skills add Ohh-889/skyroc --skill feature-dev -a claude-code`. Or copy the skill folder (.agents/skills/feature-dev in Ohh-889/skyroc) into .claude/skills/feature-dev in your project. Claude Code loads it when a task matches its description.
How do I install Feature Dev in Codex?
Run `npx skills add Ohh-889/skyroc --skill feature-dev -a codex`. Or copy the skill folder (.agents/skills/feature-dev in Ohh-889/skyroc) into .agents/skills/feature-dev in your project. Codex loads it when a task matches its description.
Can I use Feature Dev 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 feature-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/feature-dev, .gemini/skills/feature-dev, .github/skills/feature-dev and .opencode/skills/feature-dev in your project.
What does Feature Dev need to run?
SKILL.md names no scripts, command-line tools or credentials: Feature Dev is instructions for the agent only.
Does Feature Dev 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 Feature Dev 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. Review the folder before installing.
What licence does Feature Dev use?
Feature Dev 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 Feature Dev use?
About 413 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Feature Dev?
Skills that share tags, products or a category with Feature Dev: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 60k stars), React Composition Patterns (vercel-labs/openreview, 1.7k stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Feature Dev?
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.