Studio E2E Tests
supabase/supabase
Write and run Playwright E2E tests for Supabase Studio (e2e/studio).
Auto-sync GitHub repos to portfolio website. An agent skill from EliasOulkadi/shokunin.
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install EliasOulkadi/shokunin portfolio-auto --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.pack/skills/portfolio-auto .claude/skills/portfolio-auto && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .claude/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-autoType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install EliasOulkadi/shokunin portfolio-auto --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.pack/skills/portfolio-auto .agents/skills/portfolio-auto && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .agents/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install EliasOulkadi/shokunin portfolio-auto --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.pack/skills/portfolio-auto .cursor/skills/portfolio-auto && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .cursor/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/EliasOulkadi/shokunin.git --path .pack/skills/portfolio-auto--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install EliasOulkadi/shokunin portfolio-auto --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.pack/skills/portfolio-auto .gemini/skills/portfolio-auto && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .gemini/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install EliasOulkadi/shokunin portfolio-autoInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .github/skills && cp -r skills-src/.pack/skills/portfolio-auto .github/skills/portfolio-auto && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .github/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install EliasOulkadi/shokunin portfolio-auto --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/EliasOulkadi/shokunin.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.pack/skills/portfolio-auto .opencode/skills/portfolio-auto && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "portfolio-auto" agent skill from https://github.com/EliasOulkadi/shokunin/tree/master/.pack/skills/portfolio-auto into .opencode/skills/portfolio-auto/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-auto", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
portfolio-autoAuto-sync GitHub repos to portfolio website. An agent skill from EliasOulkadi/shokunin.
Portfolio Auto is an agent skill from EliasOulkadi/shokunin. Auto-sync GitHub repos to portfolio website. Scans GitHub repos, captures screenshots with Playwright, generates project entries, and updates projects-data.js or Supabase DB. Use when user asks to "update portfolio", "sync projects", "add my repos to portfolio", or "refresh portfolio projects". Do NOT use for one-time project additions — batch sync only.
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: opencode
It sits in Testing & QA, covering Browser testing. It works with GitHub, Playwright and Supabase. The repository describes itself as: 職人 Shokunin 62 AI agent skills for OpenCode, Claude Code, Cursor, Windsurf. ChromaDB memory, MCP servers, declarative self-updates. Multi-model, open source, zero cost. The licence is MIT.
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 4c68e5b. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
api.github.comFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
GITHUB_TOKENFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
opencode
From compatibility in the SKILL.md frontmatter.
Portfolio Auto loads about 2.6k tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 891 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from EliasOulkadi/shokunin at commit 4c68e5b, republished under its MIT licence (© EliasOulkadi). 891 words, ~2,611 tokens.
.claude/skills/portfolio-auto/SKILL.md (or your agent's skills folder).Note:
last-sync.jsonstate file is auto-created on first successful sync. Ignore "missing file" warnings on first run.
Automatically sync GitHub repositories to your portfolio website.
Ask the user:
static (projects-data.js) or supabase (API)GET /users/{username}/repos?per_page=100&sort=updated&direction=descExtract: name, description, html_url, homepage, language, topics, updated_at
Filter out:
{username}/{username})Compare against last-sync.json (stored in skill directory).
updated_at changed → re-screenshotFor repos with a homepage or deploy URL:
const { chromium } = require('playwright');
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto(process.env.URL, { waitUntil: 'networkidle', timeout: 15000 });
await page.screenshot({ path: `/tmp/portfolio-${name}.png`, fullPage: false });
await browser.close();Save to portfolio's screenshot directory.
{
title: '{repo.name}',
description: 'Auto-generated: {description}',
tech: '{language},{topics}',
github_url: '{html_url}',
live_url: '{homepage || ""}',
featured: false
}const res = await fetch('https://your-site.com/api/projects', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer {token}' },
body: JSON.stringify(projectData)
});{
"lastSync": "2026-05-12T18:30:00Z",
"repos": {
"example-repo": { "updated_at": "2026-04-20T10:00:00Z", "screenshot": true }
}
}Sync complete:
+ 2 new (Cyberian, Image Enhancer)
+ 1 screenshot captured
+ 1 updated (Portfolio)
- 0 errorsfeatured: true on existing projects — only user can promote.| Cause | Fix |
|---|---|
| GitHub API returns 401 Unauthorized | No token or expired token. Set GITHUB_TOKEN environment variable. Generate a new Personal Access Token at github.com/settings/tokens with public_repo scope. |
| GitHub API rate limit exceeded (403) | Unauthenticated requests are limited to 60/hour. Authenticated: 5000/hour. Add token. If already authenticated, wait for reset (check X-RateLimit-Reset header). |
Repository has no homepage field and no deploy URL | Cannot capture a screenshot. Mark the repo as "no live preview" in the output. Use the GitHub URL as fallback link. |
| Playwright browser fails to launch | Chromium not installed. Run npx playwright install chromium. On headless server, add --no-sandbox flag: chromium.launch({ headless: true, args: ['--no-sandbox'] }). |
| Screenshot URL returns 404 or times out after 15s | Deploy URL is stale or site is down. Skip screenshot for this repo. Log the URL and error to a failed-screenshots.json file for manual review. |
projects-data.js has custom formatting that auto-generation would break | A regex-based insert could corrupt handwritten code. Read the file first to detect non-standard structure. If detected, append a comment block with the new entries and ask user to merge manually. |
| Supabase API insert fails with foreign key or schema constraint | Portfolio schema might differ from the auto-generated payload shape. Read the Supabase table schema first. Map fields explicitly (not spread operator). Validate with a dry-run POST that returns 200 before committing. |
last-sync.json is corrupted or manually edited | Parse as JSON in a try-catch. On failure, rename to last-sync.json.bak and start fresh sync from scratch. Warn user that incremental detection is lost. |
import requests, os
headers = {"Authorization": f"token {os.environ['GITHUB_TOKEN']}"}
# Fetch all repos (paginated)
repos = []
page = 1
while True:
r = requests.get(f"https://api.github.com/user/repos?per_page=100&page={page}&sort=updated", headers=headers)
batch = r.json()
if not batch: break
repos.extend(batch)
page += 1
# Filter: only non-fork, non-archived, has description
candidates = [r for r in repos if not r["fork"] and not r["archived"] and r["description"]]X-RateLimit-Remaining header.If-None-Match with ETag)from playwright.sync_api import sync_playwright
def capture(url, output_path):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1280, "height": 800})
page.goto(url, timeout=15000, wait_until="networkidle")
page.screenshot(path=output_path, full_page=False)
browser.close()import hashlib, json, os
cache_file = ".sync-cache.json"
cache = json.load(open(cache_file)) if os.path.exists(cache_file) else {}
for repo in repos:
key = hashlib.md5(f"{repo['full_name']}:{repo['pushed_at']}".encode()).hexdigest()
if cache.get(repo['full_name']) == key:
continue # Skip: no changes since last sync
# ... capture screenshot, update entry ...
cache[repo['full_name']] = key
json.dump(cache, open(cache_file, 'w'))fs module documentation (nodejs.org/api/fs.html) — file read/write with atomic rename for sync state safety| Pattern | Problem | Fix |
|---|---|---|
| Syncing without checking for existing customizations | Auto-generated entries may overwrite handcrafted project descriptions, featured flags, or custom ordering set by the user. | Read the target file first. Detect non-standard structure. For featured: true entries, preserve all fields. Only upsert new or changed repos. |
| Capturing screenshots for every repo indiscriminately | Repos without live demos waste Playwright launch time (~3s each). Repos with broken URLs produce useless error screenshots. | Pre-filter: only screenshot repos where homepage field is non-empty and returns 200 on a HEAD request. |
| Running sync on a metered or slow connection | Cloning or screenshotting dozens of repos can consume significant bandwidth and time. | Run in batches of 10. Add a --dry-run flag that lists what would change without executing. |
| Using the Supabase anon key instead of service_role key for writes | Anon key has row-level security restrictions that block upserts. | Use service_role key with caution. Store in environment variable, never in code. Add table-level RLS policies for the sync function. |
| Not cleaning up Playwright browser processes after sync | Each chromium.launch() spawns a process. Orphaned processes accumulate memory and can exhaust system resources. | Always call browser.close() in a finally block. Track launched browsers in an array and force-close on SIGINT/SIGTERM. |
| Hardcoding the portfolio data path instead of reading from config | Paths change between projects. A hardcoded path breaks on first use on a different machine. | Ask for portfolio directory in Step 1. Derive projects-data.js path from that base. Store in sync state for reuse. |
© EliasOulkadi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .pack/skills/portfolio-auto of EliasOulkadi/shokunin.
Open the folder on GitHubat commit 4c68e5b
Portfolio Auto next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Portfolio Auto this skillEliasOulkadi/shokunin | 114 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Studio E2E Testssupabase/supabase | 111k | — | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Reprovaadin/web-components | 582 | — | ~1.3k | Automated safety check: Pass | None | |
| Reprovaadin/flow-components | 129 | — | ~1.3k | Automated safety check: Pass | None | |
| Site Bugfixdebs-obrien/debbie.codes | 142 | — | ~960 | Automated safety check: Pass | None | |
| Hlive TestingSamHennessy/hlive | 101 | — | ~1.2k | Automated safety check: Pass | MIT |
supabase/supabase
Write and run Playwright E2E tests for Supabase Studio (e2e/studio).
vaadin/web-components
Reproduce a Vaadin web component bug from a GitHub issue in vaadin/web-components.
vaadin/flow-components
Reproduce a Vaadin Flow component bug from a GitHub issue in vaadin/flow-components or a component-specific issue in vaadin/flow.
debs-obrien/debbie.codes
Reproduce and fix a debbie.codes site bug with browser proof and a Playwright regression when useful.
SamHennessy/hlive
Write browser tests for HLive pages using the hlivetest package (github.com/SamHennessy/hlive/hlivetest) and Playwright.
handsontable/handsontable
Guide to Handsontable's performance-tests package: Playwright scenarios measured through CDP traces and compared against golden baselines taken from the develop branch.
EliasOulkadi/shokunin
Design CI/CD pipelines for GitHub Actions, GitLab CI, and CircleCI with matrix builds, test sharding, caching, Docker layer caching, OIDC auth, deployment strategies (rolling, blue-green, canary)…
EliasOulkadi/shokunin
Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…
EliasOulkadi/shokunin
PostgreSQL database administration — backup/restore (pgdump, PITR, WAL archiving), health monitoring (connections, bloat, cache hit ratio, dead tuples), connection pooling (PgBouncer), replication…
EliasOulkadi/shokunin
Design database schemas with Prisma/Drizzle, PostgreSQL index strategy (B-tree, GIN, GiST, BRIN, Hash), query optimization (EXPLAIN ANALYZE), migration safety (expand/contract, zero-downtime), and…
EliasOulkadi/shokunin
Optimize Docker images with multi-stage builds, distroless bases, BuildKit cache mounts, multi-arch builds, compose watch, security hardening (non-root, seccomp, capabilities drop), and…
EliasOulkadi/shokunin
Design error handling, structured logging, and observability with OpenTelemetry (traces, metrics, logs), error classification, recovery patterns (retry with jitter, circuit breaker, bulkhead…
Works with
Categories
Auto-sync GitHub repos to portfolio website. An agent skill from EliasOulkadi/shokunin. Portfolio Auto is an agent skill from EliasOulkadi/shokunin. Auto-sync GitHub repos to portfolio website.
Portfolio Auto fits situations like: user asks to update portfolio; add my repos to portfolio; refresh portfolio projects; one-time project additions — batch sync only.
Run `npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a claude-code`. Or copy the skill folder (.pack/skills/portfolio-auto in EliasOulkadi/shokunin) into .claude/skills/portfolio-auto in your project. Claude Code loads it when a task matches its description.
Run `npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a codex`. Or copy the skill folder (.pack/skills/portfolio-auto in EliasOulkadi/shokunin) into .agents/skills/portfolio-auto in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add EliasOulkadi/shokunin --skill portfolio-auto -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/portfolio-auto, .gemini/skills/portfolio-auto, .github/skills/portfolio-auto and .opencode/skills/portfolio-auto in your project.
Going by SKILL.md and its folder, Portfolio Auto needs the command-line tools its instructions call (npx) and credentials named GITHUB_TOKEN. Our summary lists: Python 3; Node.js; A credential in GITHUB_TOKEN. Compatibility (from SKILL.md): opencode.
SKILL.md names 1 domain. In commands or code: api.github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Portfolio Auto is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Portfolio Auto: Studio E2E Tests (supabase/supabase, 111k stars), Repro (vaadin/web-components, 582 stars), Repro (vaadin/flow-components, 129 stars) and Site Bugfix (debs-obrien/debbie.codes, 142 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
EliasOulkadi (a GitHub user) maintains it in EliasOulkadi/shokunin, which has 114 GitHub stars. The repository holds 49 skills in this directory. The repository was last updated on October 5, 2026.
Source: EliasOulkadi/shokunin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.