joyco-studio

@joyco-studio source repo

13 skills
0 followers
8 hours ago last updated

▌
Cluster · joyco-studio
Use when building layouts, creating flex containers, distributing space between elements, or when the user mentions Cluster, Filler, layout wrappers, or spacing. Also trigger when you see justify-between, justify-end, Card wrappers with bg+padding, or any pattern that should use Cluster instead. Proactively suggest Cluster when reviewing code that violates these layout principles.

0
installs
▌
Joyco UI · joyco-studio
Use the JOYCO UI kit correctly when building interfaces in a JOYCO project — a bento/console-style component library on shadcn/ui, Radix, and Tailwind, served from the JOYCO hub. Trigger when building or editing UI in a JOYCO app, when imports come from `@/components/ui/*`, when the user installs `@joyco/ui` or `@joyco/<component>` via shadcn, or mentions Cluster, Filler, the bento layout, or the JOYCO design system. This skill does NOT describe the components inline — it routes you to the live docs and source on the hub so the guidance never goes stale. Pair with `joyco-app` for new-project setup.

0
installs
▌
Joyco App · joyco-studio
Carry a new JOYCO internal product app from plan to working build. Locks a plan first (one the dev already refined this session, brought from another agent session, or one you draft together), then runs the opinionated kickoff — Next.js + TypeScript + Tailwind wired to the JOYCO UI shadcn registry (@joyco/ui kit: components, theme, fonts from hub.joyco.studio), JOYCO lint config, and the current harness's agent guidance — and then builds the app out to the plan. User-invocable as /joyco-app <project-name>. Triggers on "new joyco app", "start a joyco project", "kickoff an internal joyco app", "build this as a joyco app", "set up joyco/ui", and on mentions of the joyco CLI, the @joyco namespace, or hub.joyco.studio. Do NOT use this to publish a standalone experiment (that's joyco-lab) or to scaffold a 3d/motion/library starter via `joyco create` — those are experiment/library templates, not product apps.

0
installs
▌
Joyco Lab · joyco-studio
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.

0
installs
▌
Joyco Logs · joyco-studio
ALWAYS scan the JOYCO knowledge indexes — the logs (hub.joyco.studio/logs) AND the toolbox (hub.joyco.studio/toolbox) — BEFORE writing or finalizing a plan for any non-trivial feature, refactor, or gnarly bug — in ANY repo, not just JOYCO ones — do this proactively, without being asked. When entering plan mode or about to call ExitPlanMode for implementation work, scanning both indexes is a prerequisite step. The logs are the team's written knowledge — gotchas, patterns, and hard-won fixes; the toolbox is the team's maintained tools — CLIs, libraries, UI kit, and configs to reach for before building or installing something else. Trigger on any of these signals: scroll/Lenis behavior, WebGL/canvas sync, animation jank, layout thrashing / forced reflow, GSAP, reduced-motion, Next.js PPR/promises/providers, React context vs prop-drilling, Tailwind group/has patterns, the slot approach, merge/rebase conflicts, parallel agent sessions, audio, 3D/glTF, MSDF/texture atlases, measuring the DOM, or reaching for a CLI/

0
installs
▌
Trace Audit · joyco-studio bundle
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.

0
installs
▌
Skill Writer · joyco-studio bundle
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.

0
installs
▌
Studio Libraries · joyco-studio bundle
ALWAYS check the live JOYCO Studio library index at hub.joyco.studio/toolbox/libraries.md before planning or implementing any non-trivial feature, refactor, architecture change, or performance-sensitive work, in any repo. Run this discovery proactively, before choosing dependencies or writing code, to find a specialized JOYCO library that may provide a faster implementation or enforce the studio's preferred architecture. Read the matched library's linked documentation before using it. Skip only typos, renames, formatting, one-line tweaks, and pure questions that will not lead to implementation. When a library informs the work, tell the user and link its specific toolbox page.

0
installs
▌
Figma Static Pass · joyco-studio
Build the static, production-correct version of a Figma design before any animation work. Use this skill whenever converting a Figma frame or link into components or pages, setting up the initial state of a demo, scaffolding UI from a design file, or whenever get_design_context output would otherwise be adapted ad hoc. Also use it when a user says a design-to-code result was sloppy or unfaithful and wants it rebuilt properly. It covers layout system translation, the data-motion naming contract, asset handling, token discipline, and the resting-state rule.

0
installs
▌
Figma Motion Handoff · joyco-studio bundle
Translate Figma Motion animations into production code (CSS/Tailwind, Motion for React, anime.js, or GSAP). Use this skill whenever the user shares a Figma link to an animated frame, pastes Figma Motion JSON, mentions implementing an animation designed in Figma, or asks to "match the motion in Figma". Also use it when calling the Figma MCP tools get_motion_context or get_design_context for anything animated. It covers node mapping, canvas-to-layout translation, easing token extraction, and when to stop and ask the user instead of guessing.

0
installs
▌
Three Best Practices · joyco-studio bundle
Build, review, debug, and optimize production Three.js experiences. Use for Three.js scenes, React Three Fiber, WebGL or WebGPU renderers, GLSL shaders, reusable TSL node graphs and typed node contracts, glTF assets, post-processing, DOM-to-canvas coordination, render-loop performance, first-use GPU hitches, material or texture invalidation, GPU resource cleanup, and visual regressions in 3D web work. Do not use for generic CSS 3D transforms or static 2D canvas work that does not use a Three.js scene graph.

0
installs
▌
Review Motion Handoff · joyco-studio
Audit an animation implementation against its Figma Motion source. Use this skill whenever the user asks to review, verify, QA, or diff animation code against a Figma design, pastes Figma Motion Dev Mode JSON next to implementation code, or asks "does this match the design?" about any motion work. Also use it after implementing a Figma Motion handoff to self-check the result.

0
installs
▌
Thrash Report Analyzer · joyco-studio
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.

0
installs

13 published skills