Skip to content

Latest commit

Β 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌐 WEB-DEV-FUN

The Complete Encyclopedia of Modern Web Development

An operating system for building real-world websites β€” designed to be read by both humans and AI coding agents.

License: MIT Made for AI Agents PRs Welcome Version Topics Files

Stars Forks Issues Discussions

πŸš€ Quick nav: START HERE Β· ROADMAP Β· INDEX Β· AI Agent Guide Β· Releases v1.0.0 Β· Anti-AI-Design Β· Prompts

πŸ“¦ Stack default: Next.js 15 Β· TypeScript Β· Tailwind Β· shadcn/ui Β· Postgres Β· Drizzle Β· Vercel Β· Cloudflare


πŸ“Š Repository at a Glance

Metric Value
πŸ“ Topic folders 90+
πŸ“„ Markdown files 150+
πŸ“š Total knowledge base 1.4 MB of curated content
πŸ€– AI agent ready Yes (Claude / Codex / Manus / Cursor / Cline / Aider)
🎨 Anti-AI-Design system Yes (17 files)
βœ… Pre-launch checklists Yes (9 checklists)
πŸ§ͺ Code templates Yes (6 templates)
🌍 Website blueprints Yes (26 verticals)
🎯 Ready-to-build projects Yes (16 specs)
πŸ“¦ External repos cataloged 300+ libraries
🎨 Curated color palettes 20+ across 7 categories

πŸ“ˆ Coverage by Domain

Frontend Fundamentals   β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (HTML, CSS, JS, TS, A11y, Perf, SEO)
Layout & Design         β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Flexbox, Grid, Type, Color, ANTI-AI-DESIGN)
Graphics & Motion       β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ    95%   (SVG, Canvas, WebGL, ThreeJS, Animations)
Frontend Frameworks     β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (React, Vue, Svelte, Next, Nuxt, Astro)
Backend Runtimes        β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Node, Bun, Deno, Express, Fastify, NestJS)
Backend Languages       β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Python, Django, FastAPI, PHP, Laravel, Ruby, Go, Rust, Java, .NET)
Databases               β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Postgres, MySQL, Mongo, Redis, SQLite, Prisma, Drizzle, ORM)
APIs & Realtime         β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (REST, GraphQL, WebSockets)
Auth & Security         β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Sessions, JWT, OAuth, Passkeys, OWASP, Headers, CORS, CSRF, XSS)
DevOps & Cloud          β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Docker, K8s, CI-CD, Git, GitHub, Linux, Vercel, Netlify, Cloudflare, AWS, Azure, GCP)
Observability           β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Monitoring, Logging, Sentry, OpenTelemetry)
Architecture            β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Clean-Code, Design-Patterns, System-Design, Microservices)
Testing                 β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (Vitest, Jest, Cypress, Playwright, E2E)
AI / LLM / Agents       β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ  100%  (AI, LLM, MCP, Agentic-Coding, Prompt-Engineering)

🎯 Topic Distribution

Domain Topics Color
🎨 Frontend & Design 18 🟦 Blue
βš™οΈ Backend & Languages 14 🟩 Green
πŸ—„οΈ Databases & Data 8 🟨 Yellow
πŸ”Œ APIs & Realtime 4 🟧 Orange
πŸ” Auth & Security 2 πŸŸ₯ Red
☁️ DevOps & Cloud 14 πŸŸͺ Purple
πŸ—οΈ Architecture 5 🟫 Brown
πŸ§ͺ Testing 6 ⬜ Gray
πŸ€– AI / LLM / Agents 5 🟦 Cyan
πŸ“š Meta & Resources 14 ⬛ Black
Topic Distribution by Domain:

Frontend & Design  🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦  18
Backend & Langs    🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩              14
Databases & Data   🟨🟨🟨🟨🟨🟨🟨🟨                      8
APIs & Realtime    🟧🟧🟧🟧                              4
Auth & Security    πŸŸ₯πŸŸ₯                                  2
DevOps & Cloud     πŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺπŸŸͺ              14
Architecture       🟫🟫🟫🟫🟫                            5
Testing            ⬜⬜⬜⬜⬜⬜                            6
AI / LLM / Agents  🟦🟦🟦🟦🟦                            5
Meta & Resources   ⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛              14

πŸ€– AI Agent Guide

This repository is primarily designed for AI coding agents. Point any agent (Claude, GPT, Cursor, Cline, Aider, Devin, Copilot) at this repo and it can self-serve answers, patterns, checklists, and project templates β€” without hallucinating.

How an AI agent should use this repository

The canonical contract between this repo and any AI agent is AI_AGENT_GUIDE.md. Every agent should read it FIRST. Summary:

1. PARSE INTENT          β†’ What does the user actually want?
2. ROUTE                 β†’ Use the routing table to find the right folder.
3. PLAN                  β†’ Write PLAN.md for projects > 1 file.
4. VERIFY DEPS           β†’ `npm view <pkg>` / `gh repo view` before importing.
5. BUILD                 β†’ Apply /BEST_PRACTICES.md + /ANTI-AI-DESIGN/.
6. SELF-VERIFY           β†’ Run /AI_AGENT_GUIDE.md#how-to-verify-your-output.
7. REPORT                β†’ What you did, how to run, what's next, what's risky.

The routing table (agents: consult this FIRST)

If the user wants to... Read
Build a web page /HTML/ β†’ /CSS/ β†’ /JavaScript/
Style UI / pick colors / typography /Color-Palettes/ + /Typography/ + /ANTI-AI-DESIGN/
Scaffold a Next.js app /Templates/_next-app/
Pick a component library /EXTERNAL_REPOSITORIES.md#component-libraries
Pick a database /Databases/README.md#decision-tree
Pick an auth model /Authentication/README.md#decision-tree
Pick a deploy target /DEPLOYMENT.md#decision-tree
Build a REST API /REST/ + /APIs/
Build a GraphQL API /GraphQL/
Add real-time features /WebSockets/
Build an AI chatbot / RAG /AI/ + /LLM/ + /Projects/ai-chatbot.md
Build an MCP server /MCP/
Improve a prompt /Prompt-Engineering/ + /PROMPTS.md
Debug an error /ERRORS.md β†’ /DEBUGGING.md
Diagnose slow page /Performance/ + /WEB_VITALS.md
Audit accessibility /Checklists/accessibility.md
Audit security /Checklists/security.md + /Security/
Run pre-launch /Checklists/pre-launch.md
Write tests /Testing/ + /Vitest/ + /Playwright/
Containerize /Docker/
Set up CI/CD /CI-CD/ + /GitHub/
Architect a system /Architecture/ + /System-Design/
Plan a project /AI_AGENT_GUIDE.md + /Templates/_project-spec/
Make UI not look AI-generated /ANTI-AI-DESIGN/ (ALL files)
Find a project to build /Projects/
Find a website template /Website-Blueprints/
Find the right library /EXTERNAL_REPOSITORIES.md

Agent operating loop (visual)

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                    AI AGENT OPERATING LOOP                       β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  1. PARSE   β”‚  User says: "Build me a SaaS with Stripe + auth"
   β”‚   INTENT    β”‚  Agent: "Build a SaaS app with billing + auth."
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  2. ROUTE   β”‚  Consult routing table.
   β”‚             β”‚  β†’ Read /Website-Blueprints/saas.md
   β”‚             β”‚  β†’ Read /Templates/_next-app/
   β”‚             β”‚  β†’ Read /Authentication/
   β”‚             β”‚  β†’ Read /EXTERNAL_REPOSITORIES.md
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  3. PLAN    β”‚  Write PLAN.md from /Templates/_project-spec/.
   β”‚             β”‚  Stack: Next.js + Clerk + Stripe + Drizzle + Neon.
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚ 4. VERIFY   β”‚  `npm view next @clerk/nextjs stripe drizzle-orm`
   β”‚    DEPS     β”‚  All exist. Pin versions.
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  5. BUILD   β”‚  Apply /BEST_PRACTICES.md + /ANTI-AI-DESIGN/.
   β”‚             β”‚  Read /ANTI-AI-DESIGN/ before any UI work.
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚ 6. SELF-    β”‚  βœ“ lint  βœ“ typecheck  βœ“ test  βœ“ build
   β”‚   VERIFY    β”‚  βœ“ 375px  βœ“ 1440px  βœ“ dark mode  βœ“ keyboard
   β”‚             β”‚  βœ“ /ANTI-AI-DESIGN/checklist.md
   β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜
          β”‚
          β–Ό
   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚  7. REPORT  β”‚  "Built. Run with `pnpm dev`. Next: add webhooks."
   β”‚             β”‚  "Risky: Stripe webhook needs prod env var."
   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

The 12 "AI tell" patterns (avoid these)

🚫 Centered hero + 2 CTAs + 3 feature cards
🚫 Purple-to-pink gradient
🚫 `rounded-2xl` on everything
🚫 Emoji as icons
🚫 Lorem ipsum or generic copy
🚫 3-card "Features" grid with icon + headline + 1 sentence
🚫 Generic testimonials with stock photos + 5 stars
🚫 fade-in-up on every section
🚫 "Powered by AI" badge
🚫 Glassmorphism everywhere
🚫 Identical spacing rhythm
🚫 Stock photo of "diverse team laughing at laptop"

