Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions .github/workflows/skill-review.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
name: Skill Review
on:
pull_request:
paths: ['**/SKILL.md']
jobs:
review:
runs-on: ubuntu-latest
permissions:
pull-requests: write
contents: read
steps:
- uses: actions/checkout@v4
- uses: tesslio/skill-review@22e928dd837202b2b1d1397e0114c92e0fae5ead # main
102 changes: 65 additions & 37 deletions claude2opencode-skill/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,74 @@
# Claude2OpenCode Skill
---
name: opencode-migrator
description: "Convert Claude Code project configurations to OpenCode format. Use when the user wants to migrate, port, or switch a Claude Code project to OpenCode β€” including .claude directories, CLAUDE.md files, MCP server settings, agents, commands, and skills. Handles configuration migration of project settings into the OpenCode directory layout."
---

Convert Claude Code project configurations to OpenCode format.
# Claude2OpenCode Migration

## Description
## Workflow

This skill provides a migration toolkit for converting Claude Code project configurations (.claude directory, CLAUDE.md, MCP settings) to OpenCode format.
1. **Analyze existing configuration** β€” The agent scans the project root for Claude Code artifacts:

## Usage
```bash
# Identify all Claude Code config files in the current project
ls -la .claude/ CLAUDE.md .claude/CLAUDE.md .claude/agents/ .claude/commands/ .claude/skills/ 2>/dev/null
# Check for MCP server definitions
cat .claude/settings.json 2>/dev/null | grep -A5 '"mcpServers"'
```

```bash
# Load the skill
/skill claude2opencode
2. **Run migration** β€” Execute the migration script targeting the desired output format:

# Run the migration
python3 ~/.claude/tools/migrate_claude_project.py --target opencode --project-root .
```
```bash
# Migrate to OpenCode format (default)
python3 ~/.claude/tools/migrate_claude_project.py --target opencode --project-root .

# Or migrate to Codex-friendly markdown bundle
python3 ~/.claude/tools/migrate_claude_project.py --target codex --project-root .
```

3. **Validate output** β€” Confirm the migration produced the expected directory structure:

```bash
# Verify output directory was created
ls -R .migration_out/opencode/

# Check the OpenCode config is valid JSON
python3 -c "import json; json.load(open('.migration_out/opencode/opencode.jsonc'))" 2>&1 || echo "WARN: jsonc may need manual review"

# Confirm AGENTS.md was generated from CLAUDE.md
head -20 .migration_out/opencode/AGENTS.md
```

4. **Review migration report** β€” Read the generated report for any items requiring manual follow-up:

## What It Migrates
```bash
cat .migration_out/opencode/MIGRATION_REPORT.md
```

- **CLAUDE.md / .claude/CLAUDE.md** β†’ AGENTS.md (project rules)
- **Agents** (.claude/agents/) β†’ OpenCode prompts
- **Commands** (.claude/commands/) β†’ OpenCode commands
- **Skills** (.claude/skills/) β†’ OpenCode instructions
- **MCP Servers** (settings.json, mcp*.json) β†’ MCP.md with setup instructions
5. **Verify key files** β€” Spot-check that critical mappings transferred correctly:

## Supported Targets
```bash
# Check manifest for complete file mapping
python3 -c "
import json
m = json.load(open('.migration_out/opencode/manifest.json'))
for src, dst in m.items():
print(f'{src} β†’ {dst}')
"

| Target | Description |
|--------|-------------|
| `opencode` | Full OpenCode format with `.opencode.jsonc` configuration |
| `codex` | Codex-friendly markdown bundle for manual integration |
# Confirm MCP server instructions were captured
head -30 .migration_out/opencode/MCP.md
```

## Migration Mapping

| Source (Claude Code) | Destination (OpenCode) |
|---|---|
| `CLAUDE.md` / `.claude/CLAUDE.md` | `AGENTS.md` (project rules) |
| `.claude/agents/` | `.opencode/prompts/` |
| `.claude/commands/` | `.opencode/command/` |
| `.claude/skills/` | `.opencode/instructions/skills/` |
| `settings.json` / `mcp*.json` | `MCP.md` (setup instructions) |

## Output Structure

Expand All @@ -49,18 +88,7 @@ python3 ~/.claude/tools/migrate_claude_project.py --target opencode --project-ro

## Safety Features

- **Non-destructive**: Never deletes original files
- **No overwrites**: Creates numbered output directories if target exists
- **Full traceability**: Manifest tracks every generated file back to its source
- **Clear reporting**: Migration report documents all decisions and required follow-ups

