New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Text

by dotnetdreamer in dotnetdreamer/open-screenshot-generator

How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (title), aria-labels, placeholders, settings hints, empty states…

MITAuto-check passedTesting & QA

Install UI Text

skills CLI
$ npx skills add dotnetdreamer/open-screenshot-generator --skill ui-text -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dotnetdreamer/open-screenshot-generator ui-text --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dotnetdreamer/open-screenshot-generator.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ui-text .claude/skills/ui-text && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-text
GitHub stars
124
Token cost
~2.1k tokens
SKILL.md length
1,112 words
Files
2
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (title), aria-labels, placeholders, settings hints, empty states…

  • Works in 7 steps: Say the state, then the way out → Never point at the console → Name the thing, not the category → …
  • Tasks that involve Accessibility
  • SKILL.md covers 1. Say the state, then the way…, 2. Never point at the console, 3. Name the thing, not the… and 4. Cut the apology and the…, plus 9 more sections
  • Runs JavaScript scripts from its folder; calls node and npx

What it does

UI Text is an agent skill from dotnetdreamer/open-screenshot-generator. How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (title), aria-labels, placeholders, settings hints, empty states, start-screen and tour copy, and thrown errors that reach a toast. Use before writing or changing ANY of those. Covers the house patterns with real before/after strings from this repo, the rules the copy has to pass, which Playwright specs and screenshot scripts match on UI text so a reword does not break them, and a checker…

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.

It sits in Testing & QA, covering Accessibility and Browser testing. It works with Playwright and Tauri. The repository describes itself as: Open source Canva with CLI/GUI, AI Agent, MCP for App Store and Play Store screenshots. Free alternative to AppScreens, AppLaunchpad and Previewed. The licence is MIT.

When your agent uses it

  • Tasks that involve Accessibility
  • Tasks that involve Browser testing

Example prompts

  • “/ui-text”

Requirements

  • Node.js

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Say the state, then the way out
  2. Never point at the console
  3. Name the thing, not the category
  4. Cut the apology and the passive filler
  5. Sentence case, always
  6. A hint under a switch is one outcome
  7. No bare pronoun, no selling, no hedging

What it can do on your machine

Read from SKILL.md and the folder at commit 556578e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Text loads about 2.1k tokens when it runs. Until then it costs about 137 tokens; SKILL.md has 1,112 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~137
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dotnetdreamer/open-screenshot-generator at commit 556578e, republished under its MIT licence (© dotnetdreamer). 1,112 words, ~2,103 tokens.

Download SKILL.mdSave it as .claude/skills/ui-text/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
ui-text
description
How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (`title`), `aria-label`s, placeholders, settings hints, empty states, start-screen and tour copy, and thrown errors that reach a toast. Use before writing or changing ANY of those. Covers the house patterns with real before/after strings from this repo, the rules the copy has to pass, which Playwright specs and screenshot scripts match on UI text so a reword does not break them, and a checker script for the diff.

Sentences the user reads

The people reading this app's copy are making store screenshots, often against a release deadline. Every string should tell them what state they are in and what to do next, in the words they would use.

The strings have no dictionary. They are hardcoded in the components, mostly OpenScreenshotGeneratorLayout.tsx. src/lib/i18n/ is a different thing: it translates the text inside the user's artboards into store locales. Do not put editor copy there, and do not treat a project's locale list as a list of UI languages.

The house style is the newer code, not the older code. The early toasts in the layout ("Loading Error", "Failed to load project. See console for details.") are the "don't" examples below. The recent ones in the start screens, cloud, account and panels are the "do" examples.

1. Say the state, then the way out

A toast is read in a second. The title says what happened, the description says what to do about it. If there is nothing to do, drop the description.

  • Don't: Delete Failed / There was an error deleting the project.
  • Do: Nothing to share yet / Create or open a project first.

2. Never point at the console