β†’ Full guide: /ANTI-AI-DESIGN/

The 10 human-design principles

1.  Intention over convention.        Every choice has a reason.
2.  Asymmetry creates hierarchy.      Don't center everything.
3.  Constraint creates voice.         Pick a palette and stay.
4.  Real copy beats placeholder.      Always.
5.  Real photos beat stock.           Always (or no photos).
6.  One typeface, used well, beats 5.
7.  Motion explains state.            Not decoration.
8.  Imperfection is human.            Slight rotation, hand-drawn.
9.  Density varies.                   Not every section breathes same.
10. Voice is consistent.              Pick a tone and stay.

Verification checklist (agents must run before reporting done)

  • pnpm lint exits 0
  • pnpm typecheck exits 0
  • pnpm test exits 0
  • pnpm build exits 0
  • Every imported package verified at the version specified
  • Mobile (375px) + Desktop (1440px) verified, no horizontal scroll
  • Dark mode readable
  • Keyboard nav works, focus visible
  • /ANTI-AI-DESIGN/checklist.md passed
  • /Checklists/pre-flight.md passed

Boring-but-correct default stack

Layer Pick
Frontend Next.js 15
Language TypeScript (strict)
Styling Tailwind CSS 4
Components shadcn/ui
Icons Lucide
Forms React Hook Form + Zod
State Zustand + TanStack Query
Backend Next.js API / Hono
DB Postgres (Neon / Supabase)
ORM Drizzle (or Prisma)
Auth Clerk (or Better-Auth)
Cache Upstash Redis
Files Cloudflare R2
Email Resend
Payments Stripe
Analytics PostHog
Errors Sentry
Deploy Vercel + Fly.io / Cloudflare
CI/CD GitHub Actions

Deviate when you have a real reason β€” and document it as an ADR.


πŸ“¦ Releases v1.0.0

Pre-packaged configurations for popular AI coding agents. Drop into your project and the agent instantly knows how to use this knowledge base.

Release File Target Agent How to use
🟣 Claude Skill releases/claude-skill/SKILL.md Claude (Sonnet 4, Opus 4, Haiku 3.5) Import as a Claude Skill, or paste into a Claude Project as system context.
🟒 Codex (OpenAI) releases/codex/AGENTS.md OpenAI Codex CLI / Codex in IDE Place at project root as AGENTS.md. Codex auto-detects.
πŸ”΅ Manus AI releases/manus-ai/TASK_PROMPT.md Manus AI Paste the Task Prompt section into Manus task input. Attach repo as knowledge source.

Other agents (Cursor, Cline, Aider, Continue, OpenHands, GitHub Copilot): use the root AI_AGENT_GUIDE.md directly β€” paste it into .cursorrules, .clinerules, or your agent's config.

β†’ Full release notes: releases/README.md


πŸ—ΊοΈ Repository Map