## Requirements

- Python 3.8+
- Claude Code CLI with subagent support

## Files

- `migrate_claude_project.py` - Core migration script
- `migrate_project.md` - Agent definition
- `migrate.md` - Command shortcut
- **Non-destructive**: The migration never deletes or modifies original files.
- **No overwrites**: Numbered output directories are created if the target path already exists.
- **Full traceability**: The manifest tracks every generated file back to its source.
- **Clear reporting**: The migration report documents all decisions and required follow-ups.
81 changes: 41 additions & 40 deletions graph-visualizer/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
name: graph-visualizer
description: >
Builds a fully 3D interactive goal-graph visualization as a self-contained HTML file using Three.js. Use this skill whenever the user wants to visualize a goal, system, workflow, or project as an animated directed graph β€” with a 3D space background, glowing floating nodes, an animated pulse traveling the loop, and a collapsible constraints sidebar. Trigger when the user says things like "create a graph for my goal", "visualize my system as a graph", "build a 3D graph app", "show my workflow as a graph", or "make an interactive graph visualization". Parses natural language description of nodes, edges, weights, and constraints, and produces THREE distinct production-grade Three.js HTML files with different aesthetics.
description: "Builds a fully 3D interactive goal-graph visualization as a self-contained HTML file using Three.js. Use this skill whenever the user wants to visualize a goal, system, workflow, or project as an animated directed graph β€” with a 3D space background, glowing floating nodes, an animated pulse traveling the loop, and a collapsible constraints sidebar. Trigger when the user says things like 'create a graph for my goal', 'visualize my system as a graph', 'build a 3D graph app', 'show my workflow as a graph', or 'make an interactive graph visualization'. Parses natural language description of nodes, edges, weights, and constraints, and produces THREE distinct production-grade Three.js HTML files with different aesthetics."
---

# Graph Visualizer β€” Three.js Build Guide
Expand Down Expand Up @@ -53,6 +52,15 @@ Before any code, commit to 3 fully distinct aesthetic directions. Name them. Exa

Each variant gets its own HTML file. The graph data (nodes, edges, constraints) is identical β€” only the visual treatment changes.

**Per-variant specifications** β€” all variant-specific values throughout this skill come from this table:

| Element | Variant A (cosmic) | Variant B (terminal) | Variant C (warm) |
|---------|-------------------|---------------------|------------------|
| Stars | white, 3 dark-blue/purple nebula shells | green-tinted `0x88ffaa`, no nebula β€” pure black void | warm cream `0xffe8c0`, soft amber nebula shells |
| Node shape | BoxGeometry (sharp, geometric) | BoxGeometry extreme aspect ratio (wide/flat) | CylinderGeometry (rounded pill, laid flat) |
| Pulse color | cyan `0x6ee7f7` | bright green `0x39ff14` | amber/gold `0xfbbf24` |
| Lighting | themed ambient + key light colors per mood | themed ambient + key light colors per mood | themed ambient + key light colors per mood |

---

## Step 3 β€” Three.js scene setup (same for all variants, from `threejs-fundamentals`)
Expand Down Expand Up @@ -80,12 +88,9 @@ controls.maxDistance = 40;

## Step 4 β€” Starfield background (from `threejs-geometry`)

~800 `THREE.Points` placed in a sphere of radius 60–80. Slowly rotate each frame.
~800 `THREE.Points` placed in a sphere of radius 60–80. Slowly rotate each frame. Apply variant-specific star colors and nebula settings.

**Vary the starfield per variant:**
- Variant A: white stars, 3 dark-blue/purple nebula shells
- Variant B: green-tinted stars (color: 0x88ffaa), no nebula shells β€” pure black void
- Variant C: warm cream stars (color: 0xffe8c0), soft amber nebula shells
**Checkpoint:** Open the HTML β€” verify the starfield renders on a blank canvas before proceeding to nodes.

---