Desktop users have no console, and web users will not open one. Log the error with console.error and tell the user what they can do.

  • Don't: Failed to load project. See console for details.
  • Do: That version could not be read / It may have been cleared with the browser data.

3. Name the thing, not the category

"Error", "Loading Error" and "Invalid Template" make the user work out what broke.

  • Don't: Error
  • Do: Those images could not be read, That set is no longer on this device

4. Cut the apology and the passive filler

"Failed to", "There was an error", "has been", "successfully" all come before the fact and add nothing to it.

  • Don't: The project has been removed from your recent projects.
  • Do: Removed from recent projects

5. Sentence case, always

Titles, buttons, tooltips and menu items are sentence case. Product and platform names keep their capitals (App Store, Google Drive, iPad).

  • Don't: Cannot Delete Element, Add New Artboard After
  • Do: The editor was reloaded, Put back in the editor

6. A hint under a switch is one outcome

Say what the setting changes for the user. How it works goes in a code comment.

  • Don't: Keeps the open project in your cloud on its own, shortly after each round of edits. Sign in to use it, and watch the corner of the canvas to see where it got to
  • Do: Saves the open project to your cloud a few seconds after you stop editing. Needs sign in

7. No bare pronoun, no selling, no hedging

"It" and "they" need something on screen to point at. "Simply", "just", "easily", "instantly", "seamless" and "powerful" are words the user skips.

  • Don't: It ran out of memory and the app recovered it.
  • Do: The editor ran out of memory and reloaded. Your last saved work is intact.
  • Don't: Add screenshots above and every design here fills with them, instantly
  • Do: Add screenshots above to fill every design here

Use the app's own words

SayNot
artboardboard, slide, page (the UI says "artboard" about 180 times)
projectdesign, file (except on the quick start deck, where each card is a "design")
element, layerobject, item (layer only in the Layers panel)
exportdownload, render
languagelocale (the code says locale, the user never sees the word)

The test before you write it down

Say it out loud to someone sitting next to you. If you would not say it that way, it is not ready. Then delete every word you can remove without losing a fact.

Show full SKILL.md (487 more words)Show less

Rules that are not a matter of taste

From rule 19 in .agents/AGENTS.md:

  • No em or en dashes. Use a comma, a period, a colon, or "to".
  • No trailing period on short copy: titles, buttons, tooltips, aria-label, placeholders, menu items, settings hints. A toast description or dialog body made of full sentences keeps its periods, as the recent code does.
  • No curly quotes. Tests match on exact strings, and a curly quote never matches.
  • The wider rules live in .claude/skills/humanizer, which AGENTS.md makes mandatory for everything a user reads.

Do not rewrite strings for the sake of it

The old toasts in the layout break most of these patterns. Fix one when you are already changing that code path, or when it is actually wrong. A sweep is churn, and a lot of these strings are matched by tests.

What reads the strings

UI text is also a locator. A reword that looks harmless can break a test.

ReaderWhereMatches on
Playwright specstests/e2e/specs/getByTitle, getByRole({ name }), getByText, about 250 calls
Page objecttests/e2e/helpers/editor.tstoolbar titles, palette aria-label shaped Add ${label} (${libraryId}), tab names with exact: true
Screenshot driver.claude/skills/app-screenshots/scripts/CSS selectors like button[aria-label="Expand right panel"], title^="Step back"
bash
# Before changing a string: who reads it?
node .claude/skills/ui-text/copy.mjs locked "Expand right panel" "Put back in the editor"

# After writing copy: check the lines added since HEAD
node .claude/skills/ui-text/copy.mjs check

# Audit one file whole (expect the old layout toasts to light up)
node .claude/skills/ui-text/copy.mjs check --all src/components/open-screenshot-generator/SettingsDialog.tsx

check flags dashes, curly quotes, trailing periods on short copy, "see console", "There was an error", "Failed to ...", selling words and Title Case. Title Case and selling words can be false alarms (a product name it does not know). The rest are real.

