# Feed Widget Generator

Generate customizable widget plugins for the prompts.chat feed.

- Repository: https://github.com/f/prompts.chat (175520 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add f/prompts.chat --skill widget-generator -g -a claude-code -y`
Codex: `npx skills add f/prompts.chat --skill widget-generator -g -a codex -y`
Cursor: `npx skills add f/prompts.chat --skill widget-generator -g -a cursor -y`
Gemini CLI: `npx skills add f/prompts.chat --skill widget-generator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add f/prompts.chat`

## Description

Generate customizable widget plugins for the prompts.chat feed system

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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
```
- id: string (unique, kebab-case)
- name: string (display name)
- slug: string (URL-friendly identifier)
- title: string (card title)
- description: string (card description)
```

### Content (for standard mode)
```
- content: string (prompt content, can be multi-line markdown)
- type: "TEXT" | "STRUCTURED"
- structuredFormat?: "json" | "yaml" (if type is STRUCTURED)
```

### Categorization
```
- tags?: string[] (e.g., ["AI", "Development"])
- category?: string (e.g., "Development", "Writing")
```

### Action Button
```
- actionUrl?: string (CTA link)
- actionLabel?: string (CTA button text)
```

### Sponsor (optional)
```
- sponsor?: {
    name: string
    logo: string (path to light mode logo)
    logoDark?: string (path to dark mode logo)
    url: string (sponsor website)
  }
```

The rest: https://github.com/f/prompts.chat/blob/HEAD/.windsurf/skills/widget-generator/SKILL.md