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

Run Umbraco UI

by umbraco in umbraco/Umbraco.UI

Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook.

MITAuto-check passedFrontend & Design

Install Run Umbraco UI

skills CLI
$ npx skills add umbraco/Umbraco.UI --skill run-umbraco-ui -a claude-code

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

GitHub CLI
$ gh skill install umbraco/Umbraco.UI run-umbraco-ui --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/umbraco/Umbraco.UI.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/run-umbraco-ui .claude/skills/run-umbraco-ui && 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
run-umbraco-ui
GitHub stars
152
Token cost
~1.2k tokens
SKILL.md length
503 words
Files
2
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook.

  • Asked to run/start/launch Storybook
  • SKILL.md covers Prerequisites, Build (optional — only to…, Run (agent path) — drive… and Run (human path), plus 3 more sections
  • Runs JavaScript scripts from its folder; calls npm, npx and node
  • Screenshot a UUI component

What it does

Run Umbraco UI is an agent skill from umbraco/Umbraco.UI. Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook. Use when asked to run/start/launch Storybook, screenshot a UUI component, drive the component library in a browser, or build/preview the components.

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

It sits in Frontend & Design, covering Design systems. It works with Storybook, Playwright and npm. The repository describes itself as: Umbraco UI Components. The licence is MIT.

When your agent uses it

  • Asked to run/start/launch Storybook
  • Screenshot a UUI component
  • Drive the component library in a browser
  • Build/preview the components

Example prompts

  • “/run-umbraco-ui”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 7394efd. 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:

    • npm
    • npx
    • node
    • curl

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

  • Network

    No URLs in SKILL.md. Its commands use npm, npx and curl, 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

Run Umbraco UI loads about 1.2k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 503 words of instructions outside code blocks.

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

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 umbraco/Umbraco.UI at commit 7394efd, republished under its MIT licence (© umbraco). 503 words, ~1,195 tokens.

Download SKILL.mdSave it as .claude/skills/run-umbraco-ui/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
run-umbraco-ui
description
Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook. Use when asked to run/start/launch Storybook, screenshot a UUI component, drive the component library in a browser, or build/preview the components.

Run Umbraco.UI (UUI)

UUI is a Lit web-component library (@umbraco-ui/uui). Its interactive surface is Storybook (a web app on http://localhost:6006). You drive it with a Playwright script — .claude/skills/run-umbraco-ui/driver.mjs — that opens a story and screenshots it. Playwright is already a project dependency, so no extra runtime is needed.

All paths below are relative to the repo root. Verified on macOS (Node 24, npm 11); commands are OS-agnostic.

Prerequisites

bash
npm install
npx playwright install chromium   # browser binary; npm install does NOT fetch it

On a headless Linux container also run npx playwright install-deps chromium for the system libs (not needed on macOS).

Build (optional — only to produce the dist library)

Storybook does not need a prior build. Build only when verifying the published artifact:

bash
npm run build      # web-component analyze → Vite lib build → tsc d.ts ; outputs dist/index.js, dist/index.d.ts

Run (agent path) — drive Storybook + screenshot

1. Start Storybook in the background (long-running; leave it up). Use your harness's own background mechanism — do not append & inside a backgrounded wrapper (it detaches and gets killed):

bash
npm run storybook   # runs `analyze` then `storybook dev -p 6006`

Wait until it's reachable (cold start ~1–2 min for the analyze step; warm ~5 s):

bash
until [ "$(curl -s -o /dev/null -w '%{http_code}' http://localhost:6006)" = 200 ]; do sleep 5; done

2. Drive it with the Playwright driver. It waits for the server, opens a story, optionally opens an addon panel, screenshots, and reports console errors (exit ≠ 0 if any):

bash
# Isolated component canvas (best for component screenshots):
node .claude/skills/run-umbraco-ui/driver.mjs --story=uui-button--looks-and-colors --iframe --out=shot.png

# Full Storybook manager with an addon panel open (e.g. the README panel):
node .claude/skills/run-umbraco-ui/driver.mjs --story=uui-button--default --panel=Readme --out=shot.png

Options: --story=<id> (default uui-button--default), --iframe (component canvas only), --panel=<tab> (e.g. Readme, Controls; manager mode only), --out=<path>, --url=<base>, --timeout=<ms>. Then look at shot.png — a healthy run prints console/page errors: 0.

Story ids are <kebab-component>--<kebab-story>, e.g. uui-button--default, uui-button--looks-and-colors. Browse the sidebar in manager mode to discover them; docs pages use --docs.

Run (human path)

npm run storybook then open http://localhost:6006 in a browser. Useless headless — use the driver above instead.

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

Gotchas

  • npm run storybook is analyze + storybook dev. The analyze step (Web Component Analyzer over 96 files) prints alarming !!!!!!! WARNING !!!!!!! banners about custom-elements.json being "experimental" — these are normal, not failures.
  • Cold vs warm start. First launch waits on the analyze step (~1–2 min). A rebuild within the same checkout is cached and ready in ~5 s.
  • The driver does not start Storybook — it only polls for it. Start Storybook first, or the driver fails fast with "Storybook not reachable… is npm run storybook running?".
  • Two screenshot modes matter. --iframe hits /iframe.html?id=… and captures just the rendered component (clean shots). Without it you get the full manager UI (sidebar + canvas + addon panels) — needed when you want --panel.
  • Components are in shadow DOM. Playwright's getByRole/getByText pierce shadow roots (the driver's --panel click relies on this); raw CSS selectors won't cross shadow boundaries.
  • Background-process trap: launching npm run storybook with a trailing & inside an already-backgrounded shell detaches it and it gets reaped when the wrapper returns. Launch it directly via the background mechanism instead.

Troubleshooting

  • Storybook not reachable at http://localhost:6006 after 120000ms → Storybook isn't up. Start npm run storybook, wait for the Storybook ready! banner / a 200 on :6006.
  • browserType.launch: Executable doesn't exist → run npx playwright install chromium.
  • Driver exits 1 → it found console/page errors and printed the first 10. Inspect them; a clean component renders with 0.

Tests

The project's test suite is npm run test (Vitest browser tests in Chromium). Not exercised by this skill; some WebKit/email-validation tests are known-flaky.

© umbraco, 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/run-umbraco-ui of umbraco/Umbraco.UI.

  • SKILL.md
  • driver.mjs

Open the folder on GitHubat commit 7394efd

Compare with similar skills

Run Umbraco UI 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.

Run Umbraco UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Run Umbraco UI this skillumbraco/Umbraco.UI152—~1.2kAutomated safety check: PassMIT
Design Project Scaffoldplugin87/ux-ui-agent-skills1.6k—~1.1kAutomated safety check: PassMIT
Extract Design Systemarvindrk/extract-design-system2371 repos~514Automated safety check: PassMIT
Website Design Taste Extractorsenlindesign/taste-skill385—~5.3kAutomated safety check: PassNone
Eval Graphicselvisun/newsjack1.5k—~2kAutomated safety check: PassMIT
AnyDesign Design Analyzeravelikiy/great_cto1021 repos~3.2kAutomated safety check: PassMIT

Similar skills

  • Design Project Scaffold

    plugin87/ux-ui-agent-skills

    Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need.

    1.6k GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Extract Design System

    arvindrk/extract-design-system

    Extract design primitives from a public website and generate starter token files for your project.

    237 GitHub starsUsed in 1 repo~514 tokens
    Frontend & DesignAuto-check passed

  • Website Design Taste Extractor

    senlindesign/taste-skill

    Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.

    385 GitHub stars~5.3k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Eval Graphics

    elvisun/newsjack

    Turn an eval study's numbers into on-brand, publish-ready figures using the Newsjack chart room (the eval design system), then validate them with Playwright.

    1.5k GitHub stars~2k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • AnyDesign Design Analyzer

    avelikiy/great_cto

    Analyzes a screenshot, website or Figma file and writes a `design.md` with its token system, component inventory and reconstruction notes, or an `element.md` for one element.

    102 GitHub starsUsed in 1 repo~3.2k tokens
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

Works with

Categories

Questions about Run Umbraco UI

What does Run Umbraco UI do?

Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook. UI.UI (UUI) web-component library via its Storybook.

When should I use Run Umbraco UI?

Run Umbraco UI fits situations like: asked to run/start/launch Storybook; screenshot a UUI component; drive the component library in a browser; build/preview the components.

How do I install Run Umbraco UI in Claude Code?

Run `npx skills add umbraco/Umbraco.UI --skill run-umbraco-ui -a claude-code`. Or copy the skill folder (.claude/skills/run-umbraco-ui in umbraco/Umbraco.UI) into .claude/skills/run-umbraco-ui in your project. Claude Code loads it when a task matches its description.

How do I install Run Umbraco UI in Codex?

Run `npx skills add umbraco/Umbraco.UI --skill run-umbraco-ui -a codex`. Or copy the skill folder (.claude/skills/run-umbraco-ui in umbraco/Umbraco.UI) into .agents/skills/run-umbraco-ui in your project. Codex loads it when a task matches its description.

Can I use Run Umbraco UI 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 umbraco/Umbraco.UI --skill run-umbraco-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/run-umbraco-ui, .gemini/skills/run-umbraco-ui, .github/skills/run-umbraco-ui and .opencode/skills/run-umbraco-ui in your project.

What does Run Umbraco UI need to run?

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

Does Run Umbraco UI access the network?

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

Is Run Umbraco UI 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 Run Umbraco UI use?

Run Umbraco UI 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 Run Umbraco UI use?

About 1.2k tokens (SKILL.md is roughly 4.8k 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 Run Umbraco UI?

Skills that share tags, products or a category with Run Umbraco UI: Design Project Scaffold (plugin87/ux-ui-agent-skills, 1.6k stars), Extract Design System (arvindrk/extract-design-system, 237 stars), Website Design Taste Extractor (senlindesign/taste-skill, 385 stars) and Eval Graphics (elvisun/newsjack, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Run Umbraco UI?

umbraco (a GitHub organization) maintains it in umbraco/Umbraco.UI, which has 152 GitHub stars. The repository was last updated on October 9, 2026.

Source: umbraco/Umbraco.UI on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.