Knock in-app UI skill

This skill helps you build in-app UI with Knock. It covers the two in-app products — feeds and guides — at a high level, then goes deep on guides: provider setup, rendering with hooks, and debugging.

Reference: https://docs.knock.app/in-app-ui/overview

Overview

The skill is organized into four focused rule files. Client-framework guidance is scoped per framework via a -<framework> suffix (currently only React). Cross-framework concepts live in unsuffixed files.

1. Feeds vs. guides (framework-agnostic) — which product to pick for a given surface and why
2. Setting up the guide providers in React — KnockProvider and KnockGuideProvider props, where each value comes from, and how to sequence them
3. Rendering guides in React — building a guide component with useGuide / useGuides, typed content, and engagement tracking
4. Debugging guides (framework-agnostic) — the guides toolbar, the triage checklist, and testing workflow

Framework scope: right now this skill only covers React (@knocklabs/react). If the user is building with Vue, Svelte, plain JS, React Native, iOS, or Android, stop and ask how they'd like to proceed — do not adapt the React rules to another client SDK on your own.

How to use this skill