Agent skill · software engineering · f
widget-generator
Generate customizable widget plugins for the prompts.chat feed system
Why this skill is useful
Provides specific patterns and configurations for creating customizable widget plugins in the prompts.chat system that the AI wouldn't reliably generate on its own.
What it needs
Requires prompts.chat account access. About 4k tokens when loaded. Last updated 2026-08-06. 166,822 stars on the source repository.
What this skill does
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: 1. Standard prompt widget - Uses default PromptCard styling (like coderabbit.ts) 2. 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 Content (for standard mode) Categorization Action Button Sponsor (optional) Positioning Strategy Injection Logic Step 2: Create Widget File Standard Widget (TypeScript only) Create file: src/lib/plugins/widgets/{widget-id}.ts Custom Render Widget (TSX with React) Create file: src/lib/plugins/widgets/{widget-id}.tsx Step 3: Register Widget Edit src/lib/plugins/widgets/index.ts: 1. Add import at top: 2. Add to widgetPlugins array: Step 4: Add Sponsor Assets (if applicable) If the widget has a sponsor: 1. Add light logo: public/sponsors/{sponsor}.svg 2. Add dark logo (optional): public/sponsors/{sponsor}-dark.svg Positioning Examples Show once at position 5 Repeat every 30 items, max 5 times Unlimited repeating shouldInject Examples Always show Only when no filters active Show for specific categories Show when search matches keywords Show only when enough items Custom Render Patterns Card with gradient background Sponsor badge Responsive image CTA button Verification 1. Run type check: 2. Start dev server: 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills f/widget-generator