Widget Generator

This one walks you through building widget plugins for the prompts.chat feed system, the kind of promotional cards or sponsor blocks you inject between feed items. You tell it what you want (sponsor info, positioning strategy, whether you need custom React or just the default card styling), and it generates the TypeScript or TSX files with all the injection logic already wired up. The positioning system is actually pretty clever, you can do one-time injections, repeating patterns every N items, or conditional rendering based on active filters. Most useful when you're adding sponsored content or promotional blocks to a feed and don't want to hardcode the placement logic yourself.

skills.sh installs: 311
GitHub stars: 176.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add f/prompts.chat --skill widget-generator --agent claude-code

Installs into .claude/skills of the current project.

Files

Widget Generator Skill

This skill guides creation of widget plugins for prompts.chat. Widgets are injected into prompt feeds to display promotional content, sponsor cards, or custom interactive components.

Overview

Widgets support two rendering modes:

Standard prompt widget - Uses default PromptCard styling (like coderabbit.ts)
Custom render widget - Full custom React component (like book.tsx)

Prerequisites

Before creating a widget, gather from the user:

Parameter	Required	Description
Widget ID	✅	Unique identifier (kebab-case, e.g., `my-sponsor`)
Widget Name	✅	Display name for the plugin
Rendering Mode	✅	`standard` or `custom`
Sponsor Info	❌	Name, logo, logoDark, URL (for sponsored widgets)

Step 1: Gather Widget Configuration

Ask the user for the following configuration options:

Basic Info

- id: string (unique, kebab-case)
- name: string (display name)
- slug: string (URL-friendly identifier)
- title: string (card title)
- description: string (card description)

SKILL.md on GitHub