YutaMoriJP

sandbox.sh

Run Claude in an isolated Vercel Sandbox with full git access.

It uses the sandbox ID (sbx_asdfasdfasdf) as the branch name, so it's safe to push and then you can get your changes by pulling them from that branch

Test permissions are set up properly

Default keyboard shortcuts for Ghostty terminal emulator. Platform-specific differences are noted where applicable.

Action	Windows/Linux	macOS
New window	Ctrl+Shift+N	Cmd+N
Close window	Alt+F4	Cmd+Shift+W

	// Update globs depending on your framework
	---
	name: tailwind_v4
	description: Guide for using Tailwind CSS v4 instead of v3.x
	globs: ["*/.{js,ts,jsx,tsx,mdx,css}"]
	tags:
	- tailwind
	- css
	---

	{
	"tools": [
	{
	"type": "function",
	"function": {
	"name": "codebase_search",
	"description": "Find snippets of code from the codebase most relevant to the search query.\nThis is a semantic search tool, so the query should ask for something semantically matching what is needed.\nIf it makes sense to only search in particular directories, please specify them in the target_directories field.\nUnless there is a clear reason to use your own search query, please just reuse the user's exact query with their wording.\nTheir exact wording/phrasing can often be helpful for the semantic search query. Keeping the same exact question format can also be helpful.",
	"parameters": {
	"type": "object",
	"properties": {

	import { useEffect, useRef } from "react";

	export function useTransitonOnValueChange(value: unknown) {
	if (!document.startViewTransition) return;

	const lastValueRef = useRef(value);
	const deferredRef = useRef<Deferred<void> \| null>(null);
	const viewTransitionRef = useRef<ViewTransition \| null>(null);

	if (lastValueRef.current !== value) {

	import { BlurImage, YouTube } from "@dub/ui";
	import { nFormatter } from "@dub/utils";
	import { Eye, UserCheck, Video } from "lucide-react";
	import { Suspense } from "react";

	export function YoutubeChannel({ id }: { id: string }) {
	return (
	<Suspense fallback={<div className="not-prose grid gap-4"></div>}>
	<YoutubeChannelRSC id={id} />
	</Suspense>

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	/// <reference types="react/canary" />
	import React, { cache } from "react";

	type Options = { passthrough?: boolean };
	const OPTIONS_DEFAULT: Options = { passthrough: false };

	type RecordOrTupleArg = Record<string, any> \| any[]

	export function cacheValue<TObj extends RecordOrTupleArg>(
	v: RecordOrTupleArg,

	"use client";

	import { cache, unstable_postpone } from "react";
	import { preload } from "react-dom";

	const loadImage = cache((src: string) => {
	return new Promise<void>((resolve, reject) => {
	const img = new Image();
	img.src = src;

	// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/

	let context = [];

	export function untrack(fn) {
	const prevContext = context;
	context = [];
	const res = fn();
	context = prevContext;
	return res;