Stats
Actions
Tags
From frontend-skills
Enforces ConnectRPC, Connect Query, and Protobuf v2 patterns in React/TypeScript projects. Bans raw useQuery, empty invalidateQueries, and $typeName literals.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-connect-query**/*_connectquery***/*_pb***/gen/**The summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **Ban raw `useQuery`/`useMutation`** from `@tanstack/react-query` when file use ConnectRPC -- use Connect Query (exception: `useTransport`/`callUnaryMethod` pattern)
useQuery/useMutation from @tanstack/react-query when file use ConnectRPC -- use Connect Query (exception: useTransport/callUnaryMethod pattern)invalidateQueries() no args -- must specify query keyaxios/fetch() -- prefer ConnectRPC transportnew Message() -> use create(Schema). Ban PlainMessage/PartialMessage -> use MessageShape/MessageInitShape. Ban manual $typeName literals.Escape hatch: // allow: direct-query [reason]
Protobuf gotchas (Timestamp, Duration, Any, cache patterns): REFERENCE.md. Setup: SETUP.md.
npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsEnforces React/TS/security rules via PostToolUse hooks: bans raw HTML, TS escape hatches, XSS vectors, barrel imports, and more. Use when enforcing React patterns or component library standards.
Validate TypeScript/React code against style and architectural conventions
Sets up ast-grep in TypeScript codebases with rules detecting anti-patterns, enforcing best practices, and preventing bugs. Creates sgconfig.yml, rule files, and tests for structural linting, legacy bans, and ratchet gates.