opencodekit 0.15.1 → 0.15.2

package/dist/template/.opencode/skill/skill-creator/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: skill-creator
+description: Guide for creating effective skills. Use when creating a new skill or updating an existing skill that extends an agent's capabilities with specialized knowledge, workflows, or tool integrations.
+---
+
+# Skill Creator
+
+Guide for creating effective skills that extend agent capabilities.
+
+> **CRITICAL: YAML FRONTMATTER REQUIRED**
+> Every SKILL.md **MUST** begin with YAML frontmatter on line 1.
+>
+> ```yaml
+> ---
+> name: skill-name
+> description: One-line description of what this skill does
+> ---
+> ```
+
+## What Skills Provide
+
+1. **Specialized workflows** - Multi-step procedures for specific domains
+2. **Tool integrations** - Instructions for working with specific file formats or APIs
+3. **Domain expertise** - Company-specific knowledge, schemas, business logic
+4. **Bundled resources** - Scripts, references, and assets for complex tasks
+
+## Skill Structure
+
+```
+skill-name/
+├── SKILL.md (required)
+│   ├── YAML frontmatter (name, description)
+│   └── Markdown instructions
+└── Bundled Resources (optional)
+    ├── scripts/          - Executable code (Python/Bash/etc.)
+    ├── references/       - Documentation loaded as needed
+    └── assets/           - Files used in output (templates, icons)
+```
+
+## Requirements
+
+- `SKILL.md` should be **less than 200 lines**
+- Use `references/` for detailed documentation
+- Each script or reference file also **less than 200 lines**
+- Descriptions must be specific about WHEN to use the skill
+
+## SKILL.md Format
+
+**REQUIRED - DO NOT SKIP**
+
+```yaml
+---
+name: skill-name
+description: What this skill does and when to use it. Use third-person.
+---
+```
+
+**Required fields:**
+
+- `name` — hyphen-case identifier matching directory name
+- `description` — activation trigger; be specific about WHEN to use
+
+**Optional fields:**
+
+```yaml
+---
+name: skill-name
+description: What this skill does and when to use it.
+references:
+  - references/guide.md
+  - references/api.md
+license: Apache-2.0
+---
+```
+
+**INVALID - Do NOT use:**
+
+- XML-style tags (`<purpose>`, `<references>`)
+- Missing `---` delimiters
+- Frontmatter that doesn't start at line 1
+
+## Bundled Resources
+
+### Scripts (`scripts/`)
+
+- When the same code is being rewritten repeatedly
+- When deterministic reliability is needed
+- Prefer Node.js or Python over Bash (Windows support)
+
+### References (`references/`)
+
+- Documentation that agent should reference while working
+- Database schemas, API docs, domain knowledge
+- If files are large (>10k words), include grep patterns in SKILL.md
+
+### Assets (`assets/`)
+
+- Files used in the final output (not loaded into context)
+- Templates, images, icons, boilerplate code
+
+## Progressive Disclosure
+
+Skills use three-level loading:
+
+1. **Metadata (name + description)** - Always in context (~100 words)
+2. **SKILL.md body** - When skill triggers (<5k words)
+3. **Bundled resources** - As needed by agent (Unlimited)
+
+## Skill Creation Process
+
+### Step 1: Understand with Examples
+
+- "What functionality should the skill support?"
+- "Can you give examples of how this would be used?"
+- "What would a user say that should trigger this skill?"
+
+### Step 2: Plan Reusable Contents
+
+For each example, identify:
+
+- What scripts would be helpful to store?
+- What references/documentation needed?
+- What assets/templates needed?
+
+### Step 3: Create the Skill
+
+```bash
+mkdir -p .opencode/skill/my-skill
+touch .opencode/skill/my-skill/SKILL.md
+```
+
+### Step 4: Edit SKILL.md
+
+Answer these questions:
+
+1. What is the purpose of the skill?
+2. When should it be used?
+3. How should the agent use it?
+
+### Step 5: Iterate
+
+1. Use the skill on real tasks
+2. Notice struggles or inefficiencies
+3. Update SKILL.md or bundled resources
+4. Test again
+
+## Pre-Submission Checklist
+
+- [ ] **SKILL.md starts with `---`** (YAML frontmatter, line 1)
+- [ ] **`name:` field present** and matches directory name
+- [ ] **`description:` field present** with specific activation triggers
+- [ ] **Closing `---`** after frontmatter
+- [ ] **No XML-style tags**
+- [ ] **SKILL.md under 200 lines**
+- [ ] **All referenced files exist**

package/dist/template/.opencode/skill/ui-ux-research/SKILL.md

@@ -121,5 +121,5 @@ Save research findings to `.opencode/memory/design/research/`
 | After Research              | Use Skill             |
 | --------------------------- | --------------------- |
 | Need implementation         | `mockup-to-code`      |
