Automating OpenCode Skills: Installing a 17-Skill Ecosystem

The Problem

A powerful AI coding assistant is only as good as its configured skills. Without a systematic approach to skill installation and management, you end up with:

• Skills installed in inconsistent locations
• No documentation of what's available or how to use each skill
• Duplicate or conflicting configurations
• No standardized process for creating new skills

The Approach

I designed a dual-path skill management system:

1. Global + Local Installation

Skills are installed in two locations for maximum flexibility:

• Global path (C:\Users\Sana\.config\opencode\skills\) — for skills that should be available across all projects
• Vault-local path (.opencode/skills/) — for project-specific skills

This separation means common skills are shared globally while project-specific skills stay contained.

2. The html-reports Custom Skill

The crown jewel of this session was building a custom HTML report generation skill from scratch. The skill encapsulates:

• Premium CSS patterns researched from 20+ professional report designs
• Print-to-PDF workflow using browser-native printing (no Puppeteer dependency — saves ~300MB+)
• Color system based on the 60-30-10 rule with WCAG AA compliance
• Font integration via Google Fonts (Roboto Thin/Light for clean typography)

3. Comprehensive Reference Documentation

Created three detailed reference documents with Obsidian callouts, tables, and code examples:

30_Resources/
├── Skills Reference.md        (486 lines - complete skill catalog)
├── HTML Reports & Creation Skills.md
└── (workflow docs for docx, xlsx, pptx skills)

The Skill Palette

The final ecosystem spans 17 skills across categories:

Category	Skills
AI & LLM	brainstorming, critique, copywriting
Document Processing	docx, xlsx, pptx
Development	html-reports (custom), debugging, code-review
Workflow	workflow-builder, project-management
Communication	meeting-notes, email-drafting, summarization

Design Standards Applied

Every report generated by the html-reports skill follows these rules:

/* 60-30-10 Color Rule */
--primary:   #1E2761;  /* 60% - dominant */
--secondary: #CADCFC;  /* 30% - supporting */
--accent:    #F96167;  /* 10% - emphasis */

/* Typography */
font-family: 'Roboto', sans-serif;
font-weight: 100; /* Thin for headings = consistency */

Key Results

• 17 skills installed and fully documented
• Custom html-reports skill with premium CSS patterns, no Puppeteer dependency
• Dual-path installation (global + vault-local) for maximum flexibility
• 3 reference documents created with formatted Obsidian callouts
• 0mem tracking active — all sessions logged in 0mem/CONTEXT/, skills marked as READY

Takeaways

1. Systematize early. A documented skill ecosystem prevents configuration drift and makes onboarding trivial.
2. Custom skills are powerful. The html-reports skill encapsulates an entire workflow in a reusable package.
3. Avoid unnecessary dependencies. Print-to-PDF via browser is simpler, smaller, and safer than Puppeteer.
4. Document as you go. 486 lines of reference documentation was created during the session, not after.