Expand All @@ -105,15 +110,14 @@ function nodePosition(node) {

---

## Step 6 β€” Node meshes: VISIBILITY IS CRITICAL (from `threejs-materials`)
## Visibility Rules (referenced by Steps 6 and 7)

**The #1 visibility problem in past versions: nodes were near-black with low emissive β€” impossible to read.**
Past versions suffered from near-invisible nodes and edges on dark backgrounds. Apply these rules to all scene elements:

Fix with these rules:
1. **Base color must NOT be near-black.** Use at minimum 15–25% lightness. E.g. `0x1a2a3a` not `0x020408`.
2. **emissiveIntensity must be 1.0–2.5** (not 0.3–0.5). Nodes should visibly glow.
3. **Add a visible border/outline**: Create a slightly larger `BoxGeometry` behind each node with an emissive outline material, scaled by 1.05. This creates a visible glowing edge.
4. **Labels must be large and bright**: canvas size 512Γ—128, font size 38–44px, white fill, with a subtle dark shadow behind the text for contrast.
- **Base colors must NOT be near-black.** Use at minimum 15–25% lightness. E.g. `0x1a2a3a` not `0x020408`.
- **emissiveIntensity for nodes: 1.0–2.5** (not 0.3–0.5). Nodes should visibly glow.
- **Edge opacity: 0.7–0.9** for normal edges (not 0.45). Edge color must contrast the background.
- **Labels must be large and bright**: canvas size 512Γ—128, font size 38–44px, white fill, dark shadow for contrast.

```javascript
// CORRECT β€” high visibility node
Expand All @@ -123,6 +127,20 @@ Fix with these rules:
{ color: 0x080820, emissive: 0x4466ff, emissiveIntensity: 0.3, roughness: 0.6, metalness: 0.1 }
```

```javascript
// CORRECT β€” visible edge
new THREE.MeshBasicMaterial({ color: 0x1a5a8a, transparent: true, opacity: 0.75 })

// WRONG β€” invisible edge
new THREE.MeshBasicMaterial({ color: 0x1a3a4a, transparent: true, opacity: 0.45 })
```

---

## Step 6 β€” Node meshes (from `threejs-materials`)

Follow **Visibility Rules** above for all node materials and labels. Add a visible border/outline: create a slightly larger geometry behind each node with an emissive outline material, scaled by 1.05.

**Node sizes by weight:**
- `large`: 2.2 Γ— 0.6 Γ— 0.4
- `medium`: 1.8 Γ— 0.55 Γ— 0.4
Expand All @@ -138,29 +156,15 @@ outline.position.z -= 0.05;
scene.add(outline);
```

**Vary node shapes per variant:**
- Variant A: BoxGeometry (sharp, geometric)
- Variant B: BoxGeometry with extreme aspect ratio (wide and flat, terminal-style)
- Variant C: Use a `CylinderGeometry(w/2, w/2, h, 32)` (rounded pill, laid flat)

---
Vary node shapes per variant.

## Step 7 β€” Edges as tubes: VISIBILITY IS CRITICAL (from `threejs-geometry`)
**Checkpoint:** Open the HTML β€” confirm all nodes are clearly visible against the background and labels are readable before adding edges.

**The #2 visibility problem: edges at opacity 0.45 on dark background are near-invisible.**
---

Fix:
1. **opacity must be 0.7–0.9** for normal edges
2. **Edge color should be light/bright enough to contrast the background**, not match it.
3. Use the variant's accent color for edges (same hue as node glow but slightly desaturated)
## Step 7 β€” Edges as tubes (from `threejs-geometry`)

```javascript
// CORRECT
new THREE.MeshBasicMaterial({ color: 0x1a5a8a, transparent: true, opacity: 0.75 })

// WRONG β€” invisible
new THREE.MeshBasicMaterial({ color: 0x1a3a4a, transparent: true, opacity: 0.45 })
```
Follow **Visibility Rules** above for all edge materials. Use the variant's accent color for edges (same hue as node glow but slightly desaturated).

Tube radius: `0.035` (not 0.025 β€” thicker is more visible).

Expand All @@ -179,12 +183,7 @@ Pulse sphere: `SphereGeometry(0.14, 16, 16)` β€” slightly larger than before (0.
new THREE.MeshStandardMaterial({ color: accentColor, emissive: accentColor, emissiveIntensity: 4.0 })
```

4–5 trail ghosts, decreasing size and emissiveIntensity. Loop duration: 8 seconds.

**Vary pulse color per variant:**
- Variant A: cyan `0x6ee7f7`
- Variant B: bright green `0x39ff14`
- Variant C: amber/gold `0xfbbf24`
4–5 trail ghosts, decreasing size and emissiveIntensity. Loop duration: 8 seconds. Apply variant-specific pulse colors.

---

Expand All @@ -210,7 +209,9 @@ key.position.set(0, 6, 12);
scene.add(key);
```

**Vary lighting per variant** β€” different ambient and key light colors to set mood.
Vary ambient and key light colors per variant to set mood.

**Checkpoint:** After adding bloom and lighting, verify the bloom effect is active β€” emissive nodes should have a visible glow halo in the rendered output.

---

Expand Down
Loading