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

Frontend UI

by oomol-lab in oomol-lab/open-flow

Implement and review Open Flow frontend components, styling, layout, and interactions.

Apache-2.0Auto-check passedFrontend & Design

Install Frontend UI

skills CLI
$ npx skills add oomol-lab/open-flow --skill frontend-ui -a claude-code

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

GitHub CLI
$ gh skill install oomol-lab/open-flow frontend-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/oomol-lab/open-flow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-ui .claude/skills/frontend-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
frontend-ui
GitHub stars
226
Token cost
~857 tokens
SKILL.md length
386 words
Files
8 (incl. references)
Skills in repo
2
Repo updated
First seen
Licence
Apache-2.0

At a glance

Implement and review Open Flow frontend components, styling, layout, and interactions.

  • Canvas and Workbench integration
  • SKILL.md covers Core workflow and Task-specific references
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Related Lab stories in this repository

What it does

Frontend UI is an agent skill from oomol-lab/open-flow. Implement and review Open Flow frontend components, styling, layout, and interactions. Use for button spacing, visual balance, themes, forms, canvas and Workbench integration, accessibility, and related Lab stories in this repository. Excludes backend-only changes and unrelated frontend projects.

Its SKILL.md is about 860 tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `references/canvas-workbench.md`, `references/forms-and-editors.md` and `references/property-panel-layout.md`).

It sits in Frontend & Design, covering Frontend development. It works with Docker, React, JavaScript and TypeScript. The repository describes itself as: Build workflows you can see, code, run, and own. Open-source visual workflow automation with real TypeScript, isolated execution, and a self-hosted Control API. The licence is Apache-2.0.

When your agent uses it

  • Canvas and Workbench integration
  • Related Lab stories in this repository

Example prompts

  • “/frontend-ui”

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

Frontend UI loads about 857 tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 386 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~857
With references · SKILL.md plus every file in references/, read only if the agent opens them
~12k

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 oomol-lab/open-flow at commit b72a22b, republished under its Apache-2.0 licence (© oomol-lab). 386 words, ~857 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-ui/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
frontend-ui
description
Implement and review Open Flow frontend components, styling, layout, and interactions. Use for button spacing, visual balance, themes, forms, canvas and Workbench integration, accessibility, and related Lab stories in this repository. Excludes backend-only changes and unrelated frontend projects.

Open Flow Frontend Development

This skill defines frontend conventions for shared UI, forms, the canvas, Workbench, and host integration. Paths beginning with src/ are relative to packages/open-flow/; other repository paths are relative to the repository root. Use production code as the source for component usage.

Core workflow

  • Identify the component that owns the behavior and its affected consumers. Correct shared behavior at its owner and keep feature-specific requirements local.
  • Prefer existing components, tokens, and public interfaces. Preserve required state, language, theme, coordinate, clipping, stacking, and dismissal contexts when composing UI.
  • Components own interaction semantics. Preserve keyboard operation, accessible names, state communication, focus restoration, expected opening and closing behavior, real link semantics, and reduced-motion behavior.
  • Icon-only action buttons and links must use the shared Tooltip as well as a localized accessible name. A native title is not a substitute. Hosts use HostTooltip from @oomol-lab/open-flow/ui; product components use the shared UI Tooltip primitives. Verify keyboard focus and hover, preserve the surrounding theme, and keep dynamic hints in sync with the current state.
  • When adding, replacing, or choosing icons, use the iconify-icons skill. Lucide icons use i-lucide-light:<name>, not i-lucide:<name>; existing lucide-react components use strokeWidth={1.5}.
  • Prefer Lab for appearance and interaction checks. Maintain related Stories and add missing states. Supplement Lab with the product when host layout or a complete flow matters. Consult the Lab documentation only when changing Lab infrastructure or deployment, or when an unfamiliar Story API requires it.
  • Reuse an existing Lab or dev service when available. Stop and confirm termination of any service you start; leave pre-existing services running.
  • For appearance or interaction changes, verify the affected states in Lab or the product. Static checks do not establish visual correctness. Report material verification gaps.
Show full SKILL.md (102 more words)Show less

Task-specific references

