Privacy UI Pattern Library Assistant

An expert assistant for the Privacy-UI Pattern Library - a Next.js web application providing comprehensive privacy-focused UI patterns for GDPR/CCPA compliance with real-world examples and academic foundations.

What This Skill Does

This skill helps you work effectively with the Privacy-UI Pattern Library codebase. It understands the architecture, database schema, import pipelines, screenshot system, and development workflow for this Next.js 15 application that showcases privacy design patterns.

Project Context

**Current Status**: Stage 1 MVP Complete (2025-01-12)

**Repository Structure**:

Instructions

1. Understanding the Architecture

When asked about the codebase structure:

2. Development Workflow Commands

When helping with setup or development tasks:

```bash

Initial Setup

npm install

cp .env.local.example .env.local # Add Supabase credentials

Run migrations in Supabase SQL editor (supabase/migrations/)

Data Import

npm run import:patterns # Import from scraper data

npm run seed:test # Use test data

npm run copy:screenshots # Copy images from scraper

npm run fix:screenshot-urls # Fix URL encoding issues

Development

npm run dev # Start dev server (Turbopack)

npm run build # Production build

npm run type-check # TypeScript validation

npm run lint # ESLint

```

3. Database Schema Understanding

The schema has four core tables with relationships:

Key constraints:

4. Working with Features

**Direct Pattern Navigation** (implemented 2025-01-10):

**Screenshot System** (implemented 2025-01-12):

**Search Functionality**:

5. Troubleshooting Common Issues

When debugging problems:

**Database Connection Errors**:

**No Data Showing**:

**Screenshots Not Loading**:

**TypeScript Errors**:

6. Performance Optimizations

Explain these built-in optimizations when relevant:

7. Future Stages Context

When discussing roadmap or future features:

**Stage 2 - Community Features**:

**Stage 3 - Design Resources**:

8. Key Files Reference

When navigating the codebase, prioritize these files:

**Frontend**:

**API Routes**:

**Data Layer**:

**Import Scripts**:

9. Code Patterns to Follow

When writing or modifying code:

10. Testing and Quality Checks

Before considering work complete:

Constraints

Examples

**Example 1: Adding a new pattern**

User: "How do I add a new pattern to the cookie consent category?"

Response: First, ensure you have the scraper data or test data ready. Then:

1. Add pattern data to `privacy_ui_scraper/privacy_ui_screenshots/cookie-consent/`

2. Run `npm run import:patterns` to import the data

3. If adding screenshots, place them in the pattern folder and run `npm run copy:screenshots`

4. Run `npm run fix:screenshot-urls` to ensure URL matching works

5. Verify in browser at `/patterns/cookie-consent/{your-pattern-slug}`

**Example 2: Debugging search not working**

User: "Search isn't returning any results"

Response: Let's troubleshoot:

1. Check browser console for API errors

2. Verify `/api/search` endpoint is accessible

3. Run `npm run type-check` to ensure no TypeScript errors

4. Check that patterns have been imported with `SELECT COUNT(*) FROM patterns` in Supabase

5. Verify React Query isn't showing errors in the Network tab

6. Ensure the 300ms debounce isn't too aggressive for your use case

**Example 3: Understanding the architecture**

User: "How does the direct navigation feature work?"

Response: Direct navigation was implemented in 2025-01-10 to reduce clicks: