Notes from the workbench.
Practical articles on what the tools here help with: Claude Code settings, skills and cost, MCP servers, prompts for AI images, characters and video, charts, dashboards and Power BI themes, icons, terminal prompts and themes, JSON, and GitHub READMEs.
Each one answers a real question first, then shows how. Only what we checked. To learn a tool step by step, see the tutorials.
AI action figure prompt: turn your photo into a boxed toyA tested prompt that turns one photo of you into a boxed collectible action figure, with the packaging, accessories and name you choose. It works with ChatGPT, Gemini and other image models that take a reference photo, and comes with the photo tips and fixes that make the face come out right.How to centre an image or text in a GitHub READMEGitHub removes CSS from a README, so text-align and style attributes do nothing. The old align attribute still works. How to centre images, text, headings and tables, and how to keep Markdown working inside a centred block.Animated gradient background in CSS: three ways that workA CSS gradient cannot be animated directly, so animate something around it. Move a large gradient, rotate its angle with @property, or drift blurred colours with transform, with the code and the cost of each.How to calculate days sales outstanding (DSO), with examplesDays sales outstanding is how many days, on average, your customers take to pay. The formula with a worked example, the countback method for uneven sales, what a good DSO is, the mistakes that hide slow payers, and DAX, SQL and Excel to copy.A dashboard layout people can read in five secondsWhere to put the numbers, the trend, the filters and the detail on a report page, why a grid matters more than colours, and a layout for a Power BI page you can copy.A GitHub profile README for job seekersWhat recruiters and hiring managers look for in the ten seconds they spend on your GitHub profile, and how your profile README can give it to them.Accessible icon buttons: aria-label and aria-hiddenAn icon-only button with no name reads as "button" to a screen reader. How to name icon buttons with aria-label, hide decorative icons with aria-hidden, size the target for touch, and keep enough contrast.AI character prompt examples for people, animals and robotsEight complete character prompts you can copy, from a corporate headshot and a studio dog to a claymation kid and a moss golem, and the seven-part order that makes each one work in Flux, Midjourney, GPT Image and Nano Banana.AI character sheet prompts: turnaround and expressionsA character sheet is one image of the same character from several views, and the best reference for keeping them consistent. The prompt structure for a reference sheet, a turnaround and an expression sheet, with copyable examples and the mistakes that break them.AI product photos for a shop: white background and lifestyleMake catalogue packshots on pure white and lifestyle scenes from one photo of your product, with Nano Banana, GPT Image or Flux Kontext. The rule that keeps the label and shape unchanged, the details that make a product sit in a scene, and the marketplace rules to check.An AI headshot from a selfie that still looks like youTurn a selfie into a LinkedIn or company headshot with Nano Banana, GPT Image or Flux Kontext. Which selfie to start from, the identity rule that stops the model changing your face, and what to change instead.Aspect ratios for AI images: Instagram, YouTube and printThe right aspect ratio for every place an AI image goes (4:5 for the Instagram feed, 9:16 for Stories and Reels, 16:9 for YouTube and slides, 2:3 for Pinterest, 1.91:1 for link previews) and how to set it in Midjourney, Flux, Nano Banana, GPT Image and Stable Diffusion.Bar chart or column chart: which one to useColumns stand up, bars lie down, and the choice is not a matter of taste. When to use a column chart, when a bar chart reads better, how to sort and label each, and what Power BI, Tableau and Excel call them.Claude Code /compact: what it does, how to keep contextWhy Claude Code compacts the conversation when the context window fills up, what survives and what is lost, how to steer it with /compact instructions, and how to tell from your history how often it happens.Claude Code custom slash commands: commands or skills?How to make your own /command in Claude Code, where the file goes, how arguments and namespaces work, and why a skill is now the better choice for new commands.Claude Code hooks: run your own script before a tool callWhat Claude Code hooks are, where they are configured, how a PreToolUse hook can block a command with exit code 2, and how to write one that finds its script from any folder.Claude Code keyboard shortcuts and how to rebind themThe Claude Code shortcuts worth knowing, where keybindings.json lives, how to rebind a key, and how to avoid shadowing a shortcut you use without thinking.Claude Code managed settings: enforce a team policyWhere Claude Code's managed-settings.json lives on Linux, macOS and Windows, why it beats every other settings file, which keys only work there, and how to allowlist MCP servers safely.Claude Code OpenTelemetry: metrics to Grafana or DatadogHow to turn on Claude Code's OpenTelemetry export, which environment variables to set, every metric and event it sends, and how to roll it out to a whole team with managed settings.Claude Code output styles: change how Claude talks to youWhat Claude Code output styles are, the four built-in styles, how to write your own in a Markdown file, and when to keep the coding instructions switched on.Claude Code permissions: allow, ask and deny rules explainedHow Claude Code decides whether a tool call runs, stops to ask, or is refused, with the rule syntax, the four permission modes and a safe starting setup.Claude Code plugins and marketplaces: install or buildWhat a Claude Code plugin is, how to add a marketplace and install from it, how to check a plugin's cost before installing, and how to package your own skills, agents and hooks as a plugin.Claude Code sandbox settings: files, network, fewer promptsWhat the Claude Code sandbox does, the settings.json keys that control it, how to limit network access to a list of hosts, and how sandboxing lets you stop approving every shell command.Claude Code skills: what SKILL.md is and when Claude uses itA skill is a folder with a SKILL.md that teaches Claude one job. Here is where skills live, what goes in the file, why the description decides whether it is used, and when a skill beats CLAUDE.md.Claude Code subagents: create one that actually gets usedWhat a Claude Code subagent is, where its file lives, every frontmatter field worth setting, and how to write a description so Claude delegates to it instead of ignoring it.Claude Code subagentStatusLine: your own row for each subagentThe subagentStatusLine setting replaces the default row Claude Code shows for each running subagent. What the script receives, what it must print back, and a working example.Codex .rules files: allow, prompt or forbid commands by prefixCodex rules decide what happens to a command before the sandbox does. Where .rules files live, how prefix_rule works, how chains like a && b are checked, and how to test a rule with codex execpolicy check.Codex sandbox and approval modes: read-only, workspace-write and on-requestTwo settings decide what Codex may do without you: sandbox_mode (where its commands may write) and approval_policy (when it stops to ask). What each value does, the combinations that make sense, and what replaced untrusted.Codex team usage, when Codex only keeps each person's historyCodex stores sessions on each developer's own computer, so there is no team dashboard to open. How to get one anyway, which Codex numbers matter for a team, and the privacy rules that keep it fair.Codex token usage explained: input, cached, output and reasoningEvery Codex session file records the tokens of each response in five numbers. What input, cached input, output, reasoning and total tokens mean, how they relate, and how to add them up over weeks.Colour-blind-friendly palettes for dashboards and chartsAbout one man in twelve sees red and green as nearly the same colour. How to pick chart colours that everyone can tell apart, the palettes made for it (Okabe–Ito, Paul Tol), the contrast rule for chart marks, and how to test a report.CSS typewriter effect without JavaScriptA typing animation in pure CSS, with a blinking caret, using steps() and the ch unit. The full code, how it works line by line, its limits with long or multi-line text, and how to make it respect reduced motion and screen readers.Dark mode images in a GitHub READMEHow to show one image to light-mode visitors and another to dark-mode visitors, so the cards in your GitHub README never look out of place.Dual axis charts: when they work and when they misleadA chart with two y-axes can show a volume and a rate together, or invent a link between two numbers that has none. When a dual axis chart is fine, why two lines on two axes mislead, and four better options.Ease in vs ease out: which CSS easing to use whenThe difference between ease, ease-in, ease-out, ease-in-out and linear in CSS, which one to use for things arriving, leaving and moving, how cubic-bezier works, and how to write springs and bounces with linear().GitHub Markdown alerts, collapsible sections and MermaidGitHub's Markdown does more than headings and lists. Here are alerts, collapsible sections, Mermaid diagrams, footnotes, task lists and keyboard keys, with the exact syntax for each.GitHub organization profile READMEHow to add a README to your organization's GitHub page, what to put in it, and how it differs from a personal profile README.How to add a background image to a Power BI report pageThe step-by-step way to put a designed background behind a Power BI report page, the right image size for 16:9, 4:3 and Letter pages, how to make visuals sit on it, and the mistakes that make it blurry or slow.How to calculate churn rate (formula, DAX, SQL and Excel)The customer churn rate formula with a worked example, the mistakes that make churn look better or worse than it is, revenue churn and net revenue retention, typical benchmarks, and ready-to-use DAX, SQL and Excel.How to calculate OEE, with a worked exampleOEE is availability times performance times quality. How to calculate each part from your production data, a worked example for one shift, what a good OEE is, and the three mistakes that make it look better than it is.How to customise the Codex status line and terminal titleCodex draws its footer from 31 built-in items you pick and order in config.toml or with /statusline. Every item, the defaults, and how to set them.How to make a CSS loading spinner (no library, no image)A loading spinner in a few lines of HTML and CSS, explained line by line, then dots, bars and a progress sweep. With the accessibility parts most spinners forget, and when to use a spinner at all.How to make a GitHub profile READMEA GitHub profile README is a README.md in a repository named like your username. Here is how to create one, what to put in it, and how to keep it readable in light and dark mode.How to set up a Claude Code status lineWhat the Claude Code status line is, how it works, how to install one in two steps, and how to fix the most common reason it shows nothing.How to show SVG icons in a Power BI table or matrixPower BI can draw an SVG icon in every row of a table from a DAX measure that returns a data URI. The measure, the one setting that makes it work (Image URL), how to change the icon or colour per row, and the characters that break it.Image prompts that work in Midjourney, Flux and Nano BananaA simple order for image prompts (subject, setting, style, light, camera, format) that works across models, what changes per model, and the mistakes that make a prompt ignore half of what you wrote.Is Claude Code worth it? How to measure its value honestlyA practical way to judge whether Claude Code pays off for you or your team, from cost per task and kept edits to an honest time-saved estimate, using the history it already keeps.Keep an AI character consistent across images and videoWhy image models give you a new face every time, and the one habit that fixes most of it: a fixed identity block you reuse word for word, with only the scene changing. With examples for Midjourney, Flux, Stable Diffusion and Veo.KPI vs metric: what is the difference, with examplesEvery KPI is a metric, but few metrics are KPIs. A plain explanation of the difference, a test for telling them apart, examples for sales, marketing, SaaS and operations, and how many KPIs a dashboard should have.Lucide vs Tabler vs Phosphor vs Fluent: which icon set?Four of the best free icon sets compared by size, styles, look and licence, with which one fits a web app, a dashboard or a Microsoft-style product, and how to mix them without it showing.MCP permissions: allow one tool, not a whole serverHow Claude Code names MCP tools in permission rules, how to allow a server's read tools while asking before its write tools, and how to keep API keys out of a shared .mcp.json.Measure Claude Code adoption without reading promptsThe handful of numbers that show whether a team really uses Claude Code (active people against seats, stickiness, retention, depth and outcomes), how to collect them, and the privacy rules that keep it fair.Midjourney vs Flux vs Nano Banana vs GPT Image: which to useA practical comparison of the main AI image models by job, not by benchmark. Midjourney for looks and styles, Flux for precise photoreal scenes, Nano Banana for editing your own photos, GPT Image and Ideogram for text, and how to write the same prompt for each.Negative prompts explained, and which models still use themA negative prompt lists what you do not want in the picture. Here is how it works, which models have a field for it (Stable Diffusion, Midjourney's --no, Ideogram) and which do not (Flux, Nano Banana, GPT Image), and how to write the exclusion into the prompt instead.Net revenue retention: how to calculate NRR, with an exampleNet revenue retention compares what last year's customers pay today with what they paid a year ago. The formula, a worked example, what a good NRR is, how it differs from gross retention, and the mistakes that inflate it.One AI character in any style: photo, anime, 3D, pixel artKeep the character's description the same and change only the first line of the prompt, and one character becomes a photograph, an anime frame, a 3D render, a claymation still, a watercolour or a pixel-art sprite. The style lines that work, and what to drop for each style.Power BI theme JSON: what goes in it and how to load itA Power BI report theme is a JSON file with your colours, fonts and visual defaults. What its main parts do (dataColors, textClasses, visualStyles), a minimal theme you can copy, and how to import it in Power BI Desktop.prefers-reduced-motion: make CSS animations accessibleWhat prefers-reduced-motion is, who turns it on, and how to respect it in CSS and JavaScript without breaking your design. With copy-ready code and the one rule that makes it easy.Run Claude Code in CI with claude -p without it hangingHow to run Claude Code non-interactively with claude -p, which flags a CI job needs, why most unattended runs stall on a permission prompt, and how to cap what a run can spend.See what Claude Code costs you and where the tokens goWhere to find your Claude Code token use and cost, for the current session and over weeks, what input, output and cache tokens mean for the bill, and the habits that bring the number down.See your Codex usage and your 5-hour and weekly limitsCodex records tokens and how much of your 5-hour and weekly limits you used in every session file. Where those files are and how to read them over weeks.Self-host GitHub readme stats on VercelRun your own copy of the GitHub stats card server in about ten minutes, for free, so your profile never depends on a public instance again.Show your Claude Code 5-hour and weekly limits in the status lineClaude Code hands your status line script how much of your 5-hour and 7-day limits you have used and when each resets. Which fields, when they are missing, and a script that shows them.Skeleton loading screens in CSS, with a shimmerA skeleton screen shows the shape of the content while it loads, so the page feels faster than a spinner. How to build one in pure CSS with a moving gradient, when to use it instead of a spinner, and how to keep it accessible.SVG icons in React without an icon libraryYou do not need a package with thousands of icons to show twenty. How to turn an SVG into a React component, colour it with currentColor, size it with CSS, and when a sprite or an icon library is the better choice.SVG or PNG for icons? When to use whichSVG is the right default for icons on the web, but not everywhere. Here is when SVG wins, the places that still need a PNG (email, some app stores and older tools), the sizes to export, and how to colour an SVG icon with CSS.The 16 ANSI colours: how a terminal theme actually worksA terminal theme is 16 numbered colours plus a background, foreground and cursor. Here is what each slot is for, why programs look different in every theme, and how 256 colours and true colour fit in.What an MCP server is, and how to add one to Claude CodeAn MCP server gives Claude Code new tools, such as reading your issues or querying a database. Here is what the Model Context Protocol is, the one command that adds a server, and which of the three scopes to pick.What to put in CLAUDE.md, and what to leave outCLAUDE.md is read at the start of every Claude Code session, so every line costs attention. Here is what earns its place, what does not, where the file can live, and a short example to start from.When to use a pie chart (and when a bar chart is better)Pie charts work for two or three parts of a whole, and almost nowhere else. The rules for using one well, why people misread them, what a donut changes, and the chart to use instead for every case a pie gets wrong.Where Claude Code keeps its settings, and which file winsClaude Code reads its settings from up to four files. Here is where each one lives, who it is for, and the order that decides which value Claude Code actually uses.Where Claude Code keeps your conversation historyClaude Code saves every session as a JSONL file under ~/.claude/projects, one folder per project. Where exactly, what is in each line, how long it is kept (cleanupPeriodDays), and what you can do with it.Where Codex keeps its config.toml, and which layer winsCodex reads config.toml from your home folder, the project, a profile and the command line, under any admin requirements. Where each lives and which one wins.Which chart should I use? Start with what it should sayPick a chart by the question it answers, not by how it looks. A plain guide to the eleven things a chart can say (comparison, change over time, part of a whole and more), the chart that fits each, and the ones to avoid.Which Codex skills and MCP servers do you actually use?Codex records every skill it loads and every MCP tool it calls in your session files. How to tell a skill you picked from one Codex chose, how MCP calls are named, and how to count them over weeks.Why GitHub stats cards stop loading, and what to do about itMost GitHub profile stats cards are images drawn by free community servers that can be paused or rate limited. Here is why they break and how to keep your profile working.Year-over-year growth in Power BI, SQL and ExcelHow to calculate year-over-year growth correctly, with a DAX measure using SAMEPERIODLASTYEAR, a SQL query with LAG, and an Excel formula, plus why month-over-month misleads in a seasonal business.