feat: Add presentation page for prompts.chat
This commit is contained in:
Fatih Kadir Akın
@@ -0,0 +1,392 @@
|
|||||||
|
---
|
||||||
|
name: widget-generator
|
||||||
|
description: Generate customizable widget plugins for the prompts.chat feed system
|
||||||
|
---
|
||||||
|
|
||||||
|
# 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)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Positioning Strategy
|
||||||
|
```
|
||||||
|
- positioning: {
|
||||||
|
position: number (0-indexed start position, default: 2)
|
||||||
|
mode: "once" | "repeat" (default: "once")
|
||||||
|
repeatEvery?: number (for repeat mode, e.g., 30)
|
||||||
|
maxCount?: number (max occurrences, default: 1 for once, unlimited for repeat)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Injection Logic
|
||||||
|
```
|
||||||
|
- shouldInject?: (context) => boolean
|
||||||
|
Context contains:
|
||||||
|
- filters.q: search query
|
||||||
|
- filters.category: category name
|
||||||
|
- filters.categorySlug: category slug
|
||||||
|
- filters.tag: tag filter
|
||||||
|
- filters.sort: sort option
|
||||||
|
- itemCount: total items in feed
|
||||||
|
```
|
||||||
|
|
||||||
|
## Step 2: Create Widget File
|
||||||
|
|
||||||
|
### Standard Widget (TypeScript only)
|
||||||
|
|
||||||
|
Create file: `src/lib/plugins/widgets/{widget-id}.ts`
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import type { WidgetPlugin } from "./types";
|
||||||
|
|
||||||
|
export const {widgetId}Widget: WidgetPlugin = {
|
||||||
|
id: "{widget-id}",
|
||||||
|
name: "{Widget Name}",
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
id: "{prompt-id}",
|
||||||
|
slug: "{prompt-slug}",
|
||||||
|
title: "{Title}",
|
||||||
|
description: "{Description}",
|
||||||
|
content: `{Multi-line content here}`,
|
||||||
|
type: "TEXT",
|
||||||
|
// Optional sponsor
|
||||||
|
sponsor: {
|
||||||
|
name: "{Sponsor Name}",
|
||||||
|
logo: "/sponsors/{sponsor}.svg",
|
||||||
|
logoDark: "/sponsors/{sponsor}-dark.svg",
|
||||||
|
url: "{sponsor-url}",
|
||||||
|
},
|
||||||
|
tags: ["{Tag1}", "{Tag2}"],
|
||||||
|
category: "{Category}",
|
||||||
|
actionUrl: "{action-url}",
|
||||||
|
actionLabel: "{Action Label}",
|
||||||
|
positioning: {
|
||||||
|
position: 2,
|
||||||
|
mode: "repeat",
|
||||||
|
repeatEvery: 50,
|
||||||
|
maxCount: 3,
|
||||||
|
},
|
||||||
|
shouldInject: (context) => {
|
||||||
|
const { filters } = context;
|
||||||
|
|
||||||
|
// Always show when no filters active
|
||||||
|
if (!filters?.q && !filters?.category && !filters?.tag) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add custom filter logic here
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Render Widget (TSX with React)
|
||||||
|
|
||||||
|
Create file: `src/lib/plugins/widgets/{widget-id}.tsx`
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import type { WidgetPlugin } from "./types";
|
||||||
|
|
||||||
|
function {WidgetName}Widget() {
|
||||||
|
return (
|
||||||
|
<div className="group border rounded-[var(--radius)] overflow-hidden hover:border-foreground/20 transition-colors bg-gradient-to-br from-primary/5 via-background to-primary/10 p-5">
|
||||||
|
{/* Custom widget content */}
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
{/* Image/visual element */}
|
||||||
|
<div className="relative w-full aspect-video">
|
||||||
|
<Image
|
||||||
|
src="/path/to/image.jpg"
|
||||||
|
alt="{Alt text}"
|
||||||
|
fill
|
||||||
|
className="object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<h3 className="font-semibold text-base mb-1.5">{Title}</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mb-4">{Description}</p>
|
||||||
|
<Button asChild size="sm" className="w-full">
|
||||||
|
<Link href="{action-url}">{Action Label}</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const {widgetId}Widget: WidgetPlugin = {
|
||||||
|
id: "{widget-id}",
|
||||||
|
name: "{Widget Name}",
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
id: "{prompt-id}",
|
||||||
|
slug: "{prompt-slug}",
|
||||||
|
title: "{Title}",
|
||||||
|
description: "{Description}",
|
||||||
|
content: "",
|
||||||
|
type: "TEXT",
|
||||||
|
tags: ["{Tag1}", "{Tag2}"],
|
||||||
|
category: "{Category}",
|
||||||
|
actionUrl: "{action-url}",
|
||||||
|
actionLabel: "{Action Label}",
|
||||||
|
positioning: {
|
||||||
|
position: 10,
|
||||||
|
mode: "repeat",
|
||||||
|
repeatEvery: 60,
|
||||||
|
maxCount: 4,
|
||||||
|
},
|
||||||
|
shouldInject: () => true,
|
||||||
|
render: () => <{WidgetName}Widget />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Step 3: Register Widget
|
||||||
|
|
||||||
|
Edit `src/lib/plugins/widgets/index.ts`:
|
||||||
|
|
||||||
|
1. Add import at top:
|
||||||
|
```typescript
|
||||||
|
import { {widgetId}Widget } from "./{widget-id}";
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Add to `widgetPlugins` array:
|
||||||
|
```typescript
|
||||||
|
const widgetPlugins: WidgetPlugin[] = [
|
||||||
|
coderabbitWidget,
|
||||||
|
bookWidget,
|
||||||
|
{widgetId}Widget, // Add new widget
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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
|
||||||
|
```typescript
|
||||||
|
positioning: {
|
||||||
|
position: 5,
|
||||||
|
mode: "once",
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Repeat every 30 items, max 5 times
|
||||||
|
```typescript
|
||||||
|
positioning: {
|
||||||
|
position: 3,
|
||||||
|
mode: "repeat",
|
||||||
|
repeatEvery: 30,
|
||||||
|
maxCount: 5,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Unlimited repeating
|
||||||
|
```typescript
|
||||||
|
positioning: {
|
||||||
|
position: 2,
|
||||||
|
mode: "repeat",
|
||||||
|
repeatEvery: 25,
|
||||||
|
// No maxCount = unlimited
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## shouldInject Examples
|
||||||
|
|
||||||
|
### Always show
|
||||||
|
```typescript
|
||||||
|
shouldInject: () => true,
|
||||||
|
```
|
||||||
|
|
||||||
|
### Only when no filters active
|
||||||
|
```typescript
|
||||||
|
shouldInject: (context) => {
|
||||||
|
const { filters } = context;
|
||||||
|
return !filters?.q && !filters?.category && !filters?.tag;
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show for specific categories
|
||||||
|
```typescript
|
||||||
|
shouldInject: (context) => {
|
||||||
|
const slug = context.filters?.categorySlug?.toLowerCase();
|
||||||
|
return slug?.includes("development") || slug?.includes("coding");
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show when search matches keywords
|
||||||
|
```typescript
|
||||||
|
shouldInject: (context) => {
|
||||||
|
const query = context.filters?.q?.toLowerCase() || "";
|
||||||
|
return ["ai", "automation", "workflow"].some(kw => query.includes(kw));
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show only when enough items
|
||||||
|
```typescript
|
||||||
|
shouldInject: (context) => {
|
||||||
|
return (context.itemCount ?? 0) >= 10;
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom Render Patterns
|
||||||
|
|
||||||
|
### Card with gradient background
|
||||||
|
```tsx
|
||||||
|
<div className="border rounded-[var(--radius)] overflow-hidden bg-gradient-to-br from-primary/5 via-background to-primary/10 p-5">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sponsor badge
|
||||||
|
```tsx
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="text-xs font-medium text-primary">Sponsored</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Responsive image
|
||||||
|
```tsx
|
||||||
|
<div className="relative w-full aspect-video">
|
||||||
|
<Image src="/image.jpg" alt="..." fill className="object-cover" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### CTA button
|
||||||
|
```tsx
|
||||||
|
<Button asChild size="sm" className="w-full">
|
||||||
|
<Link href="https://example.com">
|
||||||
|
Learn More
|
||||||
|
<ArrowRight className="ml-2 h-3.5 w-3.5" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Verification
|
||||||
|
|
||||||
|
1. Run type check:
|
||||||
|
```bash
|
||||||
|
npx tsc --noEmit
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Start dev server:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Navigate to `/discover` or `/feed` to verify widget appears at configured positions
|
||||||
|
|
||||||
|
## Type Reference
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface WidgetPrompt {
|
||||||
|
id: string;
|
||||||
|
slug: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
content: string;
|
||||||
|
type: "TEXT" | "STRUCTURED";
|
||||||
|
structuredFormat?: "json" | "yaml";
|
||||||
|
sponsor?: {
|
||||||
|
name: string;
|
||||||
|
logo: string;
|
||||||
|
logoDark?: string;
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
tags?: string[];
|
||||||
|
category?: string;
|
||||||
|
actionUrl?: string;
|
||||||
|
actionLabel?: string;
|
||||||
|
positioning?: {
|
||||||
|
position?: number; // Default: 2
|
||||||
|
mode?: "once" | "repeat"; // Default: "once"
|
||||||
|
repeatEvery?: number; // For repeat mode
|
||||||
|
maxCount?: number; // Max occurrences
|
||||||
|
};
|
||||||
|
shouldInject?: (context: WidgetContext) => boolean;
|
||||||
|
render?: () => ReactNode; // For custom rendering
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WidgetPlugin {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
prompts: WidgetPrompt[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Issues
|
||||||
|
|
||||||
|
| Issue | Solution |
|
||||||
|
|-------|----------|
|
||||||
|
| Widget not showing | Check `shouldInject` logic, verify registration in `index.ts` |
|
||||||
|
| TypeScript errors | Ensure imports from `./types`, check sponsor object shape |
|
||||||
|
| Styling issues | Use Tailwind classes, match existing widget patterns |
|
||||||
|
| Position wrong | Remember positions are 0-indexed, check `repeatEvery` value |
|
||||||
@@ -0,0 +1,235 @@
|
|||||||
|
import { SlideDeck, SlideTitle, SlideContent, SlideHighlight } from "@/components/presentation/SlideDeck";
|
||||||
|
import { MoveRight, Star, GitMerge, FileCode2, Sparkles, MessageSquare, Globe, Users, Code, Zap, Lightbulb } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Why prompts.chat? | Presentation",
|
||||||
|
description: "Discover why prompts are more important than ever in the agentic era.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PresentationPage() {
|
||||||
|
return (
|
||||||
|
<SlideDeck>
|
||||||
|
{/* 1. Title Slide */}
|
||||||
|
<div className="flex flex-col items-center justify-center text-center h-full">
|
||||||
|
<div className="w-24 h-24 bg-primary/10 rounded-3xl flex items-center justify-center mb-8 rotate-12 transition-transform hover:rotate-0 duration-500">
|
||||||
|
<Sparkles className="w-12 h-12 text-primary" />
|
||||||
|
</div>
|
||||||
|
<SlideTitle className="mb-6">Why prompts.chat?</SlideTitle>
|
||||||
|
<SlideContent className="max-w-3xl mb-12">Discover why prompts are more important than ever in the agentic era.</SlideContent>
|
||||||
|
<p className="text-sm text-muted-foreground animate-pulse mt-8">
|
||||||
|
Use arrow keys <MoveRight className="inline w-4 h-4 mx-1" /> or swipe to navigate
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2. The Genesis */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Star className="w-12 h-12 text-yellow-500 mb-6" />
|
||||||
|
<SlideTitle>The History of prompts.chat</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
From a simple repository to a full-fledged platform. We started as Awesome ChatGPT Prompts, and evolved to support the entire AI community with typed prompts, workflows, and skills.
|
||||||
|
</SlideContent>
|
||||||
|
<div className="mt-12 p-6 bg-muted/50 rounded-2xl border border-border max-w-2xl">
|
||||||
|
<p className="text-lg text-foreground font-mono">
|
||||||
|
Awesome ChatGPT Prompts → <SlideHighlight>prompts.chat</SlideHighlight>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3. The Paradigm Shift */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Zap className="w-12 h-12 text-blue-500 mb-6" />
|
||||||
|
<SlideTitle>The Agentic Era</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Why are prompts still important? Because agents need instructions. As AI becomes more autonomous, the quality of instructions determines the quality of the outcome.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 4. The Core Question */}
|
||||||
|
<div className="flex flex-col items-center justify-center text-center h-full">
|
||||||
|
<Lightbulb className="w-16 h-16 text-yellow-400 mb-8" />
|
||||||
|
<SlideTitle className="text-5xl md:text-6xl">Wait, isn't AI getting smarter?</SlideTitle>
|
||||||
|
<SlideContent className="max-w-4xl mt-8">
|
||||||
|
Yes, but <SlideHighlight>smart AI still needs direction.</SlideHighlight>
|
||||||
|
<br /><br />
|
||||||
|
A genius without instructions is just a very capable idle machine.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 5. The Agentic Need */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<SlideTitle>The Agentic Need</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Agents require precise instructions, constraints, and goal definitions.
|
||||||
|
<ul className="mt-8 space-y-6 list-disc list-inside ml-4 text-foreground/80 text-2xl md:text-3xl">
|
||||||
|
<li>What tools can they use?</li>
|
||||||
|
<li>What are their boundaries?</li>
|
||||||
|
<li>How should they format the output?</li>
|
||||||
|
<li>What tone should they adopt?</li>
|
||||||
|
</ul>
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 6. The SLM Revolution */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Globe className="w-12 h-12 text-green-500 mb-6" />
|
||||||
|
<SlideTitle>Crucial for SLMs</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Small Language Models (SLMs) are the future of edge computing. They require precise, well-crafted prompts to perform tasks accurately without the massive parameter count of frontier models.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 7. SLM Constraints */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<SlideTitle>SLM Constraints</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Smaller models lack the vast "common sense" of 1T+ parameter models.
|
||||||
|
<br /><br />
|
||||||
|
They require <SlideHighlight>highly optimized, battle-tested prompts</SlideHighlight> to punch above their weight class and run efficiently on local devices.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 8. The New Primitive */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<FileCode2 className="w-12 h-12 text-purple-500 mb-6" />
|
||||||
|
<SlideTitle>Prompts are New Code Snippets</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Just as developers copy/paste code snippets from StackOverflow, AI practitioners now share prompt templates. Prompts are the new primitive of programming.
|
||||||
|
</SlideContent>
|
||||||
|
<div className="mt-12 flex items-center gap-4 text-xl md:text-2xl font-mono text-muted-foreground bg-muted p-6 rounded-xl border max-w-fit">
|
||||||
|
<span>const codeSnippet = "..."</span>
|
||||||
|
<MoveRight className="w-6 h-6 text-primary mx-2" />
|
||||||
|
<span className="text-primary">const promptTemplate = "..."</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 9. Open Source AI */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Users className="w-12 h-12 text-indigo-500 mb-6" />
|
||||||
|
<SlideTitle>Community Sharing</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Nobody learns in isolation. By sharing prompts, we accelerate the collective understanding of how to communicate with AI. It's the open-source movement for human-AI interaction.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 10. Collective Intelligence */}
|
||||||
|
<div className="flex flex-col items-center justify-center text-center h-full">
|
||||||
|
<SlideTitle className="text-5xl md:text-6xl">Collective Intelligence</SlideTitle>
|
||||||
|
<SlideContent className="max-w-4xl mt-8">
|
||||||
|
We are building the <SlideHighlight>largest open repository</SlideHighlight> of human-AI interaction patterns.
|
||||||
|
<br /><br />
|
||||||
|
Tested, versioned, and peer-reviewed.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 11. Feature - Typed Prompts */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Code className="w-12 h-12 text-red-500 mb-6" />
|
||||||
|
<SlideTitle>Feature: Typed Prompts</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Natural language is ambiguous. <SlideHighlight>Typed Prompts</SlideHighlight> bring structure.
|
||||||
|
<br /><br />
|
||||||
|
Define inputs, outputs, and variables systematically so prompts can be executed predictably via APIs.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 12. Feature - Workflows */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<div className="flex gap-2 mb-6">
|
||||||
|
<div className="w-8 h-8 rounded bg-primary"></div>
|
||||||
|
<MoveRight className="w-8 h-8 text-muted-foreground" />
|
||||||
|
<div className="w-8 h-8 rounded bg-primary/70"></div>
|
||||||
|
<MoveRight className="w-8 h-8 text-muted-foreground" />
|
||||||
|
<div className="w-8 h-8 rounded bg-primary/40"></div>
|
||||||
|
</div>
|
||||||
|
<SlideTitle>Feature: Workflows</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Some tasks are too complex for a single prompt.
|
||||||
|
<br /><br />
|
||||||
|
Chain multiple prompts together to create <SlideHighlight>Workflows</SlideHighlight> — dividing and conquering complex agentic tasks.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 13. Feature - Agent Skills */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<SlideTitle>Feature: Agent Skills</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Equip coding assistants (like Claude, Cursor, Windsurf) with specialized, multi-file capabilities.
|
||||||
|
<br /><br />
|
||||||
|
Give your AI the context and rules it needs to build within your specific tech stack.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 14. Feature - Change Requests */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<GitMerge className="w-12 h-12 text-orange-500 mb-6" />
|
||||||
|
<SlideTitle>Feature: Change Requests</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Prompts evolve. We've introduced <SlideHighlight>Pull Requests for Prompts.</SlideHighlight>
|
||||||
|
<br /><br />
|
||||||
|
Collaborate, suggest improvements, and refine instructions together as a community.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 15. For Developers */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<SlideTitle>For Developers</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
prompts.chat isn't just for end-users. With features like Agent Skills, Typed Prompts, and API integrations, it's a vital tool for developers building the next generation of AI apps.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 16. For Everyone */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<MessageSquare className="w-12 h-12 text-pink-500 mb-6" />
|
||||||
|
<SlideTitle>For Everyone</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Discover, collect, and learn from <SlideHighlight>Promptmasters</SlideHighlight>.
|
||||||
|
<br /><br />
|
||||||
|
A beautifully designed, accessible platform to find exactly what you need to make AI work for you.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 17. Self-Hosted */}
|
||||||
|
<div className="flex flex-col justify-center h-full">
|
||||||
|
<Globe className="w-12 h-12 text-teal-500 mb-6" />
|
||||||
|
<SlideTitle>Fully Self-Hosted</SlideTitle>
|
||||||
|
<SlideContent>
|
||||||
|
Your data, your platform.
|
||||||
|
<br /><br />
|
||||||
|
prompts.chat is <SlideHighlight>100% open-source</SlideHighlight> and deployable to any server or cloud provider. Own your organization's prompt library securely.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 18. The Vision */}
|
||||||
|
<div className="flex flex-col items-center justify-center text-center h-full">
|
||||||
|
<SlideTitle className="text-5xl md:text-6xl">The Vision</SlideTitle>
|
||||||
|
<SlideContent className="max-w-4xl mt-8">
|
||||||
|
To create the <SlideHighlight>standard protocol</SlideHighlight> for human-AI interaction.
|
||||||
|
<br /><br />
|
||||||
|
Where every great instruction is shared, improved, and accessible to all.
|
||||||
|
</SlideContent>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 19. Call to Action */}
|
||||||
|
<div className="flex flex-col items-center justify-center text-center h-full">
|
||||||
|
<div className="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center mb-8">
|
||||||
|
<Users className="w-12 h-12 text-primary" />
|
||||||
|
</div>
|
||||||
|
<SlideTitle>Join the Community</SlideTitle>
|
||||||
|
<SlideContent className="max-w-2xl mb-12">
|
||||||
|
Start exploring, sharing, and building the future of AI interaction today.
|
||||||
|
</SlideContent>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Link href="/discover">
|
||||||
|
<Button size="lg" className="text-lg px-8 py-6 rounded-xl">Explore Prompts</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://github.com/fka/awesome-chatgpt-prompts" target="_blank">
|
||||||
|
<Button size="lg" variant="outline" className="text-lg px-8 py-6 rounded-xl">Star on GitHub</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SlideDeck>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback, ReactNode } from "react";
|
||||||
|
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface SlideDeckProps {
|
||||||
|
children: ReactNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SlideDeck({ children }: SlideDeckProps) {
|
||||||
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
const totalSlides = children.length;
|
||||||
|
|
||||||
|
const nextSlide = useCallback(() => {
|
||||||
|
setCurrentSlide((prev) => Math.min(prev + 1, totalSlides - 1));
|
||||||
|
}, [totalSlides]);
|
||||||
|
|
||||||
|
const prevSlide = useCallback(() => {
|
||||||
|
setCurrentSlide((prev) => Math.max(prev - 1, 0));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "ArrowRight" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
nextSlide();
|
||||||
|
} else if (e.key === "ArrowLeft") {
|
||||||
|
e.preventDefault();
|
||||||
|
prevSlide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
|
}, [nextSlide, prevSlide]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative h-screen w-screen overflow-hidden bg-background text-foreground flex flex-col">
|
||||||
|
{/* Top Navigation */}
|
||||||
|
<div className="absolute top-4 right-4 z-50 flex items-center gap-4">
|
||||||
|
<div className="text-sm font-medium text-muted-foreground bg-background/50 backdrop-blur-sm px-3 py-1 rounded-full">
|
||||||
|
{currentSlide + 1} / {totalSlides}
|
||||||
|
</div>
|
||||||
|
<Link href="/">
|
||||||
|
<Button variant="ghost" size="icon" className="rounded-full bg-background/50 backdrop-blur-sm hover:bg-background/80">
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Slides Container */}
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
{children.map((child, index) => {
|
||||||
|
// Calculate the relative position (-1 is left, 0 is active, 1 is right)
|
||||||
|
const offset = index - currentSlide;
|
||||||
|
|
||||||
|
let translateX = "translate-x-full";
|
||||||
|
if (offset === 0) translateX = "translate-x-0";
|
||||||
|
else if (offset < 0) translateX = "-translate-x-full";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-0 transition-all duration-500 ease-in-out flex items-center justify-center p-8 md:p-16 lg:p-24",
|
||||||
|
translateX,
|
||||||
|
offset === 0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="w-full max-w-5xl mx-auto">
|
||||||
|
{child}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Navigation */}
|
||||||
|
<div className="absolute bottom-8 left-0 right-0 z-50 flex justify-center items-center gap-8">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={prevSlide}
|
||||||
|
disabled={currentSlide === 0}
|
||||||
|
className="rounded-full w-12 h-12 bg-background/50 backdrop-blur-sm hover:bg-background/80"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-6 h-6" />
|
||||||
|
<span className="sr-only">Previous</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Progress Dots */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{Array.from({ length: totalSlides }).map((_, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => setCurrentSlide(i)}
|
||||||
|
className={cn(
|
||||||
|
"w-2.5 h-2.5 rounded-full transition-all duration-300",
|
||||||
|
i === currentSlide
|
||||||
|
? "bg-primary w-8"
|
||||||
|
: "bg-muted-foreground/30 hover:bg-muted-foreground/50"
|
||||||
|
)}
|
||||||
|
aria-label={`Go to slide ${i + 1}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={nextSlide}
|
||||||
|
disabled={currentSlide === totalSlides - 1}
|
||||||
|
className="rounded-full w-12 h-12 bg-background/50 backdrop-blur-sm hover:bg-background/80"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-6 h-6" />
|
||||||
|
<span className="sr-only">Next</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-1.5 bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-full bg-primary transition-all duration-500 ease-out"
|
||||||
|
style={{ width: `${((currentSlide + 1) / totalSlides) * 100}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper components for slide content
|
||||||
|
export function SlideTitle({ children, className }: { children: ReactNode; className?: string }) {
|
||||||
|
return (
|
||||||
|
<h1 className={cn("text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-8 md:mb-12 text-balance leading-tight bg-clip-text text-transparent bg-gradient-to-br from-foreground to-foreground/70", className)}>
|
||||||
|
{children}
|
||||||
|
</h1>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SlideContent({ children, className }: { children: ReactNode; className?: string }) {
|
||||||
|
return (
|
||||||
|
<div className={cn("text-xl md:text-3xl lg:text-4xl leading-relaxed text-muted-foreground font-medium", className)}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SlideHighlight({ children, className }: { children: ReactNode; className?: string }) {
|
||||||
|
return (
|
||||||
|
<span className={cn("text-primary font-semibold", className)}>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user