CtrlK
BlogDocsLog inGet started
Tessl Logo

novu-inbox-integration

Integrate Novu's in-app notification inbox into web applications. Supports React, Next.js, and vanilla JavaScript. Includes the Inbox component (bell icon + notification feed), composable components (Bell, Notifications, InboxContent, Preferences), headless hooks, branded theming, custom render props, multi-tenancy via contexts, tabs, localization, and HMAC security. Use when adding an in-app notification center, bell icon, notification feed, real-time notification updates, or building a personalized and branded notification experience.

72

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

82%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, highly actionable integration guide: every feature is demonstrated with executable code, risky areas (XSS via dangerouslySetInnerHTML, client-side context tampering) are explicitly warned about, and detailed material is properly split into real, one-level-deep reference files. The main weaknesses are internal duplication that inflates the body past overview length, the absence of explicit validation checkpoints, and one broken cross-skill reference link.

Suggestions

Deduplicate the body: the severity color tokens appear in both the full 'variables' example and the 'Severity styling' section, and the 'contextHash' HMAC snippet repeats the HMAC Authentication section — keep one inline instance and point to references/security.md or references/multi-tenancy.md for the rest, which would also bring the 617-line body closer to overview length.

Add brief validation checkpoints to the main integration flows, e.g. after the quick start ('confirm the bell renders with an unread count before customizing') and in the HMAC section ('a 401/impersonation error means the hash was generated with the wrong secret or subscriberId').

Fix or remove the link to '../design-workflow/references/severity-and-critical.md' in the Severity styling section — it points outside this skill's bundle and does not resolve; either inline the one-line rule it exists to convey or link to a valid path.

DimensionReasoningScore

Conciseness

The 617-line body is dense with genuinely non-obvious API detail (element-key discovery via 'nv-' classes, exact-match context rules, severity element keys) and never re-teaches concepts Claude already knows, so it clears anchor 3. It falls short of anchor 5 because of internal duplication: severity colors appear both in the full 'variables' block and again in the severity section, the 'contextHash' HMAC snippet repeats the HMAC Authentication section, and several Common Pitfalls (e.g., #2, #7, #10) restate guidance already given inline.

4 / 5

Actionability

Every section ships executable, copy-paste-ready guidance: install commands ('npm install @novu/react'), complete TSX components for App Router/Pages Router, server-side HMAC generation in both TypeScript and Python, exact CSS media queries, and a concrete conditional-rendering example branching on tags/severity/data. This matches anchor 5 ('fully executable; specific examples cover the common cases'), not anchor 4 which allows gaps.

5 / 5

Workflow Clarity

Multi-step flows are clearly sequenced — Multi-Tenancy is an explicitly numbered 1-2-3 flow (trigger with context → pass matching context → secure with 'contextHash'), HMAC follows generate-server-side → pass-to-component, and the Common Pitfalls section serves as error-recovery guidance — but there are no explicit validation checkpoints (e.g., 'confirm the bell renders with an unread count' or how to diagnose an HMAC rejection). This lands on anchor 4 ('clear sequence with most checkpoints present; minor validation gaps') rather than anchor 5, and above anchor 3 since sequences are explicit rather than implicit; no destructive or batch operations apply to trigger the cap.

4 / 5

Progressive Disclosure

The bundle structure is sound: all seven referenced files in ./references/ exist, references are one level deep (reference files link only to external docs or siblings), and each is clearly signaled ('See [Branding & Styling Reference](./references/branding-and-styling.md) for the full variable list...') plus a final References index. It falls short of anchor 5 on two minor gaps: the body inlines substantial detail that duplicates the reference files (the 14-token 'variables' example, the icon key list, the localization key example), and the severity section links to '../design-workflow/references/severity-and-critical.md', which points outside the bundle and does not exist in this skill tree — a navigation dead-end.

4 / 5

Total

17

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is a model example: third-person, highly specific capability enumeration, an explicit 'Use when' clause with concrete natural trigger phrases, and a clearly delineated niche that minimizes conflict risk. No weaknesses were identified against any anchor.

DimensionReasoningScore

Specificity

The description enumerates many concrete, named capabilities — 'Inbox component (bell icon + notification feed), composable components (Bell, Notifications, InboxContent, Preferences), headless hooks, branded theming, custom render props, multi-tenancy via contexts, tabs, localization, and HMAC security' — going well beyond the 1-2 actions of anchor 3 and matching the comprehensive anchor 5. It is also consistently third person ('Integrate', 'Supports', 'Includes'), so no voice penalty applies.

5 / 5

Completeness

It explicitly answers both questions: the 'what' is the capability list ('Integrate Novu's in-app notification inbox into web applications. Supports...') and the 'when' is an explicit 'Use when...' clause with concrete trigger scenarios. This mirrors the anchor 5 example structure exactly; a missing or weak trigger clause would have capped it at 3, but that does not apply here.

5 / 5

Trigger Term Quality

'Use when adding an in-app notification center, bell icon, notification feed, real-time notification updates, or building a personalized and branded notification experience' covers the natural phrases a user would actually say, including synonyms (inbox / notification center, bell icon / notification feed) and framework names (React, Next.js, vanilla JavaScript). It fits the comprehensive anchor 5 rather than anchor 4, which is for descriptions with natural terms still missing.

5 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — Novu's in-app notification inbox across React/Next.js/vanilla JS — with distinct triggers ('in-app notification center', 'bell icon', 'notification feed') that are unlikely to fire for unrelated skills. It matches anchor 5 (clear niche, minimal conflict risk) rather than anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

20

/

20

Passed

Validation

81%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (618 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 1 suspicious

Warning

Total

13

/

16

Passed

Repository
novuhq/novu
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.