Tidyfactor Styler
TidyFactor/Styler
Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL).
Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles
Install HTML To Generateblocks
$ npx skills add wpgaurav/generateblocks-skills --skill html-to-generateblocks -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wpgaurav/generateblocks-skills html-to-generateblocks --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/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-to-generateblocks .claude/skills/html-to-generateblocks && 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 "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .claude/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocksType 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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wpgaurav/generateblocks-skills html-to-generateblocks --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/html-to-generateblocks .agents/skills/html-to-generateblocks && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .agents/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wpgaurav/generateblocks-skills html-to-generateblocks --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/html-to-generateblocks .cursor/skills/html-to-generateblocks && 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 "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .cursor/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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/wpgaurav/generateblocks-skills.git --path skills/html-to-generateblocks--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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wpgaurav/generateblocks-skills html-to-generateblocks --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/html-to-generateblocks .gemini/skills/html-to-generateblocks && 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 "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .gemini/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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 wpgaurav/generateblocks-skills html-to-generateblocksInstalls 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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/html-to-generateblocks .github/skills/html-to-generateblocks && 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 "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .github/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wpgaurav/generateblocks-skills html-to-generateblocks --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/html-to-generateblocks .opencode/skills/html-to-generateblocks && 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 "html-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/html-to-generateblocks into .opencode/skills/html-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-to-generateblocks", 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
html-to-generateblocks- GitHub stars
- 136
- Token cost
- ~788 tokens
- SKILL.md length
- 350 words
- Files
- 3 (incl. references)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- None found
At a glance
Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles
- Works in 4 steps: Inventory the source DOM, CSS, links,… → Remove wrappers only when they own no… → Map declarations and states into local… → …
- Frontend & Design work in your project
- SKILL.md covers Shared contract, Conversion workflow and Delivery
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
HTML To Generateblocks is an agent skill from wpgaurav/generateblocks-skills. Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles
Its SKILL.md is about 790 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `CLAUDE.md` and `references/conversion-patterns.md`).
It sits in Frontend & Design. It works with WordPress. The repository describes itself as: GenerateBlocks Skills to create better layouts with AI tools.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/html-to-generateblocks”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Inventory the source DOM, CSS, links, media, and runtime behavior.
- Remove wrappers only when they own no semantics, layout, or behavior.
- Map declarations and states into local styles, then compile matching css.
- Generate {section}-converted.html; validate against the source and the
What it can do on your machine
Read from SKILL.md and the folder at commit b57b6c2. 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
HTML To Generateblocks loads about 788 tokens when it runs, and up to ~1.7k if it reads all its reference files. Until then it costs about 24 tokens; SKILL.md has 350 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 350 words (~788 tokens).
“Convert supplied HTML/CSS into editable native blocks while preserving content, semantics, responsive behavior, and interactions.”
- name
- html-to-generateblocks
- metadata.version
- 2.0.0
- metadata.author
- Gaurav Tiwari
- metadata.updated
- 2026-09-18
- metadata.trigger
- HTML to GenerateBlocks, convert to GB, convert HTML to blocks, GenerateBlocks conversion
- metadata.tags
- wordpress, generateblocks, conversion, html
- metadata.compatibility
- Stable V2 guidance plus free 2.5.0-beta.1 / Pro 2.8.0-beta.1 design-system routing
Files
SKILL.md and 2 other files (references) in skills/html-to-generateblocks of wpgaurav/generateblocks-skills.
- SKILL.md
- CLAUDE.md
- references/conversion-patterns.md
Open the folder on GitHubat commit b57b6c2
Compare with similar skills
HTML To Generateblocks 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 |
|---|---|---|---|---|---|---|
| HTML To Generateblocks this skillwpgaurav/generateblocks-skills | 136 | — | ~788 | Automated safety check: Pass | None | |
| Tidyfactor StylerTidyFactor/Styler | 118 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Block Runnerhumanmade/block-runner | 122 | — | ~1.8k | Automated safety check: Pass | GPL-2.0-or-later | |
| Wp Accessibility Reviewjorgerosal/wordpress-skills | 101 | — | ~1.1k | Automated safety check: Pass | MIT | |
| WpdsAutomattic/agent-skills | 211 | 1 repos | ~704 | Automated safety check: Pass | None | |
| Wjs Converting Wp To Hugojianshuo/claude-skills | 130 | — | ~1.8k | Automated safety check: Pass | MIT |
Similar skills
Block Runner
humanmade/block-runner
Turn WordPress page content or authored design HTML into valid, native, editable Gutenberg blocks, or plan a reusable named registered block for deterministic source generation.
Wp Accessibility Review
jorgerosal/wordpress-skills
WordPress accessibility review for themes, blocks, plugins, and admin interfaces.
Wpds
Automattic/agent-skills
A skill your agent uses when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.
Wjs Converting Wp To Hugo
jianshuo/claude-skills
A skill your agent uses when migrating a WordPress site to a Hugo static site on GitHub Pages from a WXR export (.xml) plus the wp-content/uploads folder — preserving /archives/<id/ URLs, localizing…
Wordpress Block Theming
Automattic/wordpress-agent-skills
WordPress Full Site Editing (FSE) theme architecture. An agent skill from Automattic/wordpress-agent-skills.
More from wpgaurav/generateblocks-skills
Generateblocks Layouts
wpgaurav/generateblocks-skills
Build and audit WordPress layouts with GenerateBlocks V2, including CSS Mode, responsive at-rules, dynamic data, Pro components, and recovery-safe block serialization.
Elementor To Generateblocks
wpgaurav/generateblocks-skills
Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception
Figma To Generateblocks
wpgaurav/generateblocks-skills
Convert Figma designs to GenerateBlocks V2 format for WordPress
Related
Works with
Categories
Questions about HTML To Generateblocks
What does HTML To Generateblocks do?
Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles. HTML To Generateblocks is an agent skill from wpgaurav/generateblocks-skills.
When should I use HTML To Generateblocks?
HTML To Generateblocks fits situations like: frontend & Design work in your project.
How do I install HTML To Generateblocks in Claude Code?
Run `npx skills add wpgaurav/generateblocks-skills --skill html-to-generateblocks -a claude-code`. Or copy the skill folder (skills/html-to-generateblocks in wpgaurav/generateblocks-skills) into .claude/skills/html-to-generateblocks in your project. Claude Code loads it when a task matches its description.
How do I install HTML To Generateblocks in Codex?
Run `npx skills add wpgaurav/generateblocks-skills --skill html-to-generateblocks -a codex`. Or copy the skill folder (skills/html-to-generateblocks in wpgaurav/generateblocks-skills) into .agents/skills/html-to-generateblocks in your project. Codex loads it when a task matches its description.
Can I use HTML To Generateblocks 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 wpgaurav/generateblocks-skills --skill html-to-generateblocks -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-to-generateblocks, .gemini/skills/html-to-generateblocks, .github/skills/html-to-generateblocks and .opencode/skills/html-to-generateblocks in your project.
What does HTML To Generateblocks need to run?
SKILL.md names no scripts, command-line tools or credentials: HTML To Generateblocks is instructions for the agent only.
Does HTML To Generateblocks 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 HTML To Generateblocks 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 HTML To Generateblocks use?
No licence was found for HTML To Generateblocks or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does HTML To Generateblocks use?
About 788 tokens (SKILL.md is roughly 3.2k 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 958 tokens, read only when the agent opens those files.
What are the alternatives to HTML To Generateblocks?
Skills that share tags, products or a category with HTML To Generateblocks: Tidyfactor Styler (TidyFactor/Styler, 118 stars), Block Runner (humanmade/block-runner, 122 stars), Wp Accessibility Review (jorgerosal/wordpress-skills, 101 stars) and Wpds (Automattic/agent-skills, 211 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML To Generateblocks?
wpgaurav (a GitHub user) maintains it in wpgaurav/generateblocks-skills, which has 136 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 6, 2026.
Source: wpgaurav/generateblocks-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.