- Write plain subject-verb-object sentences. Avoid compressed rhetorical constructions like "the constraint the diagram glosses" or "waiting for that confirmation is what keeps X honest" — say "the diagram doesn't show X." These read as LLM-ese, not natural technical writing.
- One idea per sentence. Assume the reader is context-switching and skimming; they should never have to reread a sentence to work out what it claimed.
name: interface-animation description: Design, implement, review, and refine UI animation and gesture-driven motion. Use for transitions, entrances and exits, interaction feedback, shared-element and layout motion, drag or swipe behavior, springs, performance, reduced-motion behavior, and motion-system audits.
Use motion to make an interface clearer, more responsive, easier to follow, or more expressive. Animation is subjective: the values and patterns in this skill are practical starting points, not universal standards. Judge the result in the context of the product, interaction frequency, input method, content, platform, and intended character.
Location: bzdata/bzbackup/bzdatacenter/
Purpose: Complete history of every backup action — file uploads, deletions, expirations, and large-file reassembly. This is the primary source for reconstructing churn and backup activity over time.
Scale: ~570 files spanning March 2020 to March 2026, totaling 15 GB and 45.8 million lines.
| #!/bin/zsh | |
| # Instructions: | |
| # 1. Put this file in your user folder (~/git-editor) | |
| # 2. Enable execution by running `chmod +x ~/git-editor` | |
| # 3. Run `git config --global core.editor "~/git-editor" | |
| # 4. Now when you run a git command that launches your interactive editor, it'll use the current IDE | |
| # Function to get the process name by PID | |
| get_process_name() { |
| import React, { Suspense } from "react"; | |
| const componentMap = { | |
| sectionOne: React.lazy(() => import("./SectionOne")), | |
| sectionTwo: React.lazy(() => import("./SectionTwo")), | |
| }; | |
| const Section = ({ _type, ...sectionProps }) => { | |
| const SectionComponent = componentMap[_type]; |
| /** | |
| * This script injects JSDoc comments from the JS source files into the type | |
| * definition files. This is necessary because the type definition files | |
| * generated by TypeScript do not include JSDoc comments. | |
| * | |
| * @see https://github.com/microsoft/TypeScript/issues/14619 | |
| * | |
| * The strategy is a bit hacky, but straightforward: | |
| * | |
| * 1. Recursively walk the output folder looking for .d.ts files |
| const getImageData = async url => { | |
| const response = await global.fetch(url) | |
| const contentType = response.headers.get("Content-Type") | |
| return response.blob().then(imageData => ({ contentType, imageData })) | |
| } | |
| const uploadImage = ({ imageData, contentType }) => | |
| client.assets.upload("image", imageData, { contentType }) | |
| // usage example |
| // import and configure the client | |
| const oldRef = "abc123" | |
| const newRef = "def456" | |
| client | |
| .fetch( | |
| `*[references($oldRef)][0...250] { | |
| _id, | |
| _rev, |
To render the SVG, it's useful to have a wrapper component that allows passing in additional props:
import React from "react"
import { compiler } from "markdown-to-jsx"
const InlineSvg = ({ content, ...props }) =>
compiler(content, {
createElement: (type, elProps, children) =>
React.createElement(type, { ...elProps, ...props }, children),