Menu
Skills in this repository
SkillsMP has collected 70 skills from redpanda-data/ui-harness. Open a skill to review its source and details.
redpanda-data/ui-harnessShowing 30 of 70 collected skills.
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.
Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce -> minimise -> hypothesise -> instrument -> fix -> regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or…
Extend frontend-skills hook harness. Add new rules via skill-manifest.json, pick severity tier (block/warn/nudge/info/block-strict/diagnostic), view analytics via /frontend-skills-stats. Use when adding enforcement, tuning rule severity, or debugging hook…
Analytics dashboard for frontend-skills hook harness. Latency percentiles, top-violated rules, zero-fire hooks, session trends. Use when user ask for hook harness stats, invoke `/frontend-skills-stats`, or want latency profiling and manifest drift checks.
Interview the user relentlessly about a plan or design until reaching shared understanding. Phase 2b gate of /development-lifecycle. Spawns 3 parallel reviewer hats (product/engineering/design) to stress-test the plan. Use when user wants to stress-test a…
Analyze hook effectiveness + session retro from collected metrics. Use when user asks to audit hooks, invokes `/hook-audit`, wants to identify silent/over-aggressive/under-enforced hooks, or asks for a retro / team analytics across recent sessions.
Meta-skill that runs the generic frontend-starter-kit plus additional React skills and Redpanda-specific registry workflow. Use when bootstrapping a new Redpanda frontend project or setting up the full Redpanda frontend stack.
Resolve PR review feedback by fetching unresolved threads, triaging, fixing in parallel, and replying. Use when addressing PR review comments, resolving threads, or picking up after human review.
Enforce ARIA accessibility via PostToolUse hooks -- labels, keyboard handlers, widget attributes, Playwright AXE setup. Use when setting up a11y enforcement, WCAG 2.1 AA compliance, or accessibility testing.
Token-efficient AI agent hooks -- env vars, test flag optimization, output truncation, NODE_OPTIONS. Use when optimizing Claude Code for fewer tokens or reducing context waste.
Opt-in Atlassian/Jira integration via acli -- create work items, transition status, comment, link PRs. Mirrors gh-based workflow skills for Jira users. Use when working with Jira, Atlassian, or acli.
Install Biome linter with Ultracite preset, create biome.jsonc config, and configure Claude Code Stop hook for auto-fix before finishing. Use when setting up linting, formatting, Biome, Ultracite, or code quality enforcement.
Configure GitHub Actions CI for React/TypeScript frontend projects. Coverage gates, visual regression, caching, Blacksmith workers, bundle budgets. Use when setting up CI, optimizing pipelines, or adding quality gates to PRs.
Enforce conventional commit format via a PreToolUse hook on Bash that intercepts git commit commands. Replaces commitlint + husky entirely. Use when setting up conventional commits, commit message validation, or enforcing commit format standards.
Set up Playwright + Testcontainers + axe-core for e2e and accessibility testing. Includes patterns for forms, tables, workflows. Use when setting up e2e tests or writing Playwright tests.
Enforce type-safe environment variable access using t3-env with zod validation. Bans raw process.env.X outside dedicated env files. Use when setting up env validation, t3-env, type-safe environment variables, or banning raw process.env access.
Add quality:gate package.json script for fast local/CI quality checks (biome + tsgo + related tests), GitHub Actions workflow, and Stop hook for type checking. Use when setting up quality gates, CI pipelines, or pre-push validation.
Install React Compiler with rsbuild and enforce compiler-friendly patterns via PostToolUse hooks. Flags manual memoization, derived state, useRef cache. Use when setting up React Compiler or post-compiler patterns.
React health scoring via react-doctor with Stop hook to fail on score regression. Use when setting up react-doctor or preventing UI quality regressions.
Enforce React/TS/security rules via PostToolUse hooks -- ban raw HTML, TS escape hatches, XSS vectors, barrel imports, missing passive listeners. Use when enforcing React patterns or component library standards.
Registry hooks + component taxonomy + consumer drift analysis. Use when maintain shadcn component registry, design system, or analyze drift between consumer repos + registry.
Configure Claude Code routines for automated PR review, codebase health, issue triage, and docs drift detection. Use when setting up recurring automation, GitHub-triggered workflows, or API-triggered tasks that run on Anthropic cloud infrastructure.
Enforce bun + tsgo as toolchain via PreToolUse hooks. Blocks npm, npx, tsc, global installs. Use when setting up toolchain enforcement or banning npm.
Enforce UX text style via PostToolUse hooks. Two scripts -- ux-copy-check.sh for `.ts`/`.tsx` UI strings (bans exclamations, "successfully", "click here", Yes/No buttons, Title Case), and prose-style-check.sh for `.md`/`.mdx` prose (bans em dashes, AI-tell…
Enforce zustand best practices via PostToolUse hooks -- double-parens create, useShallow selectors, persist middleware. Use when setting up zustand enforcement or preventing re-render issues.
Argue strongest case against the user's assertion with evidence. Explicit anti-sycophancy guard. Use when user says "steelman", "/steelman", "give me pushback", "second opinion", "am I wrong", or for high-stakes/irreversible calls where wrong premise costs…
Test-driven development with red-green-refactor loop. Use when writing tests, creating new features, or fixing bugs. Includes planning phase, tracer bullets, async leak detection, deep module design, and condition-based waiting.
Alias for /development-lifecycle. Full frontend workflow: understand -> plan -> grill -> implement (TDD) -> /go (verify -> ship). Use when doing any React/TypeScript/UI development task.
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
Go up a layer of abstraction and map the broader context. Use when unfamiliar with a code area, need to understand how something fits into the bigger picture, or want a high-level overview.