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

Formax Approval UI Workflow

by yusifeng in yusifeng/formax

A skill your agent uses when adding or changing any Approval prompt/presenter.

MITAuto-check passed

Install Formax Approval UI Workflow

skills CLI
$ npx skills add yusifeng/formax --skill formax-approval-ui-workflow -a claude-code

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

GitHub CLI
$ gh skill install yusifeng/formax formax-approval-ui-workflow --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/yusifeng/formax.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/formax-approval-ui-workflow .claude/skills/formax-approval-ui-workflow && 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
formax-approval-ui-workflow
GitHub stars
194
Token cost
~1.1k tokens
SKILL.md length
402 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when adding or changing any Approval prompt/presenter.

  • Changing any Approval prompt/presenter
  • SKILL.md covers Goal, Where to change what, Patterns and Tests to update, plus 1 more section
  • Calls bun

What it does

Formax Approval UI Workflow is an agent skill from yusifeng/formax. Use when adding or changing any Approval prompt/presenter.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Terminal-first AI assistant for software engineering tasks (inspired by Claude Code v2.0.67). The licence is MIT.

When your agent uses it

  • Changing any Approval prompt/presenter

Example prompts

  • “/formax-approval-ui-workflow”

What it can do on your machine

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

    Shell commands in SKILL.md call:

    • bun

    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

Formax Approval UI Workflow loads about 1.1k tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 402 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~22
When it runs · the whole SKILL.md, loaded when a task matches
~1.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 yusifeng/formax at commit 1b0c3f3, republished under its MIT licence (© yusifeng). 402 words, ~1,127 tokens.

Download SKILL.mdSave it as .claude/skills/formax-approval-ui-workflow/SKILL.md (or your agent's skills folder).
name
formax-approval-ui-workflow
description
Use when adding or changing any Approval prompt/presenter.

formax-approval-ui-workflow

Goal

  • Keep Approval prompts visually consistent + Claude Code-aligned (only when explicitly requested).
  • Preserve existing behavior + keyboard flow (Enter/Esc/Shift+Tab), avoid UI regressions.
  • Keep preview rendering fast and safe (no sync IO in render; guard against quadratic diffs).

Where to change what

  • Shared approval “chrome”
    • packages/core/src/components/ui/ApprovalHeader.tsx (top divider + title color)
    • packages/core/src/components/ui/ConfirmMenu.tsx (numbered options + selection color)
  • Preview (optional section under header)
    • packages/core/src/components/tool/ApprovalPreview.tsx (simple file preview)
    • packages/core/src/components/tool/PatchApprovalPreview.tsx (edit-file wrapper: header + file + preview)
    • packages/core/src/components/tool/PatchPreview.tsx (diff rendering + performance guards)
  • Per-tool approval prompts (labels, options, allow/ask/deny / remember write paths)
    • packages/core/src/components/tool/bashApprovalPrompt.tsx
    • packages/core/src/components/tool/fsReadApprovalPrompt.tsx
    • packages/core/src/components/tool/fsWriteApprovalPrompt.tsx
    • packages/core/src/components/tool/skillApprovalPrompt.tsx
    • (if present) packages/core/src/components/tool/editApprovalPrompt.tsx (legacy)
  • Tool presenters that mount approval prompts
    • packages/core/src/tools/modules/bash/presenter.tsx
    • packages/core/src/tools/modules/read/presenter.tsx
    • packages/core/src/tools/modules/write/presenter.tsx
    • packages/core/src/tools/modules/edit/presenter.tsx
    • packages/core/src/tools/modules/skill/presenter.tsx
  • Colors / theme
    • packages/core/src/tui/theme.ts (theme.permission, theme.text, theme.diff.*)

Patterns

  • Layout skeleton (keep consistent)

    • [Top divider line]
    • Title (color = theme.permission)
    • Optional Preview box
    • Question line (e.g. “Do you want to … <file>?”)
    • Options list (numbered)
    • Bottom hint (e.g. “Esc to cancel”)

  • Options rendering (text + emphasis)

    • If an option needs mixed styling (e.g. make capture-terminal/ bold/white): make ConfirmMenu accept ReactNode labels.
    • Ensure selection color wins over nested Text color={...} when highlighted:
      • Prefer passing “unstyled” children and let row wrapper decide color, or
      • In nested text, only set bold, avoid hardcoding color unless required.

  • Preview performance (must not block UI)

    • No fs.readFileSync/fs.statSync/blocking IO inside render path (useMemo included).
    • If file context is needed (e.g. line numbers), compute via async fs/promises + useEffect.

  • Diff safety (avoid OOM / hangs)

    • Any token/word diff based on DP/LCS must have a hard cap (max cells).
    • If cap exceeded: fall back to truncated / line-only / “too large to diff” preview.
Show full SKILL.md (154 more words)Show less

Tests to update

  • Unit/component tests (minimum regression set):

    • packages/core/src/components/ui/ConfirmMenu.test.tsx (ReactNode label + selection color)
    • packages/core/src/components/tool/bashApprovalPrompt.test.tsx (if exists)
    • packages/core/src/components/tool/fsReadApprovalPrompt.test.tsx (if exists)
    • packages/core/src/components/tool/fsWriteApprovalPrompt.test.tsx (if exists)
    • packages/core/src/components/tool/skillApprovalPrompt.test.tsx (if exists)
    • packages/core/src/tools/modules/edit/presenter.test.tsx (preview/diff layout + performance guard)

  • Manual spot-check (fast)

    • Trigger one approval for each kind: Bash, Read(outside workspace), Write, Edit.
    • Verify: top divider, title color, option numbering, selection color, Esc behavior.

Guardrails

  • Do not change UI copy/spacing/colors unless explicitly requested for Claude Code parity.
  • Treat UI output vs model context injection as orthogonal; don’t change injection behavior as a side-effect of approval UI work.
  • Do not add a syntax highlighting library (keep preview rendering lightweight).
  • Do not broaden scope (“refactor approval system”); only touch what the prompt requires.
  • Keep rendering responsive:
    • no sync IO in render
    • hard caps for quadratic diff algorithms
  • Loop discipline:
    • run targeted tests first, then bun run test if needed
    • run review before committing using AGENTS.md -> Review Profile (Single Source of Truth); fix all high/medium findings

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

Files

Just SKILL.md in .codex/skills/formax-approval-ui-workflow of yusifeng/formax.

Open the folder on GitHubat commit 1b0c3f3

Compare with similar skills

Formax Approval UI Workflow 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.

Formax Approval UI Workflow compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Formax Approval UI Workflow this skillyusifeng/formax194—~1.1kAutomated safety check: PassMIT
Presentationsasgeirtj/system_prompts_leaks69k—~858Automated safety check: PassCC0-1.0
PresentationRightNow-AI/openfang18k—~829Automated safety check: PassApache-2.0
AI Presenter VideoNousResearch/hermes-agent252k—~2.3kAutomated safety check: PassMIT
Make Changesremix-run/remix33k—~2.4kAutomated safety check: PassMIT
Orch Change Featureaffaan-m/ECC276k1 repos~420Automated safety check: PassMIT

Similar skills

  • Presentations

    asgeirtj/system_prompts_leaks

    Help choose a presentation's audience, story, outline, or use of evidence and visuals.

    69k GitHub stars~858 tokensUpdated today
    Documents & OfficeAuto-check passed

  • Presentation

    RightNow-AI/openfang

    Presentation expert for slide structure, storytelling, visual design, and audience engagement

    18k GitHub stars~829 tokensUpdated 3 mo ago
    Documents & OfficeAuto-check passed

  • AI Presenter Video

    NousResearch/hermes-agent

    Produces a presenter-led video from a topic or script plus one authorized presenter image, with captions, lip-sync checks and acceptance reports.

    252k GitHub stars~2.3k tokensUpdated today
    Media & CreativeAuto-check passed

  • Make Changes

    remix-run/remix

    Create or update Remix repo change files under packages//.changes.

    33k GitHub stars~2.4k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Orch Change Feature

    affaan-m/ECC

    Orchestrate altering an existing, working feature to new desired behavior — update its tests to the new spec, change the implementation to match, review, and gated commit.

    276k GitHub starsUsed in 1 repo~420 tokens
    Auto-check passed

  • Operator Approval Loop

    affaan-m/ECC

    Operator approval contract with internal filing notices for agent-drafted outbound messages, hashed drafts, epoch-keyed decisions, durable delivery claims and receipts, and a pre-draft baseline gate.

    276k GitHub stars~3.3k tokensUpdated today
    Auto-check passed

More from yusifeng/formax

All 21 skills in this repo

  • Formax Repomix Handoff Workflow

    yusifeng/formax

    A skill your agent uses when preparing a Formax code handoff: selecting files, generating repomix bundles, and writing a high-quality prompt for WebGPT or another coding agent with clear constraints…

    194 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Skill Capture

    yusifeng/formax

    A skill your agent uses when we want to turn a just-finished Formax workflow (e.g.

    194 GitHub stars~530 tokensUpdated 2 mo ago
    Auto-check passed

  • Analyze Task

    yusifeng/formax

    A skill your agent uses when a Formax repository task is non-trivial and you should analyze goals, non-goals, boundaries, data/type/interface impact, contract impact, test strategy, and whether an…

    194 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Dev Loop Workflow

    yusifeng/formax

    A skill your agent uses when working on Formax code changes and you need a disciplined dev loop: keep a single mainline task, avoid scope drift, run only targeted tests (no coverage), avoid partial…

    194 GitHub stars~686 tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Tool UI Blocks Workflow

    yusifeng/formax

    Implement or refactor Formax tool transcript UI using the Tool UI Blocks (C-lite) pattern (ToolUiBlocks renderer + blocks presenters) to avoid touching many tool presenter files; use when adjusting…

    194 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Semantics Parity Workflow

    yusifeng/formax

    A skill your agent uses when implementing or modifying behavior that must stay consistent across TUI and Web (mode/input/tool/replay/order).

    194 GitHub stars~1.1k tokensUpdated 2 mo ago
    Auto-check passed

Questions about Formax Approval UI Workflow

What does Formax Approval UI Workflow do?

A skill your agent uses when adding or changing any Approval prompt/presenter. Formax Approval UI Workflow is an agent skill from yusifeng/formax. Use when adding or changing any Approval prompt/presenter.

When should I use Formax Approval UI Workflow?

Formax Approval UI Workflow fits situations like: changing any Approval prompt/presenter.

How do I install Formax Approval UI Workflow in Claude Code?

Run `npx skills add yusifeng/formax --skill formax-approval-ui-workflow -a claude-code`. Or copy the skill folder (.codex/skills/formax-approval-ui-workflow in yusifeng/formax) into .claude/skills/formax-approval-ui-workflow in your project. Claude Code loads it when a task matches its description.

How do I install Formax Approval UI Workflow in Codex?

Run `npx skills add yusifeng/formax --skill formax-approval-ui-workflow -a codex`. Or copy the skill folder (.codex/skills/formax-approval-ui-workflow in yusifeng/formax) into .agents/skills/formax-approval-ui-workflow in your project. Codex loads it when a task matches its description.

Can I use Formax Approval UI Workflow 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 yusifeng/formax --skill formax-approval-ui-workflow -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/formax-approval-ui-workflow, .gemini/skills/formax-approval-ui-workflow, .github/skills/formax-approval-ui-workflow and .opencode/skills/formax-approval-ui-workflow in your project.

What does Formax Approval UI Workflow need to run?

Going by SKILL.md and its folder, Formax Approval UI Workflow needs the command-line tools its instructions call (bun).

Does Formax Approval UI Workflow 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 Formax Approval UI Workflow 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 Formax Approval UI Workflow use?

Formax Approval UI Workflow 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 Formax Approval UI Workflow use?

About 1.1k tokens (SKILL.md is roughly 4.5k 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 Formax Approval UI Workflow?

Skills that share tags, products or a category with Formax Approval UI Workflow: Presentations (asgeirtj/system_prompts_leaks, 69k stars), Presentation (RightNow-AI/openfang, 18k stars), AI Presenter Video (NousResearch/hermes-agent, 252k stars) and Make Changes (remix-run/remix, 33k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Formax Approval UI Workflow?

yusifeng (a GitHub user) maintains it in yusifeng/formax, which has 194 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on July 24, 2026.

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