Recording
codewhale-hq/Codewhale
Capture screenshots on registered computers, record on macOS or HarmonyOS, and manage saved captures.
Write HTML design records. An agent skill from videojs/video.js.
Custom licenceAuto-check passed
Install Write HTML Component Design
$ npx skills add videojs/video.js --skill write-html-component-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install videojs/video.js write-html-component-design --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/videojs/video.js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/write-html-component-design .claude/skills/write-html-component-design && 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 "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .claude/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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/videojs/video.js/tree/main/.agents/skills/write-html-component-designType 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 videojs/video.js --skill write-html-component-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install videojs/video.js write-html-component-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/write-html-component-design .agents/skills/write-html-component-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .agents/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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 videojs/video.js --skill write-html-component-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install videojs/video.js write-html-component-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/write-html-component-design .cursor/skills/write-html-component-design && 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 "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .cursor/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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/videojs/video.js.git --path .agents/skills/write-html-component-design--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 videojs/video.js --skill write-html-component-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install videojs/video.js write-html-component-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/write-html-component-design .gemini/skills/write-html-component-design && 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 "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .gemini/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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 videojs/video.js write-html-component-designInstalls 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 videojs/video.js --skill write-html-component-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/write-html-component-design .github/skills/write-html-component-design && 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 "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .github/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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 videojs/video.js --skill write-html-component-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install videojs/video.js write-html-component-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/videojs/video.js.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/write-html-component-design .opencode/skills/write-html-component-design && 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 "write-html-component-design" agent skill from https://github.com/videojs/video.js/tree/main/.agents/skills/write-html-component-design into .opencode/skills/write-html-component-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "write-html-component-design", 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
write-html-component-design- GitHub stars
- 40k
- Token cost
- ~253 tokens
- SKILL.md length
- 129 words
- Files
- 1
- Skills in repo
- 38
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Write HTML design records. An agent skill from videojs/video.js.
- Works in 4 steps: Require an explicit request. Use its… → State the element boundary and only the… → Cover ownership, anatomy, markup versus… → …
- The user explicitly requests one
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Write HTML Component Design is an agent skill from videojs/video.js. Write HTML design records. Use when the user explicitly requests one.
Its SKILL.md is about 250 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
The repository describes itself as: Video.js v10 - open source media player framework for HTML and React.
When your agent uses it
- The user explicitly requests one
Example prompts
- “/write-html-component-design”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Require an explicit request. Use its path or the smallest UI record location, with HTML scope clear.
- State the element boundary and only the rationale or constraint that code and tests cannot explain.
- Cover ownership, anatomy, markup versus CSS, APIs, opt-outs, registration, or bundle cost only when they explain the choice.
- Link source instead of copying inventories or mechanics. Include alternatives or consequences only when material.
What it can do on your machine
Read from SKILL.md and the folder at commit 74cf8cd. 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
Write HTML Component Design loads about 253 tokens when it runs. Until then it costs about 24 tokens; SKILL.md has 129 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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 129 words (~253 tokens).
“Read internal/design/README.md, nearby records, and relevant HTML code, tests, exports, and package metadata.”
- name
- write-html-component-design
Files
Just SKILL.md in .agents/skills/write-html-component-design of videojs/video.js.
Open the folder on GitHubat commit 74cf8cd
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in videojs/video.js, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Write HTML Component Design 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 |
|---|---|---|---|---|---|---|
| Write HTML Component Design this skillvideojs/video.js | 40k | — | ~253 | Automated safety check: Pass | Custom licence | |
| Recordingcodewhale-hq/Codewhale | 41k | — | ~540 | Automated safety check: Pass | MIT | |
| No Explicit Anythedaviddias/Front-End-Checklist | 74k | — | ~565 | Automated safety check: Pass | MIT | |
| Grill And Recordasgeirtj/system_prompts_leaks | 69k | — | ~912 | Automated safety check: Pass | CC0-1.0 | |
| Architecture Decision Recordsaffaan-m/ECC | 275k | 4 repos | ~1.8k | Automated safety check: Pass | MIT | |
| Architecture Decision Recordsaffaan-m/ECC | 275k | 1 repos | ~863 | Automated safety check: Pass | MIT |
Similar skills
No Explicit Any
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing TypeScript files for type safety regressions, during code review of functions that handle external data, or when the codebase has ESLint warnings for…
Grill And Record
asgeirtj/system_prompts_leaks
Run an explicitly requested decision interview and record each settled decision in durable project documentation.
Architecture Decision Records
affaan-m/ECC
Capture architectural decisions as numbered ADR markdown files in docs/adr/ with context, alternatives considered, consequences, and an index README.
Architecture Decision Records
affaan-m/ECC
在Claude Code会话期间，将做出的架构决策捕获为结构化的架构决策记录（ADR）。自动检测决策时刻，记录上下文、考虑的替代方案和理由。维护一个ADR日志，以便未来的开发人员理解代码库为何以当前方式构建。
Architecture Decision Records
affaan-m/ECC
コーディングセッション中にアーキテクチャ決定を構造化ADRとして記録し、自動的に決定の瞬間を検出し、コンテキスト、検討された代替案、根拠を記録します。今後の開発者がコードベースの形成理由を理解するためのADRログを維持します。
More from videojs/video.js
All 38 skills in this repoCommit PR
videojs/video.js
Commit, push, and create or update a Video.js pull request. An agent skill from videojs/video.js.
Maintain Tests
videojs/video.js
Gate and audit test value. An agent skill from videojs/video.js.
Write API Reference
videojs/video.js
Write generated Video.js API reference pages. An agent skill from videojs/video.js.
Write Docs
videojs/video.js
Write Video.js guides, concepts, READMEs, and JSDoc. An agent skill from videojs/video.js.
Write Locale Translations
videojs/video.js
Translate or audit the values in a Video.js locale pack. An agent skill from videojs/video.js.
Change Spf Behavior
videojs/video.js
Change SPF playback-engine behaviors. An agent skill from videojs/video.js.
Questions about Write HTML Component Design
What does Write HTML Component Design do?
Write HTML design records. An agent skill from videojs/video.js. js. Write HTML design records.
When should I use Write HTML Component Design?
Write HTML Component Design fits situations like: the user explicitly requests one.
How do I install Write HTML Component Design in Claude Code?
Run `npx skills add videojs/video.js --skill write-html-component-design -a claude-code`. Or copy the skill folder (.agents/skills/write-html-component-design in videojs/video.js) into .claude/skills/write-html-component-design in your project. Claude Code loads it when a task matches its description.
How do I install Write HTML Component Design in Codex?
Run `npx skills add videojs/video.js --skill write-html-component-design -a codex`. Or copy the skill folder (.agents/skills/write-html-component-design in videojs/video.js) into .agents/skills/write-html-component-design in your project. Codex loads it when a task matches its description.
Can I use Write HTML Component Design 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 videojs/video.js --skill write-html-component-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/write-html-component-design, .gemini/skills/write-html-component-design, .github/skills/write-html-component-design and .opencode/skills/write-html-component-design in your project.
What does Write HTML Component Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Write HTML Component Design is instructions for the agent only.
Does Write HTML Component Design 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 Write HTML Component Design 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 Write HTML Component Design use?
Write HTML Component Design has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Write HTML Component Design use?
About 253 tokens (SKILL.md is roughly 1k 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 Write HTML Component Design?
Skills that share tags, products or a category with Write HTML Component Design: Recording (codewhale-hq/Codewhale, 41k stars), No Explicit Any (thedaviddias/Front-End-Checklist, 74k stars), Grill And Record (asgeirtj/system_prompts_leaks, 69k stars) and Architecture Decision Records (affaan-m/ECC, 275k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Write HTML Component Design?
videojs (a GitHub organization) maintains it in videojs/video.js, which has 39,909 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on October 8, 2026.
Source: videojs/video.js on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.