joyco-studio
10 verified skills100 total stars
joyco-lab
Use this skill whenever the user wants to isolate a piece of code, animation, or 3D experiment into a standalone JOYCO Lab experiment and publish it. Triggers include: "isolate this", "publish this to the lab", "create a lab experiment", "extract this animation/effect/scene", "submit to JOYCO lab", "make this an experiment". Also trigger when the user shows you a self-contained visual effect, animation, 3D scene, canvas sketch, or interactive component and wants to share or showcase it. Even if they don't say "lab" explicitly — if there's isolatable creative/technical code and a desire to share it, use this skill.
development10
markdown-content
Guide for building markdown content pages (blogs, legal, changelogs) in Next.js using fumadocs-mdx, rehype-pretty-code, and shiki. Covers MDX collections, self-contained prose typography, syntax-highlighted code blocks, and the component mappings that keep rendered markdown and custom React code components visually consistent. No documentation UI framework required.
development10
skill-writer
Author or refactor a skill in this repo. Use when the user asks to "create a skill", "write a skill", "add a new skill", "document this as a skill", or to restructure an existing SKILL.md (split it up, slim it down, fix the frontmatter). Covers frontmatter conventions, file layout, and the rule for splitting deep reference material into linked docs instead of bloating SKILL.md.
development10
react-ts-debugging
Debug React and TypeScript bugs through a collaborative, log-driven loop with the developer instead of guessing from source code. Use this whenever a user is hunting a bug in a React/TS/JS app — "why is my component re-rendering", "this state won't update", "useEffect runs twice / infinitely", "my fetch returns undefined", "this works sometimes but not always", "the value is wrong but I don't know why", or any "help me figure out what's going on" request. Trigger it even when the user just pastes a broken component and asks what's wrong: rather than eyeballing the file, run a real debugging session where you place strategic console logs, the developer runs the app and collects the output, and that output drives the next step. Prefer this over read-and-guess debugging.
development10
thrash-report-analyzer
Analyze a bye-thrash layout thrashing report array. Parses stack traces, identifies user-code functions causing forced reflows, locates the offending style-write → layout-read pairs in source files, and produces a structured fix-suggestion report.
development10
parallel-claudes
Guide for running multiple parallel Claude Code sessions using cw (Claude Worktree Manager). Use when the user wants to parallelize work across multiple Claude instances, manage git worktrees for concurrent AI coding tasks, or merge results back together. Triggers on tasks involving parallel Claude sessions, worktree management, or splitting work across multiple agents.
development10
webaudio
Add sound effects, UI audio, and ambient sound to a web app using the @joycostudio/suno library. Use when the user wants to play audio on button clicks, hover states, game events, or ambient loops, and when they mention @joycostudio/suno, Suno, AudioSource, Voice, or Mixer.
tools10
trace-audit
Analyze a Chrome DevTools Performance trace JSON file for performance anomalies, producing a structured audit report with critical issues, warnings, metrics, timeline hotspots, and actionable recommendations.
tools10
resolving-git-conflicts
Diagnose and resolve git conflicts of any kind — merge, rebase, cherry-pick, stash, revert. Use this skill EVERY time conflicts appear during work, or whenever the user mentions merge conflicts, rebase conflicts, conflict markers, "both modified" files, a failed or conflicted git pull, or asks to "fix conflicts". Use it even when the resolution looks obvious — many conflicts are phantom artifacts of squash merges or rewritten upstream history, and the correct fix is a different git strategy (e.g. git rebase --onto), not editing conflict markers.
data-ai10
pr-description-writer
Generate high-quality Pull Request descriptions in Markdown. Supports issue, feature, and big-feature PR types with structured, production-ready output. Also generates PR titles and supports delivery as chat output or downloadable .md file. Proactively detects open GitHub PRs for the current branch and offers to update their title and description directly via the gh CLI.
tools10