steveruizok

Localize Figma Styles & Variables

A Scriptr / Figma Plugin API script that breaks a file's dependency on an external library by converting every remote style and variable in use into a local copy, then repointing all layers at those local copies.

Useful when you've inherited (or want to fork) a file whose components reference styles/variables published from a different Figma file, and you want it to stand on its own.

By @steveruizok

What it does

steveruizok

Reimplement the current branch on a new branch with a clean, narrative-quality git commit history suitable for reviewer comprehension.

Steps

1. Validate the source branch

   • Ensure the current branch has no merge conflicts, uncommitted changes, or other issues.
   • Confirm it is up to date with main.

2. Analyze the diff

• Study all changes between the current branch and main.

steveruizok

Marketing style guidelines for tldraw SDK

The overall goal is confident, clear technical marketing that shows both immediate value and extensibility potential, grounded in real capabilities.

Target audience & product focus

Primary audience: Technical decision makers

• Senior frontend/fullstack developers evaluating tools for canvas applications
• Technical leads assessing SDK capabilities and extensibility

steveruizok

{
	"hooks": {
		"PreToolUse": [
			{
				"matcher": "ExitPlanMode|Read|Write|Edit|NotebookEdit",
				"hooks": [
					{
						"type": "command",
						"command": "bash -c 'INPUT=$(cat); EVENT=$(echo \"$INPUT\" | grep -o '\"'\"'\"'hook_event_name'\"'\"'\"':[^\"]*\" | sed \"s/.*:\\(.*\\)/\\1/\" | tr -d '\"'\"'\"'\"); TRANSCRIPT_PATH=$(echo \"$INPUT\" | grep -o '\"'\"'\"'transcript_path'\"'\"'\"':[^\"]*\" | sed \"s/.*:\\(.*\\)/\\1/\" | tr -d '\"'\"'\"'\"); if [ \"$EVENT\" = \"Stop\" ] && [ -n \"$TRANSCRIPT_PATH\" ] && [ -f \"$TRANSCRIPT_PATH\" ]; then THINKING=$(tail -20 \"$TRANSCRIPT_PATH\" | grep '\"'\"'\"'type'\"'\"'\"':\"thinking\" | tail -1 | perl -ne \"print \\$1 if /\\\"thinking\\\":\\\"((?:[^\\\"\\\\\\\\]|\\\\\\\\.)*)\\\"/;\" | sed \"s/\\\\\\\\n/ /g\" | sed \"s/\\\\\\\\\\\"/\\\"/g\"); if [ -n \"$THINKING\" ]; then say -v \"Allison (Enhanced)\" -r 250 \"$THINKING\" & fi; fi; exit 0'"
					}

steveruizok

You are an expert in tldraw and can generate XML to create and manipulate shapes on a tldraw canvas. You can create geometric shapes (rectangles, circles, stars, hearts, arrows, etc.), text, notes, frames, lines, highlights, and more. You can respond with a combination of thoughts, statements, and actions, using the following XML format.

Thoughts

Thoughts should be enclosed in <thoughts> tags. You can have multiple thoughts sections. Use thoughts to plan your actions, reflect on the user's request, and reason about what to do. Each <thoughts> section must be properly closed with </thoughts>.

Example with single thought:

<thoughts>

steveruizok

Make Real System Prompt

You are an expert web developer who specializes in transforming wireframes and sketches into polished, interactive single-page websites. Your mission is to create impressive, functional prototypes that exceed expectations.

Core Responsibilities

• Convert low-fidelity designs into high-fidelity, responsive HTML prototypes
• Create a single, complete HTML file with embedded CSS and JavaScript
• Build interactive, working features rather than static mockups
• Make intelligent assumptions to fill gaps in specifications

steveruizok

import { useEffect, useState } from 'react'

export type TLTypeFace = {
	url: string
	display?: any // FontDisplay
	featureSettings?: string
	stretch?: string
	style?: string
	unicodeRange?: string
	variant?: string

steveruizok

/**
 * Get a point along an arc.
 *
 * @param center - The arc's center.
 * @param radius - The arc's radius.
 * @param startAngle - The start point of the arc.
 * @param size - The size of the arc.
 * @param t - The point along the arc to get.
 */

steveruizok

function getTextBoundingBox(text: SVGTextElement) {
	const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
	svg.appendChild(text)

	document.body.appendChild(svg)
	const bbox = text.getBoundingClientRect()
	document.body.removeChild(svg)

	return bbox
}

steveruizok

// =========================
// Modified code originally from <https://github.com/qzb/is-animated>
//
// # [MIT License](https://spdx.org/licenses/MIT)
//
// Copyright (c) 2016 Józef Sokołowski <j.k.sokolowski@gmail.com>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.