Quick access to all pages
Quick access to all pages
A comprehensive, production-ready skill for building video libraries with filtering, search, ratings, comments, and analytics. Perfect for educational platforms, content hubs, and knowledge bases.
Filter videos by category, search by title and description, and discover content easily.
Allow users to rate videos 1-5 stars and see aggregate ratings from the community.
Enable user discussions with comment threads, moderation, and community engagement.
Track watched videos, continue watching progress, and enable personalized recommendations.
Monitor video performance, user engagement, completion rates, and watch duration metrics.
Support YouTube, Vimeo, and self-hosted videos with seamless playback and thumbnails.
TypeScript
// Videos table with multi-source support
export const videos = mysqlTable("videos", {
id: varchar("id", { length: 255 }).primaryKey(),
title: varchar("title", { length: 255 }).notNull(),
category: varchar("category", { length: 100 }).notNull(),
source: enum("source", ["youtube", "vimeo", "self-hosted"]),
videoId: varchar("video_id", { length: 255 }).notNull(),
viewCount: int("view_count").default(0),
createdAt: timestamp("created_at").defaultNow(),
});TypeScript
// List videos with filtering
export const videoRouter = router({
list: publicProcedure
.input(z.object({
category: z.string().optional(),
search: z.string().optional(),
limit: z.number().default(50),
}))
.query(async ({ input }) => {
return await db.query.videos.findMany({
where: (videos, { and, like, eq }) =>
and(
input.category ? eq(videos.category, input.category) : undefined,
input.search ? like(videos.title, `%${input.search}%`) : undefined
),
});
}),
});TypeScript
// Filter videos with search
const filteredVideos = useMemo(() => {
return videos.filter((video) => {
const matchesCategory = selectedCategory === "All" ||
video.category === selectedCategory;
const matchesSearch = video.title
.toLowerCase()
.includes(searchQuery.toLowerCase());
return matchesCategory && matchesSearch;
});
}, [videos, selectedCategory, searchQuery]);SKILL.md
Complete workflow documentation
Database Schema
Drizzle ORM schema for 5 tables
API Procedures
15+ tRPC procedures
React Component
Production-ready UI
Seed Script
Populate initial videos
React 19
Modern UI framework
tRPC 11
Type-safe API layer
Drizzle ORM
Database layer
Tailwind CSS 4
Styling framework
MySQL/TiDB
Database support
Build comprehensive course libraries with video lessons, student ratings, and progress tracking.
Create engaging video content libraries with community engagement and analytics.
Organize tutorial videos and how-to guides with powerful search and filtering.
Deliver employee training videos with completion tracking and engagement metrics.
Get started with the Video Library Builder skill and create a production-ready video platform in minutes.
We use cookies to enhance your experience, analyze site traffic, and enable marketing features. By clicking "Accept All", you consent to our use of cookies. You can customize your preferences below.