frontend-skills

Plugin frontend-skills from marketplace ui-harness in redpanda-data/ui-harness. Commands read from the repo's manifest — 19 days ago.

Skills (71)

• brainstorming

  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.

• caveman

  Ultra-compressed reply mode. Use when user asks be brief or /caveman.

• codex-compat

  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.

• commit-push-pr

  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.

• commit-push

  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.

• design-an-interface

  DEPRECATED. Prefer `/prototype` for design exploration and runnable UI variations. Do not use unless user explicitly says `/design-an-interface` or asks for legacy skill.

• deslop

  Question changed code as liability and remove unjustified surface area. Use before commit, push, PR, merge, or when a change feels overbuilt or low-value.

• development-lifecycle

  Use when doing frontend/React/TypeScript/UI work. Auto-guides phase: understand -> plan -> grill -> implement (TDD) -> /go (4->4b review->5->5b->6). One skill, full lifecycle. Alias: /work.

• diagnose

  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 describes a performance regression.

• domain-model

  LEGACY LOCAL. Prefer `/grill-with-docs` for docs-first domain grilling and CONTEXT.md/ADR updates. Use only when user explicitly requests `/domain-model` or local three-hat review.

• edit-article

  Edit article drafts for structure, clarity, flow, and tighter prose.

• extend-harness

  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 that isn't firing.

• frontend-skills-stats

  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.

• frontend-starter-kit

  Complete frontend stack -- 14 setup skills + 14 owned workflow skills + 4 optional community skills in one command. Use when starting new frontend project or bootstrapping frontend best practices from scratch.

• git-guardrails-claude-code

  Install Claude hooks blocking dangerous git commands before execution.

• go

  Ship what built. Run verify -> self-review -> simplify -> commit-push-pr -> monitor CI -> fix -> done. Use when implementation done, ready to launch.

• grill-me

  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 plan, get grilled, or mentions "grill me".

• grill-with-docs

  Grill plan against CONTEXT.md and ADRs, updating docs as decisions settle.

• handoff

  Compact the current session into a handoff document so another agent or fresh session can continue the work. Use when user asks to hand off, transfer context, continue in another session, start a parallel agent, or preserve only the next-useful context instead of using /compact.

• hook-audit

  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.

• improve-codebase-architecture

  Explore codebase for architectural improvement. Focus testability via deepening shallow modules. Use when user want improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make codebase more AI-navigable.

• migrate-to-shoehorn

  Migrate test casts from `as` to @total-typescript/shoehorn.

• obsidian-vault

  Search, create, and organize Obsidian notes with wikilinks and indexes.

• ponytail-review

  Reviews diffs for over-engineering only. Use when reviewing, desloping, or asking what to delete, inline, shrink, or replace with stdlib/native code.

• prototype

  Build throwaway logic or UI prototypes to answer design questions fast.

• qa

  DEPRECATED. Prefer `/triage` for conversational bug/feature intake and issue filing. Do not use unless user explicitly says `/qa` or asks for legacy QA skill.

• redpanda-frontend-kit

  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.

• request-refactor-plan

  DEPRECATED. Prefer `/improve-codebase-architecture` for refactor discovery, then `/to-issues` for tickets. Do not use unless user explicitly says `/request-refactor-plan`.

• resilience-review

  Resilience Review checks resilience. Use when edge cases, errors, fallback, async/data, state, or polish matter.

• resolve-pr-feedback

  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.

• review

  Reviews a diff since a fixed point across Standards, Spec, and risk gates. Use when reviewing a branch, PR, WIP, or "review since X".

• scaffold-exercises

  Create exercise dirs, readmes, variants, and lint-clean course stubs.

• setup-accessibility

  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.

• setup-agent-config

  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.

• setup-atlassian-workflow

  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.

• setup-biome

  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.

• setup-ci-pipeline

  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.

• setup-connect-query

  Enforce ConnectRPC + Connect Query + Protobuf v2 patterns via PostToolUse hooks. Bans raw useQuery, empty invalidateQueries, $typeName literals. Use when setting up ConnectRPC, protobuf type safety, or data fetching enforcement.

• setup-conventional-commits

  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.

• setup-e2e-testing

  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.

• setup-env-validation

  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.

• setup-pre-commit

  Set up Husky, lint-staged, Prettier, typecheck, and test pre-commit.

• setup-quality-gate

  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.

• setup-react-compiler

  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.

• setup-react-doctor

  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.

• setup-react-rules

  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.

• setup-registry-workflow

  Registry hooks + component taxonomy + consumer drift analysis. Use when maintain shadcn component registry, design system, or analyze drift between consumer repos + registry.

• setup-routines

  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.

• setup-sandcastle

  Configure Sandcastle for agent delegation -- headless run(), HITL interactive(), parallel sandboxes, branches. Use when delegating to autonomous agents, parallelizing implementation, or running interactive reviews.

• setup-tanstack-router

  Auto-generate TanStack Router route tree and enforce router patterns via PostToolUse hooks. Bans react-router-dom, window.location, untyped hooks. Use when setting up TanStack Router or file-based routing.

• setup-toolchain

  Enforce bun + tsgo as toolchain via PreToolUse hooks. Blocks npm, npx, tsc, global installs. Use when setting up toolchain enforcement or banning npm.

