Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
A skill your agent uses when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser.
Install React UI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill react-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins react-ui --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/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .claude/skills/react-ui && 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 "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .claude/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-uiType 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 hashgraph-online/awesome-codex-plugins --skill react-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins react-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .agents/skills/react-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .agents/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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 hashgraph-online/awesome-codex-plugins --skill react-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins react-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .cursor/skills/react-ui && 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 "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .cursor/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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/hashgraph-online/awesome-codex-plugins.git --path plugins/val-town/plugins/skills/react-ui--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 hashgraph-online/awesome-codex-plugins --skill react-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins react-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .gemini/skills/react-ui && 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 "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .gemini/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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 hashgraph-online/awesome-codex-plugins react-uiInstalls 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 hashgraph-online/awesome-codex-plugins --skill react-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .github/skills/react-ui && 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 "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .github/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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 hashgraph-online/awesome-codex-plugins --skill react-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins react-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/val-town/plugins/skills/react-ui .opencode/skills/react-ui && 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 "react-ui" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/val-town/plugins/skills/react-ui into .opencode/skills/react-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-ui", 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
react-ui- GitHub stars
- 1.2k
- Token cost
- ~904 tokens
- SKILL.md length
- 333 words
- Files
- 1
- Skills in repo
- 736
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
A skill your agent uses when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser.
- Works in 2 steps: Backend route → Visible link in the frontend
- Building any val with a user interface — dashboards
- SKILL.md covers File conventions, Styling: Twind + Tailwind, Serving assets: versioned +… and View source link, plus 4 more sections
- Reaches esm.town and cdn.twind.style
What it does
React UI is an agent skill from hashgraph-online/awesome-codex-plugins. Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).
Its SKILL.md is about 900 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, covering React components, CSS and styling and Landing pages. It works with React and Tailwind CSS. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.
When your agent uses it
- Building any val with a user interface — dashboards
- Anything users see in a browser
Example prompts
- “/react-ui”
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- Backend route
- Visible link in the frontend
What it can do on your machine
Read from SKILL.md and the folder at commit 16b4156. 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 (its code samples are typescript and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
esm.towncdn.twind.styleesm.sh
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
React UI loads about 904 tokens when it runs. Until then it costs about 80 tokens; SKILL.md has 333 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 hashgraph-online/awesome-codex-plugins at commit 16b4156, republished under its Apache-2.0 licence (© hashgraph-online). 333 words, ~904 tokens.
Download SKILL.mdSave it as
.claude/skills/react-ui/SKILL.md (or your agent's skills folder).- name
- react-ui
- description
- Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).
- triggers
- react, jsx, tsx, ui, frontend, component, dashboard, page, app, twind, tailwind, styling, css, html
React UI
For any val that renders a UI, prefer to build it with React components in .tsx files, unless the user states otherwise. The templates/react-hono-starter template is set up for this — start there with remix_val instead of building from scratch.
File conventions
Put markup, styles, and scripts in real files — avoid template literal strings (e.g. new Response(\<html>...</html>`)`). Code in template strings has no syntax highlighting, no linting, no type checking, and is unreviewable.
.tsx— React/JSX components, any UI with logic or interactivity.html— purely static markup.ts— server code and scripts
Build UI component by component in .tsx files. Compose small components rather than rendering one giant page.
Styling: Twind + Tailwind
Prefer Twind to apply Tailwind utility classes at runtime — no build step required. Add the script to your HTML shell:
<script src="https://cdn.twind.style" crossorigin></script>Then use Tailwind classes directly in JSX:
<div className="flex items-center gap-4 p-6 rounded-lg bg-white shadow">
<h1 className="text-2xl font-bold">Hello</h1>
</div>Avoid inline <style> tags, CSS-in-JS objects, or separate .css files, unless the user says otherwise.
Serving assets: versioned + immutable
Serve client modules with serveImmutableFile from std/utils — browsers cache
them immutably, and publishing bumps the val's version, which invalidates
automatically (full pattern: the client-side-js skill). A never-cached
frontend/root.tsx shell (hono/jsx) stamps the entry and favicon with
immutableFileUrl:
// frontend/root.tsx — in the Root() HTML shell:
<script src={immutableFileUrl("/frontend/index.tsx")} type="module" />
// index.ts:
app.get("/", (c) => c.html(Root()));
app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));View source link
Every UI val should expose a way for users to see and remix its source. Both parts are required:
- Backend route:
ts import { parseVal } from "https://esm.town/v/std/utils/index.ts"; app.get("/source", (c) => c.redirect(parseVal().links.self.val)); - Visible link in the frontend:
tsx <a href="/source">view source</a>
React version pinning
A common error — "Cannot read properties of null (reading 'useState')" — means a React sub-dependency is loading a different React version. Pin all React-related imports to 18.2.0:
import SomeLib from "https://esm.sh/some-lib?deps=react@18.2.0,react-dom@18.2.0";Assets
Do not use external images or hosted assets that may break. Prefer:
- Emojis or unicode symbols
- Inline SVG
- Icon fonts via CDN (Lucide, Font Awesome)
Surfacing client-side errors
To send browser errors back to val logs (visible via get_logs), include this script in your HTML shell:
<script src="https://esm.town/v/std/catch"></script>Verifying changes
After editing a UI val, call fetch_val_endpoint to confirm the page renders without error, then check get_logs for any client-side errors. Don't report the change as done without both.
© hashgraph-online, Apache-2.0. 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 plugins/val-town/plugins/skills/react-ui of hashgraph-online/awesome-codex-plugins.
Open the folder on GitHubat commit 16b4156
Compare with similar skills
React UI 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 |
|---|---|---|---|---|---|---|
| React UI this skillhashgraph-online/awesome-codex-plugins | 1.2k | — | ~904 | Automated safety check: Pass | Apache-2.0 | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 260 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Tailwind To Stylexshadcn-labs/shadcn-cssinjs | 122 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Atlaspacifio/ui | 154 | — | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Tailwind To Stylex
shadcn-labs/shadcn-cssinjs
Migrate TailwindCSS to StyleX. An agent skill from shadcn-labs/shadcn-cssinjs.
Atlas
pacifio/ui
Atlas — a design language and UI guide system for agent interfaces.
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
More from hashgraph-online/awesome-codex-plugins
All 736 skills in this repoAnime Reaction Gif
hashgraph-online/awesome-codex-plugins
Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.
Calibredb
hashgraph-online/awesome-codex-plugins
Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).
Rust API Test Harness
hashgraph-online/awesome-codex-plugins
A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…
Art
hashgraph-online/awesome-codex-plugins
Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…
Calle
hashgraph-online/awesome-codex-plugins
Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.
Game Balance Economy
hashgraph-online/awesome-codex-plugins
Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.
Related
Works with
Categories
Questions about React UI
What does React UI do?
A skill your agent uses when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. React UI is an agent skill from hashgraph-online/awesome-codex-plugins. Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser.
When should I use React UI?
React UI fits situations like: building any val with a user interface — dashboards; anything users see in a browser.
How do I install React UI in Claude Code?
Run `npx skills add hashgraph-online/awesome-codex-plugins --skill react-ui -a claude-code`. Or copy the skill folder (plugins/val-town/plugins/skills/react-ui in hashgraph-online/awesome-codex-plugins) into .claude/skills/react-ui in your project. Claude Code loads it when a task matches its description.
How do I install React UI in Codex?
Run `npx skills add hashgraph-online/awesome-codex-plugins --skill react-ui -a codex`. Or copy the skill folder (plugins/val-town/plugins/skills/react-ui in hashgraph-online/awesome-codex-plugins) into .agents/skills/react-ui in your project. Codex loads it when a task matches its description.
Can I use React UI 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 hashgraph-online/awesome-codex-plugins --skill react-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-ui, .gemini/skills/react-ui, .github/skills/react-ui and .opencode/skills/react-ui in your project.
What does React UI need to run?
SKILL.md names no scripts, command-line tools or credentials: React UI is instructions for the agent only.
Does React UI access the network?
SKILL.md names 3 domains. In commands or code: esm.town, cdn.twind.style and esm.sh; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Is React UI 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 React UI use?
React UI is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does React UI use?
About 904 tokens (SKILL.md is roughly 3.6k 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 React UI?
Skills that share tags, products or a category with React UI: Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Design Style (Castor6/tactus, 376 stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars) and Tailwind To Stylex (shadcn-labs/shadcn-cssinjs, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React UI?
hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,232 GitHub stars. The repository holds 736 skills in this directory. The repository was last updated on October 6, 2026.
Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.