From featuredrop
Configures FeatureDrop toolkit to add changelogs, new feature badges, onboarding tours, checklists, hotspots, feedback widgets, and surveys to React apps with Tailwind or shadcn-ui.
How this skill is triggered — by the user, by Claude, or both
Slash command
/featuredrop:featuredrop-setupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Open-source, zero-dependency library for in-app feature discovery. < 3 kB core.
Open-source, zero-dependency library for in-app feature discovery. < 3 kB core.
npm install featuredrop[{ id, label, description, releasedAt, showNewUntil? }]<FeatureDropProvider manifest={features} storage={new LocalStorageAdapter()}>// Core (no React, no UI)
import { isNew, getNewFeatures, createManifest, LocalStorageAdapter } from 'featuredrop'
// React components (ready-made UI)
import { NewBadge, ChangelogWidget, Tour, Checklist, Banner, Toast } from 'featuredrop/react'
// Headless hooks (data + actions, no JSX — for custom design systems / shadcn)
import { useChangelog, useNewFeature, useNewCount, useTour, useChecklist } from 'featuredrop/react/hooks'
// Storage adapters
import { PostgresAdapter, RedisAdapter, IndexedDBAdapter, HybridAdapter } from 'featuredrop/adapters'
// Validation
import { validateManifest } from 'featuredrop/schema'
// Testing helpers
import { createMockManifest, createMockStorage, TestProvider } from 'featuredrop/testing'
// Tailwind plugin
import { featureDropPlugin } from 'featuredrop/tailwind'
| Hook | Returns |
|---|---|
useNewFeature(id) | { isNew, feature, dismiss } |
useNewCount() | number — unread badge count |
useChangelog() | { features, newFeatures, newCount, dismiss, dismissAll, markAllSeen, getByCategory } |
useTour(id) | { currentStep, stepIndex, totalSteps, isActive, start, next, prev, skip, complete, goTo } |
useChecklist(id) | { tasks, completedCount, totalCount, progress, isComplete, completeTask, resetTask } |
useSurvey(id) | { isVisible, questions, submit, askLater, dismiss } |
useFeatureDrop() | Full provider context (features, count, dismiss, throttle controls, engine) |
useTabNotification() | Browser tab title: "(3) My App" |
NewBadge, ChangelogWidget, ChangelogPage, Tour, Checklist, Spotlight, SpotlightChain, Hotspot, TooltipGroup, Banner, Toast, AnnouncementModal, Survey, FeedbackWidget, FeatureRequestButton, FeatureRequestForm
{
id: string // unique identifier
label: string // display title
description: string // what changed
releasedAt: string // ISO date
showNewUntil?: string // ISO date — auto-expire badge
category?: string // group: "ui", "api", "billing"
type?: string // "feature" | "improvement" | "fix" | "deprecation"
priority?: string // "low" | "medium" | "high" | "critical"
cta?: { label: string; url: string }
audience?: Record<string, string[]> // user segmentation
}
Default: LocalStorageAdapter (browser). Server: PostgresAdapter, RedisAdapter.
Offline: IndexedDBAdapter. Hybrid: HybridAdapter (local + remote sync).
Custom: implement { getWatermark, setWatermark, getDismissedIds, addDismissedId }.
<FeatureDropProvider
manifest={features} // required
storage={adapter} // required
analytics={{ onFeatureSeen, onFeatureDismissed, onFeatureClicked }}
userContext={{ plan, role, region }} // for audience targeting
appVersion="2.1.0" // semver gating
throttle={{ maxToastsPerSession: 3, modalCooldownMs: 120_000 }}
locale="en" // i18n (en/es/fr/de/pt/zh-cn/ja/ko/ar/hi)
animation="normal" // "none" | "subtle" | "normal" | "playful"
engine={engineInstance} // optional: FeatureDropEngine for smart delivery
/>
// tailwind.config.ts
import { featureDropPlugin } from 'featuredrop/tailwind'
export default {
plugins: [featureDropPlugin({ prefix: 'fd' })],
}
// Adds: fd-badge, fd-badge-dot, fd-badge-count, fd-animate-pulse, fd-animate-fade-in
// CSS vars: --fd-new, --fd-changelog-bg, --fd-tour-bg (auto dark mode)
featuredrop/react, not just featuredrop)featuredrop/react/hooks when the project uses shadcn, Radix, or custom design systemshowNewUntil — don't build manual expiry logicany typesnpx claudepluginhub glincker/featuredropAdds PostHog feature flags to gate new functionality. Handles SDK setup and flag instrumentation across multiple platforms.
Orchestrates LaunchDarkly setup in an existing codebase: roadmap, resumable log, MCP config, companion skill installs, SDK install with detect/plan/apply, and first flag creation.
Audits web apps for onboarding gaps like empty states and poor first impressions, generates code for flows, tooltips, tours, and contextual help.