• setup-ux-copy

  Install UX-string and prose-style hooks. Use when configuring copy checks or Redpanda capitalization; use ux-copy to write or review UI text.

• setup-zustand

  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.

• snyk-ux-security

  Snyk dependency sweeps across frontend, Go, and Bazel paths with npm false-positive triage and release-age gates.

• steelman

  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 most.

• swarm

  parallel executor. Use /swarm.

• tdd

  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.

• thermo-nuclear-code-quality-review

  Runs a release-blocking cold PR audit across quality, frontend, resilience, visual, security, tests, perf, and steelman. Use when very important PR, high-stakes PR, thermo nuclear review, or no-stones-unturned audit requested.

• to-issues

  Break PRD or plan into tracker issues as thin vertical slices.

• to-prd

  Turn current context into a PRD and publish it to issue tracker.

• triage

  Triage issues through a state machine of triage roles. Works with GitHub (`gh`) and Jira (`acli`). Use when user wants to triage issues, review incoming bugs/features, prepare issues for an AFK agent, investigate a bug and file a ticket with a TDD fix plan, or manage issue workflow.

• ubiquitous-language

  DEPRECATED. Prefer `/grill-with-docs` for domain language plus CONTEXT.md/ADR updates. Do not use unless user explicitly says `/ubiquitous-language`.

• ux-copy

  Write or review product UI copy. Use when changing headings, labels, buttons, help, messages, navigation, i18n strings, or product terminology.

• visual-review

  Browser-based frontend review for changed UI. Use before PRs with React/route/CSS changes to inspect screenshots, states, a11y, console errors, and cross-browser/mobile regressions.

• work-automation-kit

  Install planning/project management skills -- PRD creation, implementation planning, issue breakdown, bug triage, code review. Use when setup project planning workflows or creating PRDs.

• work

  Alias for /development-lifecycle. Full frontend workflow: understand -> plan -> grill -> implement (TDD) -> /go (verify -> ship). Use when doing any React/TypeScript/UI development task.

• write-a-skill

  Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.

• writing-beats

  Build article beat by beat from raw material with user-chosen pivots.

• writing-fragments

  Mine user conversation into raw writing fragments in one markdown file.

• writing-shape

  Shape raw markdown material into an article through conversational drafting.

• zoom-out

  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.

Subagents (9)

• adversarial-reviewer

  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.

• code-reviewer

  Reviews code changes for spec compliance and quality. Dispatch for two-stage PR review. Outputs structured JSON findings per findings-schema.md.

• findings-schema
• karpathy-failure-modes
• plan-design-hat

  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.

• plan-engineering-hat

  Engineering-perspective plan review. Architecture, perf, security, test strategy, dependency risk. Gated in /grill-me phase 2b; spawned in parallel with product-hat and design-hat. Outputs structured JSON findings.

• plan-product-hat

  Product-perspective plan review. Asks "why, for whom, success metric, scope, reversibility" before any code is typed. Gated in /grill-me phase 2b; spawned in parallel with engineering-hat and design-hat. Outputs structured JSON findings.

• self-reviewer

  Reviews own session changes for quality gaps, missing tests, and simplification opportunities. Dispatched in phase 4b (Refine) before external review. Outputs structured JSON findings per findings-schema.md.

• verifier

  Verifies that changes work correctly via tests and browser inspection. Dispatch after implementation.

Hooks (30)

• SessionStart

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/session-env.sh"; [ -x "$f" ] && exec "$f"; exit 0

• SessionStart

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/llm-env.sh"; [ -x "$f" ] && exec "$f"; exit 0

• UserPromptSubmit

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/user-prompt-context.sh"; [ -x "$f" ] && exec "$f"; exit 0

• UserPromptSubmit

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/intent-detect.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostCompact

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/post-compact-context.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreCompact

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/pre-compact.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUseFailure

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/post-tool-failure.sh"; [ -x "$f" ] && exec "$f"; exit 0

• FileChanged

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/file-changed-deps.sh"; [ -x "$f" ] && exec "$f"; exit 0

• FileChanged

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/file-changed-schema.sh"; [ -x "$f" ] && exec "$f"; exit 0

• FileChanged

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/file-changed-config.sh"; [ -x "$f" ] && exec "$f"; exit 0

• FileChanged

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/file-changed-env.sh"; [ -x "$f" ] && exec "$f"; exit 0

• FileChanged

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/file-changed-manifest.sh"; [ -x "$f" ] && exec "$f"; exit 0

• WorktreeCreate

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/worktree-create.sh"; [ -x "$f" ] && exec "$f"; exit 0

• SessionEnd

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/session-end.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/violation-nudge.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/enforce-toolchain.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/llm-test-flags.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/conventional-commits-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/branch-safety-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/bash-verbose-guard.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/rtk-rewrite.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PreToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/ux-copy-context.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/vendor-file-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/ui-registry-warn.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/react-rules-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/tailwind-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/accessibility-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/zustand-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/tanstack-router-check.sh"; [ -x "$f" ] && exec "$f"; exit 0

• PostToolUse

  f="${CLAUDE_PLUGIN_ROOT}/.claude/hooks/tanstack-router-gen.sh"; [ -x "$f" ] && exec "$f"; exit 0

Similar plugins