add cute fun stickers

Author: serverless-mom

CLAUDE.md

@@ -0,0 +1,42 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a monitoring prompts library website built with Astro. It serves as a curated collection of AI prompts for web monitoring, testing, and observability using Checkly and Playwright. The site displays prompt cards with filtering capabilities and uses a terminal-inspired theme.
+
+## Development Commands
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production (static site)
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Architecture
+
+### Content Management
+- Uses Astro's content collections with markdown files in `src/content/library/`
+- Two main categories: `checkly/` and `playwright/` prompts
+- Content schema defined in `src/content.config.ts` with frontmatter fields:
+  - `title`, `description`, `icon`, `tags`, `author`, `externalLink`, `draft`
+
+### Site Structure
+- **Homepage** (`src/pages/index.astro`): Grid of prompt cards with JavaScript filtering by tags (All/Checkly/Playwright)
+- **Individual prompts** (`src/pages/posts/[...slug].astro`): Dynamic routes for each markdown file with navigation
+- **Layouts**: `BaseLayout.astro` and `PostLayout.astro` provide consistent structure
+- **Static generation**: All content is pre-built for GitHub Pages deployment
+
+### Deployment
+- Configured for GitHub Pages at `https://serverless-mom.github.io/prompt-library/`
+- Static output with base path handling for production vs development
+- Includes sitemap integration
+
+### Content Creation
+When adding new prompts, create markdown files in appropriate subdirectories with required frontmatter. The filtering system automatically picks up tags for categorization.

src/content.config.ts

@@ -9,6 +9,7 @@ const library = defineCollection({
     image: z.string().optional(),
     icon: z.string().optional(),
     externalLink: z.string().optional(),
+    sticker: z.string().optional(),
     tags: z.array(z.string()).default([]),
     draft: z.boolean().default(false),
   }),

src/content/library/checkly/performance-test.md

@@ -2,6 +2,7 @@
 title: Performance Testing
 description: Measure page performance and component load times with Playwright and Checkly.
 icon: ⚡
+sticker: "Why is it slow???"
 tags: ["AI", "Checkly"]
 ---
 This prompt requires that you've given your agent access to the Playwright MCP, [follow the setup steps here](https://serverless-mom.github.io/prompt-library/posts/checkly/setup/).

src/content/library/checkly/setup.md

@@ -2,6 +2,7 @@
 title: Checkly Setup
 description: Step-by-step guide to setting up Checkly monitoring with Playwright MCP.
 icon: ⚙️
+sticker: "Start here!"
 tags: ["AI", "Checkly"]
 ---
 

src/content/library/playwright/single-page.md

@@ -2,6 +2,7 @@
 title: Write a Test for a Single Page
 description: Generate Playwright tests for single page interface verification and validation.
 icon: 📄
+sticker: Your first PWT test
 tags: ["AI", "Playwright"]
 ---
 This prompt requires that you've given your agent access to the Playwright MCP. In general, adding the following to your AI agent's configuration JSON is enough to enable your tool to use the Playwright MCP:

src/pages/index.astro

@@ -2,9 +2,14 @@
 import BaseLayout from '../layouts/BaseLayout.astro'
 import { getCollection } from 'astro:content'
 
-const posts = (await getCollection('library')).filter(
-  (post) => !post.data.draft
-)
+const posts = (await getCollection('library'))
+  .filter((post) => !post.data.draft)
+  .sort((a, b) => {
+    // Put setup card first
+    if (a.data.title === 'Checkly Setup') return -1
+    if (b.data.title === 'Checkly Setup') return 1
+    return 0
+  })
 const base = import.meta.env.BASE_URL.endsWith('/')
   ? import.meta.env.BASE_URL
   : import.meta.env.BASE_URL + '/'
@@ -42,6 +47,9 @@ const base = import.meta.env.BASE_URL.endsWith('/')
 
         return (
           <article class="card" data-tags={post.data.tags?.join(',') || ''}>
+            {post.data.sticker && (
+              <div class="start-here-sticker" style={`transform: rotate(${-12 + (Math.random() * 2 - 1)}deg)`}>{post.data.sticker}</div>
+            )}
             <div class="card-header">
               <div class="card-icon">
                 {post.data.icon ? (
@@ -130,3 +138,24 @@ const base = import.meta.env.BASE_URL.endsWith('/')
     })
   })
 </script>
+
+<style>
+  .start-here-sticker {
+    position: absolute;
+    top: -18px;
+    left: -8px;
+    background: var(--accent);
+    color: var(--background);
+    padding: 4px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: bold;
+    z-index: 10;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--accent);
+  }
+
+  .card {
+    position: relative;
+  }
+</style>