The traps

  1. A matched string changes with its matcher, in the same commit. Run locked first. If it says LOCKED, update the spec or script too, then run that spec (npx playwright test --project web tests/e2e/specs/<file>).
  2. aria-label replaces the visible text as the accessible name. A button that reads "Export" on screen but has aria-label="Export artboards" answers to the label, so getByRole('button', { name: 'Export', exact: true }) finds nothing.
  3. Icon-only toolbar buttons are found by title. Adding visible text to one changes its accessible name, and adding an aria-label changes it again. editor.ts explains the locator policy at the top.
  4. One label can be a prefix of another. getByRole without exact: true matches a substring, so a new button whose name contains an existing one ("Export" inside "Export all") can make an old locator match two elements and fail. The page object passes exact: true for that reason; keep new names distinct.
  5. Thrown errors reach the user. toast({ description: err.message }) shows whatever the lower layer threw, so a message in src/lib/ that ends up in a toast follows these rules too. Keep technical detail in console.error.
  6. Translatable text inside artboards is not UI copy. Template headlines and the AI agent's generated marketing copy follow the store's tone, not these rules.

Where a string is used

bash
grep -rn "Exact string" src tests/e2e .claude/skills/app-screenshots/scripts --include='*.ts' --include='*.tsx' --include='*.js'

A string built with a template literal (`Add ${label} (${libraryId})`) will not show up under its final text. Search for a fixed fragment of it.

© dotnetdreamer, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .claude/skills/ui-text of dotnetdreamer/open-screenshot-generator.

  • SKILL.md
  • copy.mjs

Open the folder on GitHubat commit 556578e

Compare with similar skills

UI Text next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Text compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Text this skilldotnetdreamer/open-screenshot-generator124—~2.1kAutomated safety check: PassMIT
UI Visual DebuggingNangoHQ/nango13k—~1.3kAutomated safety check: PassCustom licence
Playwright Best Practicessanity-io/sanity6.4k7 repos~6.4kAutomated safety check: PassMIT
Mirroir Onboardjfarcand/mirroir-mcp245—~4.4kAutomated safety check: NotesApache-2.0
Verify Debbie Codesdebs-obrien/debbie.codes142—~1.9kAutomated safety check: PassNone
React Testingaffaan-m/ECC275k1 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • UI Visual Debugging

    NangoHQ/nango

    A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.

    13k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Playwright Best Practices

    sanity-io/sanity

    Official

    A skill your agent uses when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling…

    6.4k GitHub starsUsed in 7 repos~6.4k tokens
    Testing & QAAuto-check passed

  • Mirroir Onboard

    jfarcand/mirroir-mcp

    Onboard a consumer web app to mirroir's .mirroir/ dotfile by EXPLORING the running app (chrome-devtools-mcp) — derive real selectors from the accessibility tree, exercise each surface's primary…

    245 GitHub stars~4.4k tokensUpdated 2 days ago
    Testing & QAAuto-check: notes

  • Verify Debbie Codes

    debs-obrien/debbie.codes

    Drive the live debbie.codes Nuxt site (web UI) the way a user does via Playwright — launch the dev server, doctor health, exercise mapped features, capture screenshots/ARIA evidence, and clean up.

    142 GitHub stars~1.9k tokensUpdated 7 days ago
    Testing & QAAuto-check passed

  • React Testing

    affaan-m/ECC

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…

    275k GitHub starsUsed in 1 repo~3.3k tokens
    Testing & QAAuto-check passed

  • Playwright Verifier

    Community-Access/accessibility-agents

    Internal helper: re-run targeted scans to confirm a fix works at runtime.

    422 GitHub stars~1.1k tokensUpdated 15 days ago
    Testing & QAAuto-check passed

More from dotnetdreamer/open-screenshot-generator