WEB-DEV-FUN/
β”œβ”€β”€ README.md                  You are here
β”œβ”€β”€ START-HERE.md              Pick your track (Beginner β†’ AI Engineer)
β”œβ”€β”€ ROADMAP.md                 The curriculum DAG
β”œβ”€β”€ INDEX.md                   A–Z master index
β”œβ”€β”€ AI_AGENT_GUIDE.md          ⭐ The contract between this repo and AI agents
β”œβ”€β”€ PROMPTS.md                 Reusable prompts for AI agents
β”œβ”€β”€ BEST_PRACTICES.md          Cross-cutting best practices
β”œβ”€β”€ COMMON_MISTAKES.md         The mistakes every dev makes β€” and the fix
β”œβ”€β”€ ANTI-PATTERNS.md           Architectural anti-patterns
β”œβ”€β”€ ERRORS.md                  Common errors catalog
β”œβ”€β”€ DEBUGGING.md               Systematic debugging
β”œβ”€β”€ CHEATSHEET.md              Quick syntax for everything
β”œβ”€β”€ NOTES.md                   Cross-cutting notes & opinions
β”œβ”€β”€ RESOURCES.md               Every useful resource, organized
β”œβ”€β”€ BOOKS.md                   Books worth reading
β”œβ”€β”€ COURSES.md                 Courses worth taking
β”œβ”€β”€ COMMUNITIES.md             Where to learn and ask
β”œβ”€β”€ TOOLS.md                   The recommended toolkit
β”œβ”€β”€ SECURITY.md                Threat model & policies
β”œβ”€β”€ ACCESSIBILITY.md           A11y overview
β”œβ”€β”€ PERFORMANCE.md             Perf overview
β”œβ”€β”€ SEO.md                     SEO overview
β”œβ”€β”€ WEB_VITALS.md              LCP, CLS, INP explained
β”œβ”€β”€ DEPLOYMENT.md              Deployment overview
β”œβ”€β”€ TESTING.md                 Testing overview
β”œβ”€β”€ ARCHITECTURE.md            Architecture overview
β”œβ”€β”€ DESIGN_SYSTEM.md           Design system overview
β”œβ”€β”€ PROJECT_CHECKLIST.md       Per-project checklist
β”œβ”€β”€ CONTRIBUTING.md            How to contribute
β”œβ”€β”€ CHANGELOG.md               Repository changelog
β”œβ”€β”€ LICENSE                    MIT
β”œβ”€β”€ EXTERNAL_REPOSITORIES.md   ⭐ The curated library/tool catalog
β”‚
β”œβ”€β”€ πŸ“š Topic folders (90+):
β”‚   β”œβ”€β”€ HTML/  CSS/  JavaScript/  TypeScript/  Accessibility/
β”‚   β”œβ”€β”€ Responsive-Design/  Flexbox/  Grid/  Animations/  Design-Patterns/
β”‚   β”œβ”€β”€ UI/  UX/  Typography/  Icons/  Illustrations/  SVG/  Canvas/  WebGL/  ThreeJS/
β”‚   β”œβ”€β”€ Performance/  SEO/  Analytics/  Authentication/  APIs/  REST/  GraphQL/  WebSockets/
β”‚   β”œβ”€β”€ Backend/  NodeJS/  Bun/  Deno/  Express/  Fastify/  NestJS/
β”‚   β”œβ”€β”€ Python/  Django/  FastAPI/  PHP/  Laravel/  Ruby/  Go/  Rust/  Java/  .NET/
β”‚   β”œβ”€β”€ Databases/  PostgreSQL/  MySQL/  MongoDB/  Redis/  SQLite/  Prisma/  Drizzle/  ORM/
β”‚   β”œβ”€β”€ Deployment/  Docker/  Kubernetes/  CI-CD/  Git/  GitHub/  Linux/  Cloud/
β”‚   β”œβ”€β”€ Vercel/  Netlify/  Cloudflare/  AWS/  Azure/  GCP/
β”‚   β”œβ”€β”€ Monitoring/  Logging/  Security/  Clean-Code/  System-Design/  Architecture/  Microservices/
β”‚   β”œβ”€β”€ Testing/  Jest/  Vitest/  Cypress/  Playwright/  E2E/
β”‚   └── AI/  LLM/  MCP/  Agentic-Coding/  Prompt-Engineering/
β”‚
β”œβ”€β”€ 🎨 Special folders:
β”‚   β”œβ”€β”€ ANTI-AI-DESIGN/         ⭐ Stop your UI looking AI-generated (17 files)
β”‚   β”œβ”€β”€ Color-Palettes/         Curated palettes by use case
β”‚   β”œβ”€β”€ Templates/              Code skeletons (Next.js, ADR, project spec, etc.)
β”‚   β”œβ”€β”€ Checklists/             Pre-flight, pre-launch, post-mortem, a11y, perf, sec
β”‚   β”œβ”€β”€ Projects/               16 end-to-end project specs
β”‚   └── Website-Blueprints/     26 per-vertical templates
β”‚
└── πŸ“¦ Releases:
    └── releases/
        β”œβ”€β”€ claude-skill/SKILL.md        For Claude (Sonnet/Opus/Haiku)
        β”œβ”€β”€ codex/AGENTS.md              For OpenAI Codex CLI
        └── manus-ai/TASK_PROMPT.md      For Manus AI

πŸŽ“ Learning Tracks

Track Who Goal Hours
A. Beginner β†’ Frontend New to code Build & ship responsive websites 40–60h
B. Frontend β†’ Full-stack Comfortable with JS/CSS Apps with auth, DB, deploy 30–50h
C. Backend-leaning Like servers, data, APIs APIs & services end-to-end 30–50h
D. Designer β†’ Builder Strong visual eye, weak code Translate designs to production UI 25–40h
E. AI Engineer Build LLM-powered apps Ship AI features safely 20–40h
F. AI Agent You ARE the LLM Use this repo as a reference manual Read AI_AGENT_GUIDE.md

β†’ Full tracks in START-HERE.md


πŸš€ Quick Start

For humans

  1. Open START-HERE.md β€” pick your track.
  2. Follow ROADMAP.md step by step.
  3. When ready to build, copy a starter from Templates/ and follow a Website Blueprint.
  4. Before shipping, run every applicable Checklist.

