redpanda-dataOfficial·70 Agent Skills Included

ui-harness

Enforced React and TypeScript workflows with quality hooks

Guides frontend development from planning through test-driven implementation to pull request shipping. Blocks unsafe patterns in real time: raw HTML elements, untyped code, missing accessibility attributes, dangerous git commands, and heavy dependencies. Automates linting, type checking, visual review, PR feedback resolution, and issue triage so nothing ships without tests and review.

34|4

↗

npx skills add redpanda-data/ui-harness --all -g -y

Available:

Gives the agent strict project rules for toolchain, React patterns, testing, accessibility, and the mandatory six-phase development lifecycle it must follow on every task.

All Skills in This Repository (70)

Pure Emerald Level Indicators

📦 In Repo

redpanda-data

work-automation-kit

Coordinate software lifecycle tasks including bug triage, issue management, and Codex reviews.

setup-zustand

Automate Zustand setup and enforce best practices in React/TypeScript applications.

swarm

Automates parallel task execution by dividing a single goal into multiple lanes.

setup-pre-commit

Automate pre-commit hook setup with Husky, lint-staged, and Prettier.

setup-biome

Automate Biome linter setup with the Ultracite preset.

setup-ci-pipeline

Configure GitHub Actions CI for React/TypeScript applications with coverage gates.

setup-quality-gate

Set up a quality gate with biome, tsgo, and vitest.

setup-env-validation

Validate type-safe environment variables with t3-env and zod.

go

Automate code verification, refinement, simplification, and shipping with CI and PR operations.

setup-e2e-testing

Automate Playwright, Testcontainers, and axe-core setup for e2e and accessibility testing.

setup-toolchain

Block incompatible commands and suggest bun and tsgo alternatives.

resilience-review

Analyze code changes for edge cases, errors, and recovery strategies.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install ui-harness?▼

Run `npx skills add redpanda-data/ui-harness --all -g -y` in your terminal to install the full skill set globally.

What does ui-harness enforce in React projects?▼

It blocks raw HTML elements, type escapes like `as any`, missing ARIA attributes, unsafe git commands, and heavy dependencies through hooks that run on every edit.

Does ui-harness work with Claude Code and Codex?▼

Yes. Hooks and rules run in both Claude Code and Codex, with a compatibility layer that translates hook configurations between them.

How does the development lifecycle workflow work?▼

Every task follows understand, plan, grill, test-driven implementation, then verify, review, and ship. Hooks block skipped steps so nothing merges without tests and review.

Can I use ui-harness without deep frontend expertise?▼

Yes. The agent applies the encoded best practices automatically, so you describe what to build and the guardrails keep the output clean.