Loading repository data…
huzaifaa-dev-vibe / repository
WEB-DEV-FUN
🌐 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.
#ai-agents#aws#claude#cloudflare#codex#cursor
Live repository statistics
★ 0Stars
⑂ 0Forks
◯ 0Open issues
◉ 0Watchers
README preview
🌐 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.
🚀 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 |
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 lintexits 0 -
pnpm typecheckexits 0 -
pnpm testexits 0 -
pnpm buildexits 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.mdpassed -
/Checklists/pre-flight.mdpassed