-| Need aesthetic improvements | `frontend-aesthetics` |
+| Need aesthetic improvements | `frontend-design` |
 | Need accessibility fixes    | `accessibility-audit` |

package/dist/template/.opencode/skill/visual-analysis/SKILL.md

@@ -132,4 +132,4 @@ Save findings to `.opencode/memory/design/analysis/`
 | Found accessibility issues  | `accessibility-audit` |
 | Need to implement design    | `mockup-to-code`      |
 | Want design tokens          | `design-system-audit` |
-| Need aesthetic improvements | `frontend-aesthetics` |
+| Need aesthetic improvements | `frontend-design` |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencodekit",
-	"version": "0.15.1",
+	"version": "0.15.2",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"keywords": ["agents", "cli", "mcp", "opencode", "opencodekit", "template"],
 	"license": "MIT",

package/dist/template/.opencode/skill/frontend-aesthetics/SKILL.md

@@ -1,117 +0,0 @@
----
-name: frontend-aesthetics
-description: Use when building landing pages, dashboards, forms, or any frontend generation task where you need to prevent generic "AI slop" and create distinctive, intentional designs
----
-
-# Frontend Aesthetics Skill
-
-Prevent generic "AI slop" frontends. Create distinctive, intentional designs.
-
-## When to Use
-
-- Building landing pages, dashboards, forms, components
-- Any frontend generation task
-- Reviewing UI for visual quality
-
-## Decision Gate (Do First)
-
-Before writing code, state:
-
-1. **Aesthetic direction** — Which style?
-2. **Why** — How does it fit the context?
-
-## Aesthetic Directions
-
-Pick ONE (or combine 2):
-
-| Direction        | Character                                       |
-| ---------------- | ----------------------------------------------- |
-| Neo-Brutalist    | Raw textures, bold type, harsh contrasts        |
-| Soft Minimalism  | Muted palettes, generous whitespace             |
-| Retro-Futuristic | CRT effects, scan lines, neon                   |
-| Editorial        | Dynamic grids, mixed media, bold type           |
-| Glass Morphism   | Translucent layers, backdrop blur, depth        |
-| Dark Academia    | Rich textures, serif type, scholarly            |
-| Swiss Design     | Grid systems, sans-serif, functional            |
-| Art Deco         | Geometric patterns, gold accents, luxury        |
-| Y2K Revival      | Gradients, metallics, early-web nostalgia       |
-| Organic/Natural  | Flowing shapes, nature palettes, paper textures |
-
-## Typography
-
-**Good choices:**
-
-- Code/Tech: JetBrains Mono, Fira Code, Space Mono
-- Editorial: Playfair Display, Crimson Pro, Instrument Serif
-- Display: Bebas Neue, Oswald, Archivo Black
-- Technical: IBM Plex, Source Sans 3, Work Sans
-- Distinctive: Bricolage Grotesque, Syne, Outfit
-
-**Avoid:** Inter, Roboto, Arial, system fonts without purpose
-
-**Pairing:** High contrast = interesting. Display + monospace, serif + geometric sans.
-
-**Weight:** Use extremes (100/200 vs 800/900), not middle (400 vs 600).
-
-## Color Anti-Patterns
-
-**Avoid:**
-
-- Purple/blue gradient backgrounds
-- #6366F1 or #667eea as primary
-- Flat white backgrounds
-
-**Do:**
-
-- Commit to cohesive theme
-- Use CSS variables
-- Dominant colors with sharp accents
-
-## Animation Pattern
-
-One orchestrated entrance beats scattered effects:
-
-```css
-@keyframes revealUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-}
-
-.hero > * {
-  animation: revealUp 800ms cubic-bezier(0.19, 1, 0.22, 1) both;
-}
-.hero > *:nth-child(1) {
-  animation-delay: 0ms;
-}
-.hero > *:nth-child(2) {
-  animation-delay: 80ms;
-}
-.hero > *:nth-child(3) {
-  animation-delay: 160ms;
-}
-```
-
-## AI Slop Signature (Never Do ALL Together)
-
-- Purple/blue gradient backgrounds
-- Inter or system fonts
-- Centered hero with subheading
-- 3-column feature cards with icons
-- Rounded corners on everything (16px)
-- Drop shadows on all cards
-- "Modern, clean, simple" as only descriptors
-
-## Quality Check
-
-Before delivery:
-
-- [ ] Clear aesthetic point of view?
-- [ ] Avoids ALL items in the AI slop list?
-- [ ] Would someone remember this tomorrow?
-- [ ] Responsive, accessible, performs well?
-
-## Storage
-
-Save design decisions to `.opencode/memory/design/aesthetics/`