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
| 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 |
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)
| 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
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.
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.
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β 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."
βββββββββββββββ
π« 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/
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.
-
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
| 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 |
| 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.
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
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
| 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
- Open
START-HERE.mdβ pick your track. - Follow
ROADMAP.mdstep by step. - When ready to build, copy a starter from
Templates/and follow aWebsite Blueprint. - Before shipping, run every applicable
Checklist.
- Read
AI_AGENT_GUIDE.mdFIRST. - Use
INDEX.mdas your table of contents. - When unsure which tool to pick, consult
EXTERNAL_REPOSITORIES.md. - When generating UI, ALWAYS consult
ANTI-AI-DESIGN/before writing JSX/HTML. - When planning a project, copy
Templates/_project-spec/PLAN.mdand fill it in.
| 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 |
- π 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.
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.| 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.
See CONTRIBUTING.md. All contributions must follow the file template above. PRs welcome β small or large.
MIT β see LICENSE. Use it, fork it, teach from it, ship from it.
If this repo helps you, please star it. Stars tell the algorithm to surface it to the next developer.
π 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.