All 13 skills in this repo

  • App Preview Video

    dotnetdreamer/open-screenshot-generator

    Builds an App Store App Preview video (and a Play Store or landing page promo cut) from a screen recording of the app, using the open-screenshot-generator CLI (osg video): it starts from one of 20…

    124 GitHub stars~3.3k tokensUpdated yesterday
    Auto-check passed

  • App Screenshots

    dotnetdreamer/open-screenshot-generator

    Drive Open Screenshot Generator headlessly (puppeteer-core + Edge) to take UI screenshots, add palette elements, upload device screenshots, export artboard PNGs, and regenerate the 3D device…

    124 GitHub stars~5.1k tokensUpdated yesterday
    Auto-check: notes

  • Editor Tools

    dotnetdreamer/open-screenshot-generator

    Drives the live Open Screenshot Generator editor tool by tool over MCP, using osg mcp to expose the design tools (artboards, elements, backgrounds, fonts, the asset libraries, templates, App Preview…

    124 GitHub stars~3.8k tokensUpdated yesterday
    Auto-check passed

  • Gpt4free Provider Sync

    dotnetdreamer/open-screenshot-generator

    Check the latest xtekky/gpt4free releases for provider additions/changes and decide whether Open Screenshot Generator's AI providers need the same.

    124 GitHub stars~2.3k tokensUpdated yesterday
    Auto-check passed

  • Stock Image Assets

    dotnetdreamer/open-screenshot-generator

    Add properly licensed Adobe Stock photos to the Images palette library (e.g.

    124 GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

  • Store Compliance

    dotnetdreamer/open-screenshot-generator

    Checks that rendered store assets will actually be accepted, and then ships them, using the open-screenshot-generator CLI: osg verify audits the produced PNGs and MP4s against App Store and Google…

    124 GitHub stars~3k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about UI Text

What does UI Text do?

How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (title), aria-labels, placeholders, settings hints, empty states…. UI Text is an agent skill from dotnetdreamer/open-screenshot-generator. How a sentence the user reads is written in Open Screenshot Generator - toasts, dialog titles and bodies, buttons, tooltips (title), aria-labels, placeholders, settings hints, empty states, start-screen and tour copy, and thrown errors that reach a toast.

When should I use UI Text?

UI Text fits situations like: tasks that involve Accessibility; tasks that involve Browser testing.

How do I install UI Text in Claude Code?

Run `npx skills add dotnetdreamer/open-screenshot-generator --skill ui-text -a claude-code`. Or copy the skill folder (.claude/skills/ui-text in dotnetdreamer/open-screenshot-generator) into .claude/skills/ui-text in your project. Claude Code loads it when a task matches its description.

How do I install UI Text in Codex?

Run `npx skills add dotnetdreamer/open-screenshot-generator --skill ui-text -a codex`. Or copy the skill folder (.claude/skills/ui-text in dotnetdreamer/open-screenshot-generator) into .agents/skills/ui-text in your project. Codex loads it when a task matches its description.

Can I use UI Text in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dotnetdreamer/open-screenshot-generator --skill ui-text -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-text, .gemini/skills/ui-text, .github/skills/ui-text and .opencode/skills/ui-text in your project.

What does UI Text need to run?

Going by SKILL.md and its folder, UI Text needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npx). Our summary lists: Node.js.

Does UI Text access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is UI Text safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Text use?

UI Text is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Text use?

About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Text?

Skills that share tags, products or a category with UI Text: UI Visual Debugging (NangoHQ/nango, 13k stars), Playwright Best Practices (sanity-io/sanity, 6.4k stars), Mirroir Onboard (jfarcand/mirroir-mcp, 245 stars) and Verify Debbie Codes (debs-obrien/debbie.codes, 142 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Text?

dotnetdreamer (a GitHub user) maintains it in dotnetdreamer/open-screenshot-generator, which has 124 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 7, 2026.

Source: dotnetdreamer/open-screenshot-generator on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.