For AI agents

  1. Read AI_AGENT_GUIDE.md FIRST.
  2. Use INDEX.md as your table of contents.
  3. When unsure which tool to pick, consult EXTERNAL_REPOSITORIES.md.
  4. When generating UI, ALWAYS consult ANTI-AI-DESIGN/ before writing JSX/HTML.
  5. When planning a project, copy Templates/_project-spec/PLAN.md and fill it in.

🀝 Who This Is For

Audience Why they care
AI coding agents Reference manual; reduces hallucinations; gives deterministic checklists
Beginners Single learning path; no dead-ends; opinionated defaults
Working developers Fast lookup; cheat sheets; pre-flight checklists
Designers Design system, color, typography, ANTI-AI-DESIGN
Full-stack engineers End-to-end blueprints; system design; deployment
Team leads Onboarding path; consistent vocabulary; review checklists
Educators Ready-made curriculum with exercises and projects

⭐ Why Star This Repo

  • πŸ“š One repo to rule them all β€” 90+ topics, 150+ files, no fluff.
  • πŸ€– AI-agent-first β€” every file has an "AI Instructions" section.
  • 🎨 Anti-AI-Design β€” the only repo with a 17-file system for not looking AI-generated.
  • βœ… Production checklists β€” pre-flight, pre-launch, post-mortem, a11y, perf, sec.
  • πŸ“¦ Library catalog β€” 300+ curated libraries, with when-to-use.
  • 🎯 Project specs β€” 16 end-to-end projects, each with AI prompt.
  • 🌍 Website blueprints β€” 26 verticals, each with sections + design + AI prompt.
  • πŸŸ£πŸŸ’πŸ”΅ 3 agent releases β€” Claude Skill, Codex AGENTS.md, Manus Task Prompt.
  • πŸ†“ Free forever β€” MIT licensed. Fork it. Ship from it. Teach from it.

πŸ“œ File Template (used everywhere)

Every markdown file follows this skeleton so agents and humans always know where to look:

# <Topic Name>

> One-sentence elevator pitch.

## Purpose          Why this file exists and when to read it.
## Prerequisites    What you should already know.
## Learning Outcome What you'll be able to do after reading.
## Dependencies     Tools, libraries, or sibling files this depends on.
## Related Files    Links to closely-related files in this repo.
## AI Instructions  ⭐ Step-by-step instructions an AI agent should follow.
## Human Notes      Context, opinions, and gotchas for human readers.
## References       Authoritative external links.
## Further Reading  Books, courses, articles.
## Exercises        Hands-on tasks to verify understanding.
## Projects         End-to-end projects that exercise this topic.

πŸ›£οΈ Roadmap

Version Theme Status
v1.0.0 Initial public release: 90+ topics, AI agent guide, anti-AI-design system, releases for Claude/Codex/Manus βœ… Released
v1.1.0 More website blueprints (10 more verticals) 🚧 Planned
v1.2.0 Video course companion (free) 🚧 Planned
v1.3.0 More code templates (Astro, SvelteKit, Nuxt, Hono starters) 🚧 Planned
v2.0.0 Multi-language translations (ES, FR, DE, PT-BR, HI, ZH) 🚧 Planned

See CHANGELOG.md for details.


🀝 Contributing

See CONTRIBUTING.md. All contributions must follow the file template above. PRs welcome β€” small or large.


πŸ“„ License

MIT β€” see LICENSE. Use it, fork it, teach from it, ship from it.


⭐ Star History

If this repo helps you, please star it. Stars tell the algorithm to surface it to the next developer.

Star History Chart

🌟 Don't forget to ⭐ star and 🍴 fork this repo!

πŸ“¦ Releases: Claude Skill Β· Codex Β· Manus AI

πŸ”— Quick links: START HERE Β· ROADMAP Β· INDEX Β· AI_AGENT_GUIDE Β· PROMPTS Β· ANTI-AI-DESIGN Β· EXTERNAL_REPOSITORIES Β· Checklists Β· Templates Β· Projects Β· Website-Blueprints

πŸ’¬ Discussions: GitHub Discussions Β· πŸ› Issues: GitHub Issues

Built with ❀️ for developers and AI agents everywhere.

About

🌐 The Complete Encyclopedia of Modern Web Development β€” an operating system for building real-world websites. Designed for both humans and AI coding agents (Claude, Codex, Manus, Cursor, Cline, Aider). 90+ topics, 150+ files, anti-AI-design system, pre-launch checklists, AI agent guide, releases for Claude Skill / Codex / Manus AI.

Topics

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors