01 / 10
📖

FasRecap
Site Manual

How the Visual Knowledge Hub works — architecture, automation,
page catalog, and source folder map.

32
Pages
8
Types
10
Topics
∞
Auto-Deploy

Last updated: 2026-03-17  ·  fasrecap.contentclinic.co

02 / 10

🧠 What Is FasRecap?

A visual knowledge hub that indexes self-contained HTML files — each one a standalone visual explainer, presentation deck, report, proposal, web app, or game.

🎨
Self-Contained HTML
Every page is a single .html file with all CSS & JS inlined. No external dependencies. No build step. Just drop and deploy.
🔍
Search, Filter & Sort
Filter by 8 types, 10 topics, star favorites, search by keyword. Table or grid view. All state saved in localStorage.
⚡
Zero-Touch Deploy
Save a file in site/ → auto-synced to VPS within 10 seconds. Background daemon runs 24/7 via launchd.
🤖
AI-Readable
Live manifest.json lets Claude Cowork fetch the full page catalog for context. Machine-readable metadata for every page.

Content Types

Visual Explainer Presentation Deck Report Proposal Game Design Shooting Plan
03 / 10

🏗️ System Architecture

Two independent deployment paths feed the same VPS.

Path 1: Auto-Sync Daemon (Primary)

📁 site/*.html
→
fswatch (5s)
→
sync.sh
→
rsync + expect
→
VPS nginx
chmod 644 post-sync  ·  PID lock  ·  logs/sync.log  ·  auto-start via launchd

Path 2: Upload API (Secondary)

📦 HTML Box
→
auto-push.py
→
FastAPI upload
→
VPS direct
SHA-256 dedup  ·  auto-detect type  ·  .autopush-state.json
🖥 Local Mac
FasRecap/site/
fswatch daemon (launchd)
rsync via expect + password
☁️ VPS (Vultr)
Ubuntu 24.04 + Docker
nginx serves /docker/fasrecap/site/
Caddy reverse proxy → HTTPS
04 / 10

📂 Source Folder Map

Where HTML files come from, where they get filed, and how they reach the site.

~/Code2026/ ├── 📦 HTML Box/ ← Primary filing location (auto-push watches this) │ ├── 📦 Visual Explainers/ (13 files) │ ├── 📦 Presentation Decks/ (3 files) │ ├── 📦 Reports/ (5 files) │ ├── 📦 Proposals/ (1 file) │ ├── 📦 Shooting Plans/ (empty) │ └── 📦 Designs/ (empty) │ ├── FasRecap/ ← Deployment repo │ ├── site/ ← Auto-synced to VPS via rsync daemon │ │ ├── index.html (main SPA) │ │ ├── manifest.json (AI-readable catalog) │ │ └── *.html (15 content pages) │ ├── sync.sh ← Manual sync command │ ├── watch-sync.sh ← fswatch daemon │ ├── auto-push.py ← Upload API pusher │ └── CLAUDE.md ← Context for Claude Code │ ├── 📦 Workshop/ ← Test outputs (NOT auto-pushed) │ └── Other project folders... (Training/, fitplan-app/, dvc-dashboard/, fj-senior-level1/) → Bundled into single HTML → copied to site/ ~/Library/Application Support/Claude/ └── local-agent-mode-sessions/ ← Claude session outputs (auto-push watches this) └── */outputs/*.html (~30 files)
🎯 file-router skill
Every HTML output from Cowork gets routed to the right sub-box in 📦 HTML Box. This skill runs automatically at the end of generation.
⚠️ Important Note
VPS has more files than local site/ because the upload API writes directly to VPS. rsync uses no --delete to preserve those.
05 / 10

⚡ Auto-Deploy — How It Actually Works

Think of it like Dropbox, but for your website.

🟢 What you see: "I save a file, it goes live"
You put an HTML file into the site/ folder on your Mac. Within ~10 seconds, it's live on fasrecap.contentclinic.co. That's it. You don't need to run anything. It just works.
🔧 What happens behind the scenes
1

A "watcher" app is always running on your Mac

It's called fswatch — like a security camera pointing at your site/ folder. Any time a file is added, changed, or deleted, it notices. It starts automatically when you log in. You never need to start it.

2

It waits 5 seconds (to batch rapid changes)

If you save a file 3 times in 2 seconds, it doesn't upload 3 times. It waits for things to calm down, then uploads once. Smart.

3

It copies only what changed to your VPS server

Uses rsync — a tool that compares files and only sends the differences. If you changed 1 line in a 2000-line file, it sends just that 1 line. Fast. Your VPS password is stored in a script so you don't have to type it.

4

It fixes file permissions so nginx can serve them

Sometimes files on your Mac are "private" (only you can read them). The server needs them to be "public readable". This step fixes that automatically. Without it, visitors get a 403 Forbidden error.

📋 Where to check if it's working
Everything the watcher does is written to a log file. You can read it anytime:
# Open Terminal and run: cat ~/Code2026/FasRecap/logs/sync.log # You'll see something like: # [2026-03-17 20:28:00] [watcher] Change detected: my-file.html # [2026-03-17 20:28:00] Syncing site/ → VPS... # [2026-03-17 20:28:01] rsync done # [2026-03-17 20:28:02] ✅ Sync complete
06 / 10

💻 Do It Yourself — CLI Walkthrough

Step-by-step Terminal commands. Copy-paste each one.

Step 1: Open Terminal & go to FasRecap folder
# Open Terminal app (Cmd + Space → type "Terminal" → Enter) # Then paste this: cd ~/Code2026/FasRecap
Step 2: Manual sync (push everything to VPS right now)
./sync.sh # This will: # 1. Copy all files from site/ to your VPS server # 2. Fix permissions so the website can serve them # 3. Print "✅ Sync complete" when done
Step 3: Check the sync log (did it work?)
# See the last 20 lines of the log: tail -20 logs/sync.log # Watch it LIVE (updates as syncs happen): tail -f logs/sync.log # Press Ctrl+C to stop watching
Step 4: Check if the auto-watcher daemon is running
launchctl list | grep fasrecap # ✅ Good output (running): # 12345 0 co.contentclinic.fasrecap-sync # ↑PID ↑exit code 0 = OK # ❌ Bad output (not running): # - 1 co.contentclinic.fasrecap-sync # ↑no PID = crashed. Fix: restart it (see below)
Step 5: Stop / Start the daemon
# STOP the auto-watcher: launchctl unload ~/Library/LaunchAgents/co.contentclinic.fasrecap-sync.plist # START it again: launchctl load -w ~/Library/LaunchAgents/co.contentclinic.fasrecap-sync.plist
Step 6: Run a command on the VPS server
# List files on the live server: ./.vps-ssh.sh "ls /docker/fasrecap/site/" # Check a specific file exists: ./.vps-ssh.sh "ls -la /docker/fasrecap/site/my-page.html" # Fix permissions manually (if 403 error): ./.vps-ssh.sh "chmod 644 /docker/fasrecap/site/my-page.html"
07 / 10

📚 Page Catalog

All 31 pages currently indexed. Click any title to open.

Title Type Topics Date
Cowork vs Code — Capability ComparisonVisual ExplainerGeneral2026-03-16
Context Engineering — Fasai's Agent ArchitectureVisual ExplainerAI Tools, Notion2026-03-16
ROSME FASAI — Notion Optimization PlanVisual ExplainerAI Tools, Notion, Rosme2026-03-16
Building Software & Automation — The 3-Layer ModelVisual ExplainerOpenClaw2026-03-16
FJ Database Relationships — Senior Level 1Visual ExplainerGeneral2026-03-16
Context Engineering Foundation — CC AI InfrastructureVisual ExplainerAI Tools, CC, Notion2026-03-16
Context Engineering Foundation — How It WorksVisual ExplainerAI Tools2026-03-16
Fasai AI Skill Checklist 2026Visual ExplainerAI Tools, CC2026-03-16
OpenClaw & Vibe Hacking — 2026 Threat LandscapeVisual ExplainerAI Tools, OpenClaw2026-03-16
OpenClaw & Vibe Hacking — Level 2 Deep DiveVisual ExplainerAI Tools, OpenClaw2026-03-16
FasClaw × Notion: The Brain Behind the BotVisual ExplainerNotion, OpenClaw2026-03-16
Fasai's AI Journey — 2022–2026Visual ExplainerGeneral2026-03-16
Context Engineering — Slide DeckPresentation DeckAI Tools2026-03-16
30 Days Senior Level 1 — Marketing & Sales DeckPresentation DeckFJ Senior2026-03-16
Executive Branding Workshop — Slingshot × CCPresentation DeckCC, Workshop2026-03-16
AI Video Generation Tools — Research BriefReportสอนควาย2026-03-14
FasClaw Cost Analysis — Token & Cost per RunReportOpenClaw2026-03-16
BUILD FACTORY — 24/7 Autonomous Build PipelineReportNotion, OpenClaw2026-03-16
GTM Agent Team — Strategic Infrastructure PlanReportGTM, Notion2026-03-16
GTM Execution Feasibility Report — Rosme 2.0ReportGTM, Rosme2026-03-16
Rosme 2.0 — Implementation BlueprintReportRosme2026-03-16
Omniboard V2 — Product BriefReportGeneral2026-03-09
PROPOSAL: CEO Branding พี่เปิ้ล 2026ProposalContent Clinic2026-03-16
FitPlan — Personal Training CompanionFJ Senior2026-03-10
DVC Productivity DashboardGeneral2026-03-08
DVC Thailand Sales DashboardGeneral2026-03-08
Thai Stock Analysis — Textile vs EnergyGeneral2026-03-12
FJ Senior Level 1 — 30-Day Fitness AppFJ Senior2026-03-15
Omniboard V2 — UI Design DocumentationDesignGeneral2026-03-09
Space Invaders GameGameGeneral2026-03-05
Tetris GameGameGeneral2026-03-05
08 / 10

➕ Adding New Pages

Three ways to get content onto FasRecap.

Method 1: Drop in site/ (Recommended)
# 1. Save your .html file cp my-page.html ~/Code2026/FasRecap/site/ # 2. Add PAGES entry in index.html (before FASRECAP_ENTRY_MARKER) { title: "My Page Title", slug: "my-page", type: "Visual Explainer", topics: ["AI Tools"], description: "One-line description", date: "2026-03-17", slides: 10 } # 3. Done! Auto-syncs to VPS in ~10 seconds
Method 2: Via Claude Cowork Skills
Skills like visual-explainer, proposal-generator, slide-deck-generator automatically produce HTML files. The file-router skill routes them to 📦 HTML Box, and auto-push.py uploads them to VPS via the API.
Method 3: deploy.sh CLI
./deploy.sh add my-page.html "My Page" "Report" "AI Tools" "Description" ./deploy.sh list   # see all pages ./deploy.sh remove my-page

💡 Don't Forget: Update manifest.json

When adding pages manually, also add them to site/manifest.json so Claude Cowork can see them. The manifest auto-syncs to fasrecap.contentclinic.co/manifest.json.

09 / 10

🤖 AI Access

How Claude Code and Claude Cowork read FasRecap for context.

💻
Claude Code
Reads CLAUDE.md automatically at session start. Has full access to all local files in FasRecap/ including source code, scripts, and page content.
# Auto-loaded context: CLAUDE.md → full site manual site/*.html → all page content manifest.json → page catalog
🌐
Claude Cowork
Fetches the live manifest via WebFetch. Can read any page's full HTML content from the live site for style/structure reference.
# Tell Cowork: Fetch fasrecap.contentclinic.co/manifest.json # To read a specific page: Fetch fasrecap.contentclinic.co/{slug}.html

🔑 Pro Tip for Cowork System Prompts

Add this line to any Cowork skill that generates HTML:
For FasRecap context, fetch: https://fasrecap.contentclinic.co/manifest.json

Built with ❤️ by Fasai × Claude  ·  Back to FasRecap  ·  manifest.json

10 / 10

📋 Cheat Sheet

Copy-paste quick reference. Pin this slide.

🌐 Links
# Live site https://fasrecap.contentclinic.co # Any page https://fasrecap.contentclinic.co/{slug}.html # AI manifest https://fasrecap.contentclinic.co/manifest.json
📁 Key Paths on Your Mac
# Site files (auto-synced) ~/Code2026/FasRecap/site/ # Sync log ~/Code2026/FasRecap/logs/sync.log # HTML Box (filing) ~/Code2026/📦 HTML Box/
⚡ "Something broke" fixes
# Page shows 403 Forbidden? cd ~/Code2026/FasRecap ./.vps-ssh.sh "chmod 644 /docker/fasrecap/site/filename.html" # Auto-sync stopped working? launchctl list | grep fasrecap # If no PID, restart: launchctl load -w ~/Library/LaunchAgents/co.contentclinic.fasrecap-sync.plist # Just force-sync everything now? cd ~/Code2026/FasRecap && ./sync.sh
🆕 Add a new page (minimum steps)
# 1. Put file in site/ cp my-page.html ~/Code2026/FasRecap/site/ # 2. Edit index.html → add PAGES entry # (before // FASRECAP_ENTRY_MARKER) # 3. Edit manifest.json → add entry # 4. Wait 10 seconds. Done. It's live.

Built with ❤️ by Fasai × Claude  ·  Back to FasRecap