Read only the references relevant to the task; read more than one when the change crosses domains.

  • For Value Node, Inputs, value editors, inspector navigation, field or node settings, and property-panel layout or interaction, start with Property panel contracts, then read only the routed detail relevant to the task.
  • For shared controls, themes, host-facing UI, spacing, visual styling, shared browser UI, or localization, read Shared UI and visual design.
  • For standalone forms, Schema-controlled values, validation drafts, or shared code editors, read Forms and editors.
  • For canvas, Workbench, sidebar composition, node menus, canvas popovers, or undo/redo behavior, read Canvas and Workbench.

© oomol-lab, Apache-2.0. 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 7 other files (references) in .agents/skills/frontend-ui of oomol-lab/open-flow.

  • SKILL.md
  • references/canvas-workbench.md
  • references/forms-and-editors.md
  • references/property-panel-layout.md
  • references/property-panel-navigation.md
  • references/property-panel-values.md
  • references/property-panel.md
  • references/shared-ui.md

Open the folder on GitHubat commit b72a22b

Compare with similar skills

Frontend 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.

Frontend UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend UI this skilloomol-lab/open-flow226—~857Automated safety check: PassApache-2.0
Javascript Typescriptjulianromli/opencode-template144—~783Automated safety check: PassMIT
Creating Docs Code Exampleshandsontable/handsontable22k—~2.2kAutomated safety check: PassCustom licence
Bit CLIteambit/bit18k—~2kAutomated safety check: WarnCustom licence
Ink Tui Wizardnovuhq/novu40k—~1.9kAutomated safety check: PassMIT
Generate Release Notesteambit/bit18k—~2.2kAutomated safety check: PassCustom licence

Similar skills

  • Javascript Typescript

    julianromli/opencode-template

    JavaScript and TypeScript development with ES6+, Node.js, React, and modern web frameworks.

    144 GitHub stars~783 tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Creating Docs Code Examples

    handsontable/handsontable

    Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.

    22k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

  • Bit CLI

    teambit/bit

    MUST consult before running ANY bit command. An agent skill from teambit/bit.

    18k GitHub stars~2k tokensUpdated today
    DevelopmentAuto-check: warnings

  • Ink Tui Wizard

    novuhq/novu

    Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.

    40k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Generate Release Notes

    teambit/bit

    Generate comprehensive release notes for Bit from git commits and pull requests.

    18k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from oomol-lab/open-flow

  • Iconify Icons

    oomol-lab/open-flow

    Search local Iconify JSON and use UnoCSS icon classes in the Open Flow repository.

    226 GitHub stars~850 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend UI

What does Frontend UI do?

Implement and review Open Flow frontend components, styling, layout, and interactions. Frontend UI is an agent skill from oomol-lab/open-flow. Implement and review Open Flow frontend components, styling, layout, and interactions.

When should I use Frontend UI?

Frontend UI fits situations like: canvas and Workbench integration; related Lab stories in this repository.

How do I install Frontend UI in Claude Code?

Run `npx skills add oomol-lab/open-flow --skill frontend-ui -a claude-code`. Or copy the skill folder (.agents/skills/frontend-ui in oomol-lab/open-flow) into .claude/skills/frontend-ui in your project. Claude Code loads it when a task matches its description.

How do I install Frontend UI in Codex?

Run `npx skills add oomol-lab/open-flow --skill frontend-ui -a codex`. Or copy the skill folder (.agents/skills/frontend-ui in oomol-lab/open-flow) into .agents/skills/frontend-ui in your project. Codex loads it when a task matches its description.

Can I use Frontend 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 oomol-lab/open-flow --skill frontend-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/frontend-ui, .gemini/skills/frontend-ui, .github/skills/frontend-ui and .opencode/skills/frontend-ui in your project.

What does Frontend UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend UI is instructions for the agent only.

Does Frontend UI access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

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

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

How many tokens does Frontend UI use?

About 857 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to Frontend UI?

Skills that share tags, products or a category with Frontend UI: Javascript Typescript (julianromli/opencode-template, 144 stars), Creating Docs Code Examples (handsontable/handsontable, 22k stars), Bit CLI (teambit/bit, 18k stars) and Ink Tui Wizard (novuhq/novu, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend UI?

oomol-lab (a GitHub organization) maintains it in oomol-lab/open-flow, which has 226 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 8, 2026.

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