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 Overlay

by ansible in ansible/ansible-ui

Product-specific frontend wrappers, API clients, and paths for ansible-ui.

Apache-2.0Auto-check: notesDevOps & Cloud

Install Frontend Overlay

skills CLI
$ npx skills add ansible/ansible-ui --skill frontend-overlay -a claude-code

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

GitHub CLI
$ gh skill install ansible/ansible-ui frontend-overlay --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/ansible/ansible-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/frontend-overlay .claude/skills/frontend-overlay && 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-overlay
GitHub stars
113
Token cost
~2.5k tokens
SKILL.md length
816 words
Files
1
Skills in repo
2
Repo updated
First seen
Licence
Apache-2.0

At a glance

Product-specific frontend wrappers, API clients, and paths for ansible-ui.

  • Reviewing UI in this monorepo
  • SKILL.md covers Stack, Paths, MCP-assisted implementation and Wrappers (use these, not raw…, plus 10 more sections
  • Calls npm, npx and rg; needs PLATFORM_PASSWORD
  • Tasks that involve Infrastructure as code

What it does

Frontend Overlay is an agent skill from ansible/ansible-ui. Product-specific frontend wrappers, API clients, and paths for ansible-ui. Use when implementing or reviewing UI in this monorepo.

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

It sits in DevOps & Cloud, covering Infrastructure as code and Monorepo tooling. It works with Ansible, npm, Model Context Protocol and Playwright. The repository describes itself as: The UIs for Ansible Projects such as AWX, EDA, and HUB. The licence is Apache-2.0.

When your agent uses it

  • Reviewing UI in this monorepo
  • Tasks that involve Infrastructure as code
  • Tasks that involve Monorepo tooling

Example prompts

  • “/frontend-overlay”

Requirements

  • Node.js

What it can do on your machine

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

    • npm
    • npx
    • rg

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

  • Network

    No URLs in SKILL.md. Its commands use npm and 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 these keys or tokens, usually read from environment variables:

    • PLATFORM_PASSWORD

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

Context cost

Frontend Overlay loads about 2.5k tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 816 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:100
    - UI URL: `PLATFORM_UI` in `playwright/.env` (typically `https://localhost:4100`, HTTPS in browser)
  • NoteMentions a .env fileSKILL.md:102
    - Secret file path: `playwright/.env` (`PLATFORM_USERNAME`, `PLATFORM_PASSWORD`). Never print values

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 ansible/ansible-ui at commit 09e86ed, republished under its Apache-2.0 licence (© ansible). 816 words, ~2,522 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-overlay/SKILL.md (or your agent's skills folder).
name
frontend-overlay
description
Product-specific frontend wrappers, API clients, and paths for ansible-ui. Use when implementing or reviewing UI in this monorepo.

Overlay — ansible-ui

Stack

  • React 18, not 19 — no ref-as-prop, no use(Context) (exact version in package.json)
  • PatternFly 6 (exact version in package.json)
  • Node version from .nvmrc and engines in root package.json (CI uses Node 24; some jobs still use Node 20). Use the npm that ships with that Node — do not cite stale npm major versions in skills or comments.
  • Monorepo/build tooling: Nx
  • Server state: SWR
  • Router: react-router

Paths

  • UI package root: repo root (npm workspaces)
  • Components: framework/ (shared), frontend/{awx,eda,hub,chatbot}/, platform/
  • Hooks: workspace hooks/ or frontend/common/hooks/
  • API helpers: awxAPI / edaAPI / hubAPI / gatewayAPI (not a generated typed client)
  • Mock API handlers: MSW in Vitest. Playwright also has a mock project
  • E2E: playwright/ (playwright.config.ts, commands/, tests/, utils/)
  • Storybook command and port: N/A — no Storybook
  • Check command: npm test (eslint + tsc + prettier + vitest). There is no npm run check
  • Also npm run eslint:guardrails on touched frontend/ / platform/ / framework/ .ts/.tsx. Advisory in CI; thresholds in .eslintrc.guardrails.json; do not add new warnings (see coding_standards §15)
  • Test command: npm run vitest (unit); Playwright from playwright/
  • Dev server: npm start (from platform/)
  • Build all workspaces: npm run build
  • Fix lint + formatting: npm run fix (npm run prettier:fix for formatting only)
  • Instruction files: CLAUDE.md (symlink AGENTS.md)

MCP-assisted implementation

Before implementing UI, consult patternfly-mcp for the official PF6 API and accessibility guidance, then search framework/ and the relevant workspace for an existing wrapper. For workflow or browser changes, use playwright to inspect the running UI; use chrome-devtools for console, network, layout, and performance diagnosis. Do not invent component props when an MCP or official documentation lookup can answer the question.

Wrappers (use these, not raw PatternFly)

Global/shared components live in the framework/ package — search there first before reaching for raw PatternFly or writing a new component.

PatternComponent / hookNotes
Page shellPageLayoutframework/
Page headerPageHeaderframework/
Content panelPage helpers in framework/Search framework/ before new components
List + table + paginationPageTable + useAwxView / useEdaView / useHubViewWorkspace view hook
Empty (no data / no filter / error)framework empty states
Confirmationframework dialog / PF ModalReversible vs destructive
Error with retryworkspace error adapterSee coding_standards
FormsAwxPageForm / EdaPageForm / HubPageForm / PlatformPageFormSee framework/PageForm/ for shared primitives; use the workspace wrapper, not raw PageForm
Toast / alert helperframework alertsaddAlert({ variant, title, children? }) — body is children, not description; always set variant

API

  • Call the backend with workspace tagged templates + SWR / CRUD hooks (useGet, usePostRequest, …)
  • Forbidden: hardcoded /api/... paths (ESLint-enforced — custom rule); mocking requestGet instead of MSW
  • Error shape: per-workspace adapters (not RFC 9457 everywhere)

Permissions

  • Hook names: workspace RBAC helpers in coding_standards
  • Disabled-with-tooltip: existing page action patterns
  • Nav / route guards: workspace routing

Icons

  • PatternFly icons or existing framework icons in framework/

Router

  • react-router. Use <Link> for in-app navigation, <Button> for actions
  • N/A as a single helper — follow existing docsLinks patterns in-tree

Visual regression

  • Page registry path: playwright/tests/visual/ (one spec per representative page)
  • Check-baselines command: npx playwright test tests/visual/ --project "live chromium" from playwright/
  • Never block PRs on full-page screenshots (on-demand + weekly; live-only @not_mock)
  • Snapshot directory: playwright/tests/visual/ Linux -linux.png suffix
  • Overlay module (vr.overlay.ts): N/A
Show full SKILL.md (314 more words)Show less

E2E (see testing_guidelines for write rules)

  • Playwright config path: playwright/playwright.config.ts
  • Default mode: live (npm run live in playwright/) or mock (npx playwright test --project 'mock chromium')
  • UI URL: PLATFORM_UI in playwright/.env (typically https://localhost:4100, HTTPS in browser)
  • Extra env (shell): PLATFORM_SERVER=https://localhost:443; optional AWX_SERVER, EDA_SERVER, HUB_SERVER
  • Secret file path: playwright/.env (PLATFORM_USERNAME, PLATFORM_PASSWORD). Never print values
  • How to check the stack is up: UI listens on 4100; do not start a second copy
  • Commands (from playwright/):
    • npm run live — live chromium
    • npx playwright test --project 'mock chromium'
    • npx playwright test tests/path/to/test.spec.ts --project 'live chromium'
    • Fail-fast: add --max-failures=1 --retries=0
    • Debug: --debug; traces: npx playwright show-trace trace.zip
  • Write rules, table helpers, MCP SSL bypass (thisisunsafe): .claude/skills/testing_guidelines.md
  • Unique-name helper: createE2EName() in playwright/commands/
  • Cleanup helper: setupAfter, resource *.api.delete, confirmAndAssertDeletion

Troubleshooting

  • Build errors: npm run clean then npm ci
  • Type errors: check the TypeScript config in the relevant workspace
  • Logs: platform → platform server logs; dev → browser console + terminal output; tests → Playwright reports and traces

Review remainder (not currently linted)

MissGrep / check
Raw PageForm in a workspace UIPageForm import from framework in frontend/ or platform/
fireEvent in testsfireEvent in *.test.tsx
Translated string used in logicif (t( or === t(
Alert body in description, or addAlert without variantrg "addAlert\(\{" -A8 --glob '!*.test.*' | rg "description:" (any hit) — body goes in children; every addAlert sets variant (title: may push children: several lines down)
Resource use*Actions/Filters/Columns hook not under a hooks/ dirfd "use.*(Actions|Filters|Columns)\.tsx$" | rg -v "/hooks/" (≈95% live under hooks/)
Test placed in a __tests__/ dir instead of colocated *.test.tsxfd -t d "__tests__" (repo has none; unit tests colocate beside source)
userEvent used without a userEvent.setup() handletest uses userEvent.click/type but has no const user = userEvent.setup() (≈94% use setup())
Raw string path in navigate('/...')rg "navigate\('/" -g '*.tsx' -g '!*.test.tsx' — use usePageNavigate + route enum, or <Link>

Review harvest

  • Default GitHub repos: ansible/ansible-ui
  • Default --since window: 90 days
  • Recurring reviewer logins: N/A

© ansible, 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

Just SKILL.md in .claude/skills/frontend-overlay of ansible/ansible-ui.

Open the folder on GitHubat commit 09e86ed

Compare with similar skills

Frontend Overlay 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 Overlay compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Overlay this skillansible/ansible-ui113—~2.5kAutomated safety check: NotesApache-2.0
Project Releaseswimmwatch/cloakbrowser-mcp164—~1.9kAutomated safety check: PassMIT
ReleaseWebMCP-org/npm-packages104—~1.6kAutomated safety check: NotesMIT
Project Docs Maintainerswimmwatch/cloakbrowser-mcp164—~569Automated safety check: PassMIT
Ever Worksever-works/ever-works162—~2.2kAutomated safety check: PassAGPL-3.0
Repo Hygiene Scan and FixQwenLM/qwen-code28k—~1.7kAutomated safety check: PassApache-2.0

Similar skills

  • Project Release

    swimmwatch/cloakbrowser-mcp

    Prepare, publish, verify, or recover a cloakbrowser-mcp release only when the user explicitly requests release work.

    164 GitHub stars~1.9k tokensUpdated today
    Agent WorkflowsAuto-check passed

  • Release

    WebMCP-org/npm-packages

    Release the @mcp-b monorepo with Changesets and pnpm, using npm trusted publishing in GitHub Actions.

    104 GitHub stars~1.6k tokensUpdated today
    DevelopmentAuto-check: notes

  • Project Docs Maintainer

    swimmwatch/cloakbrowser-mcp

    Maintain, organize, consolidate, or audit the cloakbrowser-mcp documentation set only when the user explicitly requests project documentation maintenance or an authorized public change requires it.

    164 GitHub stars~569 tokensUpdated today
    DevelopmentAuto-check passed

  • Ever Works

    ever-works/ever-works

    Repo-specific guide to the Ever Works monorepo (ever-works/ever-works) — its pnpm + Turborepo layout, the per-workspace test runners (Jest vs Vitest vs Playwright), file-naming and import-alias…

    162 GitHub stars~2.2k tokensUpdated today
    Testing & QAAuto-check passed

  • Repo Hygiene Scan and Fix

    QwenLM/qwen-code

    Scheduled CI skill that scans a repository for small, certain docs, test and code hygiene issues and fixes them on one branch with a commit per finding.

    28k GitHub stars~1.7k tokensUpdated today
    DevOps & CloudAuto-check passed

  • Terravision Cloud Diagrams

    patrickchugh/terravision

    Draw cloud architecture diagrams for AWS, Azure or GCP with the official provider icon sets, using TerraVision.

    1.6k GitHub stars~5.6k tokensUpdated 2 days ago
    DevOps & CloudAuto-check: notes

More from ansible/ansible-ui

  • Frontend Playwright E2E

    ansible/ansible-ui

    Write, run, and debug Playwright E2E / integration / live tests.

    113 GitHub stars~2.5k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about Frontend Overlay

What does Frontend Overlay do?

Product-specific frontend wrappers, API clients, and paths for ansible-ui. Frontend Overlay is an agent skill from ansible/ansible-ui. Product-specific frontend wrappers, API clients, and paths for ansible-ui.

When should I use Frontend Overlay?

Frontend Overlay fits situations like: reviewing UI in this monorepo; tasks that involve Infrastructure as code; tasks that involve Monorepo tooling.

How do I install Frontend Overlay in Claude Code?

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

How do I install Frontend Overlay in Codex?

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

Can I use Frontend Overlay 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 ansible/ansible-ui --skill frontend-overlay -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-overlay, .gemini/skills/frontend-overlay, .github/skills/frontend-overlay and .opencode/skills/frontend-overlay in your project.

What does Frontend Overlay need to run?

Going by SKILL.md and its folder, Frontend Overlay needs the command-line tools its instructions call (npm, npx and rg) and credentials named PLATFORM_PASSWORD. Our summary lists: Node.js.

Does Frontend Overlay access the network?

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

Is Frontend Overlay safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Frontend Overlay use?

Frontend Overlay 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 Overlay use?

About 2.5k tokens (SKILL.md is roughly 10k 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 Frontend Overlay?

Skills that share tags, products or a category with Frontend Overlay: Project Release (swimmwatch/cloakbrowser-mcp, 164 stars), Release (WebMCP-org/npm-packages, 104 stars), Project Docs Maintainer (swimmwatch/cloakbrowser-mcp, 164 stars) and Ever Works (ever-works/ever-works, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Overlay?

ansible (a GitHub organization) maintains it in ansible/ansible-ui, which has 113 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 9, 2026.

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