Enforce rigorous quality gates across React/TypeScript and Go projects with a harness of lifecycle hooks that block violations on every edit. Automate TDD workflows, code review, CI warning audits, dependency vulnerability scanning (Snyk), and accessibility checks, all integrated into a single developer workflow.
Constructs failure scenarios and stress-tests implementations. Asks "what breaks this?" not "does this look right?" Gated: runs only when diff_lines > 200 OR any prior reviewer returned a CRITICAL finding OR diff touches auth/security paths. Outputs structured JSON findings per findings-schema.md.
Reviews code changes for spec compliance and quality. Dispatch for two-stage PR review. Outputs structured JSON findings per findings-schema.md.
All reviewer agents (`self-reviewer`, `code-reviewer`, `adversarial-reviewer`) MUST output findings as a single JSON block. This enables programmatic triage, autofix routing, and cross-reviewer deduplication.
Required reading for `code-reviewer`, `adversarial-reviewer`, `self-reviewer`.
Design-perspective plan review. UX flow, accessibility, information density, copy, visual consistency with existing registry components. Gated in /grill-me phase 2b; spawned in parallel with product-hat and engineering-hat. Outputs structured JSON findings.
Use when exploring design options, starting new features, or needing to think before coding. Two modes: design (explore approaches with trade-offs) and challenge (stress-test decisions). No implementation until design is approved.
Ultra-compressed reply mode. Use when user asks be brief or /caveman.
Generate Codex hooks.json and AGENTS.md from Claude Code hooks. Maps supported hooks directly, including Edit|Write apply_patch aliases, and keeps Stop batch checks only as fallback. Use when setting up Codex compatibility or dual-agent support.
Analyze changes, create categorized conventional commits, push, and open a PR. Use when user asks to open a PR, invokes `/commit-push-pr`, or requests a full commit -> push -> PR flow with CI monitoring.
Analyze changes, create categorized conventional commits, and push. Use when user asks to commit and push, invokes `/commit-push`, or requests conventional commits without a PR.
Executes bash commands
Hook triggers when Bash tool is used
Modifies files
Hook triggers on file write and edit operations
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimnpx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Uses power tools
Uses Bash, Write, or Edit tools
Uses power tools
Uses Bash, Write, or Edit tools
Tell Claude what build. Get PR ready merge.
Hooks enforce patterns real-time, skills guide workflow, orchestration layer ensure nothing ships without tests, accessibility, type safety, code review -- zero babysit.
Run inside Claude Code session (start with claude in terminal):
/plugin marketplace add redpanda-data/ui-harness
/plugin install frontend-skills@ui-harness
/reload-plugins
Three commands. Skills, hooks, agents activate immediately. Done.
Recommended: rtk (output-compression proxy, ~60-90% token savings on git/cargo/test/gh):
brew install rtk
rtk trust # approve .rtk/filters.toml per project
Harness fail-open -- skip safe; SessionStart nudge remind if miss.
Update (pull latest):
/plugin install frontend-skills --force
Restart Claude Code session so hooks reload from new cache.
Verify:
bash "$(ls -d ~/.claude/plugins/cache/ui-harness/frontend-skills/*/ | tail -1)scripts/verify-install.sh"
Repo ships a Codex-native plugin manifest (.codex-plugin/plugin.json) and marketplace (.agents/plugins/marketplace.json). Use the Codex marketplace CLI when you want Codex to install and track the marketplace source instead of editing config.toml by hand.
1. Upgrade Codex and enable plugins/hooks
brew upgrade --cask codex
codex features enable plugins
codex features enable codex_hooks
2. Add this marketplace from the CLI
Track latest main:
codex plugin marketplace add redpanda-data/ui-harness --ref main
codex plugin marketplace upgrade ui-harness
codex plugin add frontend-skills@ui-harness
Or pin a release:
codex plugin marketplace add redpanda-data/ui-harness --ref v4.10.2
codex plugin marketplace upgrade ui-harness
codex plugin add frontend-skills@ui-harness
General CLI forms
codex plugin marketplace add owner/repo
codex plugin marketplace add owner/repo --ref main
codex plugin marketplace add https://github.com/example/plugins.git --sparse .agents/plugins
codex plugin marketplace add ./local-marketplace-root
Marketplace sources can be GitHub shorthand (owner/repo or owner/repo@ref), HTTP or HTTPS Git URLs, SSH Git URLs, or local marketplace root directories. Use --ref to pin a Git ref, and repeat --sparse PATH to use a sparse checkout for Git-backed marketplace repos. --sparse is valid only for Git marketplace sources.
Do not use --sparse .agents/plugins for this repo as-is: the marketplace entry points frontend-skills through ./plugins/frontend-skills, a symlink back to the repo root, so Codex needs the root plugin files too.
Refresh or remove configured marketplaces
codex plugin marketplace upgrade
codex plugin marketplace upgrade marketplace-name
codex plugin marketplace remove marketplace-name
For this repo specifically:
codex plugin marketplace upgrade ui-harness
codex plugin marketplace remove ui-harness
After adding or upgrading, restart Codex so the Plugins UI reloads metadata.
Use if want specific skills instead of full plugin.
# Core workflow + all setup skills
bunx skills@latest add redpanda-data/ui-harness/frontend-starter-kit --agent claude-code -y
# Just the development lifecycle (no setup hooks)
bunx skills@latest add redpanda-data/ui-harness/development-lifecycle --agent claude-code -y
# Project management + planning skills
bunx skills@latest add redpanda-data/ui-harness/work-automation-kit --agent claude-code -y
Interactive YAML config and Bloblang authoring for Redpanda Connect
Agent Skills for Redpanda's four products — Streaming (Kafka-compatible engine), SQL (Oxla), Connect (incl. CDC connectors), and Cloud (Serverless, BYOC, Dedicated) — plus the rpk CLI. Grounded in Redpanda source, docs, and APIs.
Personal development best practices skills for React, Effect-TS, and other frameworks. Enforces patterns, anti-patterns, and code quality guidelines.
Advanced React skills for hooks, context, and performance optimization.
A la carte AI skills for LLM-assisted development
Battle-tested skills, agents, and commands for Claude Code — TDD workflows, systematic debugging, code review, and parallel task execution.
Frontend development skill with design and implementation checklists
Essential Claude Code extensions: core agents, hooks, commands, and universal tools