← Back to Projects

devrules.directory

Curated Rules for AI Coding Assistants

🌐 Visit Live Site
Next.js 16React 19TypeScriptTailwind CSS 4Fuse.jsshadcn/ui

The Challenge

AI coding assistants like Cursor, Claude, and GitHub Copilot are powerful, but they need clear guidelines to produce consistently high-quality code. Developers faced several pain points:

  • • Inconsistent behavior - AI assistants make arbitrary decisions without asking
  • • Dangerous suggestions - Unsafe patterns like eval(), exec(), or production database access
  • • Scope creep - AI changes unrelated files or refactors without permission
  • • Scattered knowledge - Best practices buried in blog posts, docs, and tribal knowledge
  • • No centralized resource - No single place to discover and share effective AI rules
  • • Rule fatigue - Hard to know which rules actually matter vs. noise

The challenge was to create a curated, searchable directory of tech-agnostic rules that dramatically improve AI collaboration quality while being easy to discover, understand, and apply.

The Solution

devrules.directory is a curated collection of battle-tested rules for AI coding assistants. Built with Next.js 16, it provides a searchable, filterable directory of tech-agnostic rules organized by category—from Assistant Behavior to Security, Testing, and Architecture patterns.

Platform Overview

30+
Curated Rules
10+
Categories
Fuzzy Search
Fuse.js Powered
SEO Ready
Sitemap + Metadata

Core Features

📚

Multi-Category Rule System

Rules organized into 10+ categories including Assistant Behavior, Security, Testing, Architecture, Workflow, and more. Each rule includes detailed explanations, code examples, and practical guidance.

  • • Assistant Behavior (highest impact)
  • • Security & Safety rules
  • • Testing & Quality standards
  • • Workflow conventions
  • • Architecture patterns
🔍

Powerful Search & Filtering

Fuzzy search powered by Fuse.js finds rules by name, description, or category. Real-time filtering with multi-select category tags and instant results as you type.

  • • Fuzzy search with Fuse.js
  • • Multi-category filtering
  • • Real-time results
  • • Clear filters button
  • • Pagination for large result sets
📝

Rich Rule Details

Each rule page includes comprehensive documentation with markdown rendering, syntax highlighting for code examples, related rules suggestions, and one-click copy buttons.

  • • Markdown content rendering
  • • Syntax highlighting (rehype-highlight)
  • • Related rules discovery
  • • One-click copy to clipboard
  • • Category badges with icons
🎨

Responsive Design

Fully responsive layout with dark mode support. Masonry grid for optimal card layout, smooth animations, and mobile-first design principles.

  • • Dark/light theme toggle
  • • Masonry grid layout
  • • Mobile-first responsive
  • • Intersection Observer animations
  • • Tailwind CSS 4 styling
🚀

SEO Optimization

Built-in SEO with dynamic metadata generation, XML sitemap, robots.txt, and structured data. Each rule page has unique meta tags for search engines.

  • • Dynamic metadata per route
  • • XML sitemap generation
  • • robots.txt configuration
  • • Open Graph tags
  • • Semantic HTML structure
⚖️

Legal Pages

Complete legal framework with Privacy Policy, Terms of Service, and About pages. Professional presentation for a production-ready directory.

  • • Privacy Policy page
  • • Terms of Service
  • • About page
  • • Footer with legal links
  • • Professional copy

Rule Categories

Assistant Behavior4 rules🔴 High Priority

How AI thinks and makes decisions

Security & Safety3 rules🔴 High Priority

Preventing dangerous patterns and vulnerabilities

Best Practices4 rules🟡 Medium

Industry-standard coding conventions

Code Quality3 rules🟡 Medium

Clean code principles and patterns

Architecture2 rules🟡 Medium

Design patterns and structure

Testing1 rule🟡 Medium

Test quality and coverage standards

Workflow2 rules🟢 Standard

Git, PR, and team collaboration

Framework-Specific6 rules🟢 Standard

React, Next.js, TypeScript, Python, Go

API & REST1 rule🟢 Standard

API design and versioning

CSS & Naming2 rules🟢 Standard

Styling conventions and naming

Technical Implementation

Frontend Stack

  • • Next.js 16 - App Router, React Server Components
  • • React 19 - Latest features and performance
  • • TypeScript 5 - Type-safe development
  • • Tailwind CSS 4 - Utility-first styling
  • • shadcn/ui - Radix UI component library
  • • next-themes - Dark mode support

Key Libraries

  • • Fuse.js - Fuzzy search algorithm
  • • react-markdown - Markdown rendering
  • • rehype-highlight - Syntax highlighting
  • • remark-gfm - GitHub Flavored Markdown
  • • react-masonry-css - Masonry grid layout
  • • Lucide React - Icon library

Content Architecture

Each rule is defined as a TypeScript object with a consistent structure:

export interface Rule {
id: string;
name: string;
description: string;
categories: string[];
rating: number;
voteCount: number;
content: string; // Markdown
}

Rules are stored as individual TypeScript files in lib/rules/, making them easy to add, edit, and version control.

Smart Search Implementation

Fuse.js Configuration

  • • Threshold: 0.3 - Balanced fuzzy matching (0 = exact, 1 = match anything)
  • • Keys: name, description, categories - Search across multiple fields
  • • includeScore: true - Enables relevance sorting
  • • Real-time filtering - Results update on every keystroke

Category Filtering

  • • Multi-select - Choose multiple categories simultaneously
  • • AND logic - Rules must match ALL selected categories
  • • Badge UI - Visual category tags with icons
  • • Clear filters - Reset all filters with one click

Results & Impact

30+
Curated Rules
10+
Categories
Live
Production Ready

devrules.directory provides a centralized, searchable resource for AI coding best practices. By focusing on tech-agnostic, behavior-driven rules, it helps developers across all languages and frameworks improve their AI collaboration quality.

🎯 Future Roadmap (50-60 rules)

Phase 1: Foundation
  • • 15-20 Assistant Behavior rules
  • • 10-12 Security & Safety rules
  • • 8-10 Workflow rules
Phase 2: Expansion
  • • 6-8 Repository Structure rules
  • • 8-10 Testing & Quality rules
  • • 8-12 Domain-Specific rules

Key Learnings

  • • Content is king - The quality and actionability of rules matters more than quantity
  • • Tech-agnostic wins - Rules that work across all languages/frameworks have the highest impact
  • • Behavior over syntax - Focusing on AI behavior patterns is more valuable than code style rules
  • • Search is critical - Fuzzy search with Fuse.js makes discovery effortless
  • • TypeScript for content - Storing rules as TypeScript objects provides type safety and easy version control
  • • Markdown + syntax highlighting - Essential for technical documentation with code examples
  • • Category organization matters - Clear categorization helps users find relevant rules quickly
  • • SEO from day one - Built-in metadata and sitemap generation ensure discoverability
  • • Dark mode is expected - Modern developer tools need theme support
  • • Pagination improves UX - Large result sets need pagination for better navigation