SkillFoxx

rhp skill

The rhp skill and checker teach an agent to build charts from HTML elements on SolidJS and check them at several widths.

  • 65 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The checker opens charts in a browser and runs the page code.
All reasons and checks

bezda-team/rhpAuthor:bezda-team

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/rhp

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The checker opens charts in a browser and runs the page code.

This is third-party code. Review the repository files before installing.

What it does

rhp builds charts not in SVG or canvas but from HTML elements placed by CSS, on SolidJS. A slat template built from the Bar, Dot, Tick, Label, Cell, Place, Area and Line blocks describes one data row, and when a value changes only what reads it re-runs. The library ships a kit for agents. The skill in `skills/rhp/` explains how a chart is built, gives tested pages with techniques and makes the agent check its work. The checker in `mcp/` renders a chart in a browser at desktop and phone widths and reports what a reader would hit, with a fix for each finding. `npx -y @bezda/rhp-mcp check chart.html` runs it, and with no arguments it is an MCP server.

Who it is for. Frontend developers and analysts who give an agent interactive charts on SolidJS or in a plain HTML page.

Good fit when

  • An agent builds a bar chart from data in one go without knowing the library.
  • A finished chart is checked at phone and desktop widths and returns a list of fixes.
  • A chart is added to a page with no build step through `@bezda/rhp/standalone`.
  • For React the `@bezda/rhp-react` wrapper is used.

Not a fit when

  • You need canvas or SVG charts with huge point counts for scientific visualisation.
  • The project uses neither SolidJS nor build-free HTML pages.
  • You require a library with a long stable version history.

Example request

Using rhp, make a bar chart of fruit sales and check it at phone and desktop widths.

Limitations

The project remains a library for SolidJS, so an app without Solid uses the ready build or the separate `standalone` module. The checker launches a browser, which requires the matching components. The `ManyDots` collection for large point counts is marked experimental, and for any point count you can keep the `Dot` block. The skill installs with `npx skills add bezda-team/rhp` and assumes the agent does not know rhp in advance.

How to disable. Remove the skill with `npx skills remove rhp` or delete its folder from the agent directory, and the package with `npm uninstall @bezda/rhp`. Remove the MCP server entry from settings.

FAQ

How do I install the skill?

Run `npx skills add bezda-team/rhp`. It installs into Claude Code, Codex, Cursor, Copilot, Gemini CLI and other agents.

What does the chart checker verify?

It renders the chart in a browser at desktop and phone widths and reports what a reader would hit, with a fix.

How do I install the library itself?

With `npm install @bezda/rhp`. Solid is the only peer dependency and there is no stylesheet to import.

Can it run without a build step?

Yes, import `@bezda/rhp/standalone` from a CDN: one module with Solid included, 36 kB gzipped.

Is there a React version?

Yes, the `@bezda/rhp-react` package turns an rhp chart into a React component.

Discussion

No questions or reviews yet.

Skills

iChart.js gives agents a checked path from data to chart: type selection, a JSON spec, validation and SVG or Canvas rendering.

SkillMinimal access352

The @microcharts/mcp server: an agent picks from 106 tiny React charts, gets ready props and receives SVG with alt text

MCP serverMinimal access207
Official

Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS

SkillExtended access5.9K
Official

Microsoft's official skill lays out graphs and networks in JavaScript and TypeScript and exports figures to SVG, PDF, PNG and EPS.

SkillMinimal access175

Lightweight Charts skills for agents

Lightweight Charts skills

Official

Two TradingView skills: working with Lightweight Charts v5 without outdated v4 calls, and authoring your own plugins, custom series and primitives

SkillMinimal access17.8K

A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program

SkillExtended access556

README in short

An HTML and CSS chart library is paired with a skill and a checker for agents. The docs have guides, a reference and a gallery of live charts.

README badge

Report a problem