Install
openclaw skills install tulisaiUse when managing BangunAI Blog content, automating blog workflows, and writing MDX articles with BangunAI conventions. Supports Obsidian-like features (callouts, mermaid, LaTeX, wikilinks, backlinks, graph view).
openclaw skills install tulisaiHomepage: React 18 + Vite + MDX + shadcn/ui
Blog Root: /home/hades/BangunAI-Blog
Content Root: /home/hades/BangunAI-Blog/src/content
Tech Stack: TypeScript, Tailwind CSS, Mermaid 11, KaTeX, Shiki
Skill ini menggabungkan:
import.meta.globBlog ini adalah Digital Garden & Knowledge Base dengan fitur terinspirasi dari Obsidian.
/home/hades/BangunAI-Blog/
├── src/
│ ├── content/
│ │ ├── writing/ # Blog posts (notes, essays)
│ │ ├── articles/ # Technical articles, tutorials
│ │ ├── read/ # Reading notes, link curation
│ │ ├── daily/ # Daily notes (tasks, logs)
│ │ ├── about.mdx # About page (single file)
│ │ ├── now.mdx # Now page (current activities)
│ │ └── index.ts # Auto-import loader
│ ├── components/ # React components (40+ shadcn/ui)
│ │ ├── Callout.tsx # 14 tipe callouts
│ │ ├── MermaidDiagram.tsx # Mermaid renderer
│ │ ├── WikiLink.tsx # Internal linking
│ │ ├── Backlinks.tsx # Auto backlinks
│ │ ├── GraphView.tsx # Knowledge graph
│ │ └── ui/ # shadcn/ui components
│ ├── pages/ # Route pages
│ ├── lib/ # Utilities
│ │ ├── date.ts # Date formatting
│ │ └── utils.ts # Class utilities
│ └── data/
│ ├── posts.ts # Helper functions
│ └── types.ts # TypeScript types
├── public/ # Static assets
├── skill/ # Agent skills (this!)
└── package.json # Dependencies
| Type | Description | Location | Features |
|---|---|---|---|
| Writing | Personal notes, essays | src/content/writing/ | Filter by type (note/essay), category, tags |
| Articles | Technical tutorials, guides | src/content/articles/ | Grouped by year |
| Read | Curated readings with notes | src/content/read/ | Source URL, snippet, tags |
| Daily | Daily notes, tasks, logs | src/content/daily/ | Rollover tasks, timestamps |
| About | About page (MDX) | src/content/about.mdx | Single static page |
| Now | Current activities | src/content/now.mdx | Updated regularly |
File src/content/index.ts auto-detect semua .mdx files via import.meta.glob:
// NO MANUAL REGISTRATION NEEDED!
const writingModules = import.meta.glob("./writing/*.mdx", { eager: true });
const articleModules = import.meta.glob("./articles/*.mdx", { eager: true });
const readModules = import.meta.glob("./read/*.mdx", { eager: true });
Benefits: Create file → Auto-detected → Available immediately
---
title: "Judul Artikel Yang Menarik"
slug: judul-artikel-yang-menarik
summary: "Ringkasan singkat 1-2 kalimat yang compelling."
type: note # note | essay | article
category: Tech # Tech | Refleksi | Produktivitas | Linux | Coding | Life
tags: [react, typescript, tutorial]
date: "2026-02-11T14:30:00"
readingTime: 5
featured: false # (optional) untuk featured posts
---
Required Fields:
title — Judul artikel (string)slug — URL-friendly slug (kebab-case)summary — Deskripsi singkat, compelling (1-2 kalimat)type — Jenis konten:
note — Catatan pendek, quick takesessay — Tulisan mendalam, eksploratifarticle — Tutorial, panduan terstrukturcategory — Kategori utama (pilih salah satu):
Tech — Teknologi, programming, toolsRefleksi — Personal reflection, thoughtsProduktivitas — Productivity, workflowLinux — Linux, terminal, sysadminCoding — Coding practices, patternsLife — Lifestyle, experiencestags — Array tags (lowercase, kebab-case)date — ISO timestamp dengan jam (YYYY-MM-DDTHH:mm:ss)readingTime — Estimasi menit baca (~200 kata/menit)Optional Fields:
featured — Boolean, untuk featured posts di homepage---
title: "Judul Artikel/Bacaan"
slug: judul-artikel-bacaan
snippet: "Quote atau snippet menarik dari artikel (1-2 kalimat)."
source: "nama-situs.com"
url: "https://link-ke-artikel.com"
tags: [programming, career]
date: "2026-02-11T18:00:00"
---
## Catatan Personal (Optional)
Komentar atau catatan tentang bacaan ini...
Required Fields:
title — Judul artikel (string)slug — URL-friendly slug (kebab-case)snippet — Quote/excerpt menarik dari artikelsource — Domain sumber (e.g., github.com, dev.to)url — Link lengkap ke artikel aslitags — Array tags (lowercase)date — ISO timestampBody Content: Optional, untuk catatan personal
---
title: "About" # atau "Now"
---
Content langsung di sini...
Mendukung semua fitur MDX (callouts, highlight, mermaid, dll).
Minimal frontmatter: Hanya title
<Callout type="info" title="Judul Callout">
Isi callout di sini.
</Callout>
Available types:
info — Informasi umum (biru)tip — Tips & tricks (hijau)warning — Peringatan (kuning)danger — Danger/error (merah)success — Success message (hijau cerah)note — Catatan (abu-abu)example — Contoh (ungu)bug — Bug report (merah)question — Pertanyaan (biru muda)abstract — Abstract/summary (indigo)important — Penting (orange)caution — Hati-hati (kuning gelap)quote — Kutipan (krem)cite — Sitasi (krem gelap)Obsidian Blockquote Syntax:
> [!info] Judul Callout
> Isi callout menggunakan sintaks Obsidian.
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Supported diagrams (Mermaid v11):
graph / flowchart — FlowchartsequenceDiagram — Sequence diagrampie — Pie chartclassDiagram — UML class diagramstateDiagram-v2 — UML state diagramerDiagram — Entity relationship diagramgantt — Gantt chartmindmap — Mind maptimeline — TimelineFeatures:
Inline: $E = mc^2$
Block:
$$
\int_0^\infty e^{-x} dx = 1
$$
Powered by KaTeX 0.16 — Fast math rendering
<WikiLink to="slug-artikel" label="Teks yang Ditampilkan" />
Features:
<Highlight>teks yang di-highlight</Highlight>
Atau gunakan HTML tag:
<mark>teks yang di-highlight</mark>
<YouTube url="https://youtube.com/watch?v=VIDEO_ID" title="Judul Video" />
Features:
```typescript
function hello(name: string): string {
return `Hello, ${name}!`;
}
```
Features:
github-dark-dimmed themeTables:
| Column 1 | Column 2 |
|----------|----------|
| Value A | Value B |
Task Lists:
- [x] Completed task
- [ ] Uncompleted task
Strikethrough:
~~deleted text~~
Auto-generated di setiap artikel detail. Menampilkan artikel lain yang me-link ke artikel ini.
Interactive force-directed graph menampilkan koneksi antar konten.
Dark Mode (Default):
--background — Navy gelap (#1A1A2E)--foreground — Cream (#F5E6D3)--primary — Gold/amber (aksen utama)--accent — Warm gold (hover states)--card — Navy lebih terangLight Mode:
--background — Cream hangat--foreground — Navy gelap--primary — Amber gelap--card — Cream lebih gelapUsage:
// ✅ Gunakan semantic tokens
<div className="bg-background text-foreground">
<button className="bg-primary text-primary-foreground">
Klik
</button>
</div>
// ❌ Jangan hardcode warna
<div className="bg-[#1A1A2E] text-[#F5E6D3]">
| Font | Usage |
|---|---|
| Space Grotesk | Headings & navigation |
| Source Serif 4 | Body text artikel (serif) |
| Inter | UI elements & labels |
| JetBrains Mono | Code blocks & inline code |
<div className="glass glass-hover rounded-xl p-6">
Konten dengan efek kaca transparan
</div>
daily (Smart Daily Note)Create daily note dengan auto-rollover unchecked tasks dari kemarin.
BLOG_ROOT="/home/hades/BangunAI-Blog"
DAILY_DIR="$BLOG_ROOT/src/content/daily"
mkdir -p "$DAILY_DIR"
TODAY=$(date +%Y-%m-%d)
FILE="$DAILY_DIR/$TODAY.mdx"
LAST_FILE=$(find "$DAILY_DIR" -name "????-??-??.mdx" ! -name "$TODAY.mdx" 2>/dev/null | sort | tail -n 1)
if [ ! -f "$FILE" ]; then
cat > "$FILE" <<EOF
---
title: "Daily Note: $TODAY"
date: "$TODAY"
type: daily
tags: [daily]
---
# Daily Note: $TODAY
EOF
if [ -n "$LAST_FILE" ]; then
PENDING=$(grep "\- \[ \]" "$LAST_FILE" || true)
if [ -n "$PENDING" ]; then
echo "## Rollover Tasks" >> "$FILE"
echo "" >> "$FILE"
echo "$PENDING" >> "$FILE"
echo "" >> "$FILE"
fi
fi
cat >> "$FILE" <<EOF
## Tasks Today
- [ ]
## Log
EOF
echo "✅ Created: $FILE"
else
echo "📂 Exists: $FILE"
fi
fetch_last (Style Reference)Fetch latest file untuk style reference. Supports all categories including special pages.
# Input: CATEGORY (writing, articles, read, daily, about, now)
BLOG_ROOT="/home/hades/BangunAI-Blog"
case "$CATEGORY" in
"daily") DIR="$BLOG_ROOT/src/content/daily" ;;
"writing") DIR="$BLOG_ROOT/src/content/writing" ;;
"articles") DIR="$BLOG_ROOT/src/content/articles" ;;
"read") DIR="$BLOG_ROOT/src/content/read" ;;
"about")
cat "$BLOG_ROOT/src/content/about.mdx"
exit 0
;;
"now")
cat "$BLOG_ROOT/src/content/now.mdx"
exit 0
;;
*) echo "❌ Unknown category"; exit 1 ;;
esac
LAST_FILE=$(ls -t "$DIR"/*.mdx 2>/dev/null | head -n 1)
if [ -f "$LAST_FILE" ]; then
echo "📄 REFERENSI GAYA ($LAST_FILE):"
head -n 50 "$LAST_FILE"
else
echo "❌ Belum ada file di $CATEGORY"
fi
write (Universal Writer + BangunAI Style)Write new content dengan frontmatter lengkap.
For Writing/Articles:
CATEGORY="writing" # atau "articles"
FILENAME="judul-artikel.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"
cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'EOF'
---
title: "Judul Artikel Baru"
slug: judul-artikel-baru
summary: "Ringkasan singkat tentang artikel ini yang menarik perhatian pembaca."
type: note
category: Tech
tags: [react, typescript, tutorial]
date: "2026-02-12T15:00:00"
readingTime: 5
---
## Introduction
Paragraf pembuka yang compelling dan menarik perhatian.
<Callout type="tip" title="Pro Tip">
Gunakan callouts untuk highlight informasi penting!
</Callout>
## Section 1
### Subsection A
Content here dengan **bold** dan *italic*.
```typescript
// Example code dengan syntax highlighting
function example(): string {
return "Hello World";
}
graph LR
A[Input] --> B[Process]
B --> C[Output]
Inline math: $x^2 + y^2 = z^2$
Block math: $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$
Check out <WikiLink to="other-article" label="this related article" />.
Kesimpulan yang solid dan actionable. EOF
echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME"
**For Read Items:**
```bash
CATEGORY="read"
FILENAME="interesting-article.mdx"
BLOG_ROOT="/home/hades/BangunAI-Blog"
cat > "$BLOG_ROOT/src/content/$CATEGORY/$FILENAME" <<'EOF'
---
title: "Interesting Article Title"
slug: interesting-article
snippet: "A compelling quote or snippet from the article that captures its essence."
source: "website.com"
url: "https://website.com/article"
tags: [tech, programming, career]
date: "2026-02-12T15:00:00"
---
## Key Takeaways
- Point 1: Important insight
- Point 2: Actionable advice
- Point 3: Thought-provoking idea
## Personal Notes
My thoughts and commentary about this article...
<Callout type="note">
This reminds me of a similar concept in...
</Callout>
EOF
echo "✅ Created: $BLOG_ROOT/src/content/$CATEGORY/$FILENAME"
log (Append Log)Append timestamped log to today's daily note.
# Input: CONTENT="..."
TODAY=$(date +%Y-%m-%d)
FILE="/home/hades/BangunAI-Blog/src/content/daily/$TODAY.mdx"
if [ ! -f "$FILE" ]; then
echo "❌ Run 'daily' workflow first!"
exit 1
fi
echo "- $(date +%H:%M) $CONTENT" >> "$FILE"
echo "✅ Logged to: $FILE"
read (Smart Read)Smart search content by keyword.
# Input: FILE="..."
find "/home/hades/BangunAI-Blog/src/content" -name "*$FILE*.mdx" | head -n 1 | xargs -r cat
update_about (Update About Page)Update about.mdx with MDX content.
# Input: CONTENT="..."
FILE="/home/hades/BangunAI-Blog/src/content/about.mdx"
cat > "$FILE" <<EOF
---
title: "About"
---
$CONTENT
EOF
echo "✅ Updated: $FILE"
update_now (Update Now Page)Update now.mdx with current activities.
# Input: CONTENT="..."
FILE="/home/hades/BangunAI-Blog/src/content/now.mdx"
CURRENT_DATE=$(date +"%B %Y")
cat > "$FILE" <<EOF
---
title: "Now"
---
## Apa yang Sedang Saya Kerjakan
*Terakhir diperbarui: $CURRENT_DATE*
Halaman ini terinspirasi dari [nownownow.com](https://nownownow.com) — tempat saya mencatat apa yang sedang saya fokuskan saat ini.
---
$CONTENT
---
> *Halaman ini adalah snapshot dari kehidupan saya saat ini. Bukan resume, bukan portofolio — hanya update jujur tentang apa yang sedang saya kerjakan.*
EOF
echo "✅ Updated: $FILE"
verify_index (Verify Content)Verify content auto-import statistics.
BLOG_ROOT="/home/hades/BangunAI-Blog"
echo "📊 Content Statistics:"
echo ""
echo "Writing posts: $(ls -1 "$BLOG_ROOT/src/content/writing"/*.mdx 2>/dev/null | wc -l)"
echo "Articles: $(ls -1 "$BLOG_ROOT/src/content/articles"/*.mdx 2>/dev/null | wc -l)"
echo "Read items: $(ls -1 "$BLOG_ROOT/src/content/read"/*.mdx 2>/dev/null | wc -l)"
echo "Daily notes: $(ls -1 "$BLOG_ROOT/src/content/daily"/*.mdx 2>/dev/null | wc -l)"
echo ""
echo "Special files:"
echo "- about.mdx: $(test -f "$BLOG_ROOT/src/content/about.mdx" && echo "✅" || echo "❌")"
echo "- now.mdx: $(test -f "$BLOG_ROOT/src/content/now.mdx" && echo "✅" || echo "❌")"
echo "- index.ts: $(test -f "$BLOG_ROOT/src/content/index.ts" && echo "✅" || echo "❌")"
| Category | Path | Use Case | Type Options | Examples |
|---|---|---|---|---|
writing | src/content/writing/ | Personal notes, essays | note, essay | Reflections, quick takes, deep thoughts |
articles | src/content/articles/ | Technical tutorials, guides | article | How-to guides, technical deep dives |
read | src/content/read/ | Reading notes, link curation | N/A (special format) | Curated articles, bookmarks |
daily | src/content/daily/ | Daily notes, tasks, logs | daily | Task tracking, daily logs |
about | src/content/about.mdx | About page (static) | N/A | Personal bio, site info |
now | src/content/now.mdx | Current activities | N/A | What I'm doing now |
Choose wisely untuk category field:
Tech — Teknologi, programming, tools, frameworksRefleksi — Personal reflection, thoughts, philosophyProduktivitas — Productivity tips, workflow, GTDLinux — Linux, terminal, system administrationCoding — Coding practices, patterns, best practicesLife — Lifestyle, personal experiences, storiesDO:
title: "Belajar React Hooks di 2026"
slug: belajar-react-hooks-2026
type: note
category: Tech
tags: [react, hooks, javascript]
date: "2026-02-12T15:30:00"
DON'T:
title: belajar-react-hooks # Missing quotes
slug: Belajar React Hooks # Not kebab-case
type: blog # Invalid type
category: technology # Typo/wrong value
tags: React, Hooks # Not array format
date: "2026-02-12" # Missing time
DO:
belajar-react-hooks-2026.mdx
setup-neovim-lua.mdx
refleksi-tahun-2025.mdx
DON'T:
Blog Post 1.mdx # Spaces, not descriptive
temp.mdx # Non-descriptive
NEW_POST.mdx # Uppercase, underscore
Recommended structure:
---
frontmatter here
---
## Introduction (H2)
Brief intro, hook the reader.
<Callout type="info">
Context or prerequisite info.
</Callout>
## Main Section 1 (H2)
### Subsection A (H3)
Content...
### Subsection B (H3)
Content...
## Main Section 2 (H2)
### Examples (H3)
Code or examples...
## Conclusion (H2)
Summary and takeaways.
DO:
<Callout type="tip" title="Pro Tip">
Use semantic components for better UX.
</Callout>
<WikiLink to="related-article" label="Read more about this" />
DON'T:
<div style="background: yellow; padding: 10px;">
Hardcoded styling instead of using Callout
</div>
<a href="/artikel/related-article">Read more</a>
<!-- Should use WikiLink instead -->
ISO timestamp with time:
date: "2026-02-12T15:30:00" # YYYY-MM-DDTHH:mm:ss
Displayed as:
11 Februari 2026, 14:3011 Feb · 14:30# Count words (exclude frontmatter)
WORD_COUNT=$(tail -n +$(grep -n "^---$" file.mdx | tail -1 | cut -d: -f1) file.mdx | wc -w)
# Calculate reading time (200 words/minute)
READING_TIME=$(( (WORD_COUNT + 199) / 200 ))
# Add to frontmatter
readingTime: $READING_TIME
Good tags:
tags: [react-hooks, typescript, state-management]
Bad tags:
tags: [React Hooks, programming, stuff]
# Start dev server
cd /home/hades/BangunAI-Blog
bun run dev
# Open http://localhost:8080
Fetch style reference:
CATEGORY="writing" bash fetch_last.sh
Create new file:
cat > src/content/writing/new-post.mdx <<'EOF'
---
title: "New Post"
slug: new-post
summary: "Brief summary"
type: note
category: Tech
tags: [tag1, tag2]
date: "$(date -Iseconds)"
readingTime: 5
---
Content here...
EOF
Verify auto-import:
# File otomatis terdeteksi via import.meta.glob
# Check di browser: http://localhost:8080/writing
Build & deploy:
bun run build
bun run preview
# Add new content
git add src/content/writing/new-post.mdx
git commit -m "Add: new blog post about X"
# Rename (preserve history)
git mv src/content/writing/old.mdx src/content/writing/new.mdx
git commit -m "Rename: old post to new name"
# Delete (tracked)
git rm src/content/writing/unwanted.mdx
git commit -m "Remove: unwanted post"
# Push
git push origin main
Check:
Check:
Reason: Target slug not found
Fix:
Check:
$ or $$ delimiters correctly?Writing/Articles:
---
title: "Title"
slug: slug
summary: "Summary"
type: note|essay|article
category: Tech|Refleksi|Produktivitas|Linux|Coding|Life
tags: [tag1, tag2]
date: "YYYY-MM-DDTHH:mm:ss"
readingTime: number
---
Read:
---
title: "Title"
slug: slug
snippet: "Snippet"
source: "domain.com"
url: "https://..."
tags: [tag1, tag2]
date: "YYYY-MM-DDTHH:mm:ss"
---
Special Pages:
---
title: "About|Now"
---
| Component | Usage |
|---|---|
| Callout | <Callout type="info" title="...">...</Callout> |
| Mermaid | ```mermaid ... ``` |
| LaTeX | $...$ or $$...$$ |
| WikiLink | <WikiLink to="slug" label="..." /> |
| Highlight | <Highlight>...</Highlight> |
| YouTube | <YouTube url="..." title="..." /> |
| Type | Location |
|---|---|
| Writing | src/content/writing/*.mdx |
| Articles | src/content/articles/*.mdx |
| Read | src/content/read/*.mdx |
| Daily | src/content/daily/*.mdx |
| About | src/content/about.mdx |
| Now | src/content/now.mdx |
| Index | src/content/index.ts |
Skill ini fully integrated dengan BangunAI Blog:
import.meta.globHomepage: https://github.com/dwirx/BangunAI-Blog