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

New UI Surface

by openfootmanager in openfootmanager/openfootmanager

Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing…

GPL-3.0Auto-check passedFrontend & Design

Install New UI Surface

skills CLI
$ npx skills add openfootmanager/openfootmanager --skill new-ui-surface -a claude-code

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

GitHub CLI
$ gh skill install openfootmanager/openfootmanager new-ui-surface --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/openfootmanager/openfootmanager.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/new-ui-surface .claude/skills/new-ui-surface && 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
new-ui-surface
GitHub stars
1.1k
Token cost
~1.9k tokens
SKILL.md length
799 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
GPL-3.0

At a glance

Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing…

  • Works in 7 steps: Reuse before you build → Design tokens → Accessibility floor → …
  • Tasks that involve Accessibility
  • SKILL.md covers 1. Reuse before you build, 2. Design tokens, 3. Accessibility floor and 4. Strings, plus 4 more sections
  • Calls npm

What it does

New UI Surface is an agent skill from openfootmanager/openfootmanager. Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing primitives, and ships with a Testing Library test.

Its SKILL.md is about 1.9k 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 Frontend & Design, covering Accessibility. It works with Testing Library. The repository describes itself as: An open source soccer/football manager game. The licence is GPL-3.0.

When your agent uses it

  • Tasks that involve Accessibility

Example prompts

  • “/new-ui-surface”

Requirements

  • Pre-approved tools (allowed-tools): Read, Edit, Write, Grep, Glob, Bash(npm exec --no -- vitest run src/components*), Bash(npm exec --no -- tsc --noEmit)

Workflow steps

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

  1. Reuse before you build
  2. Design tokens
  3. Accessibility floor
  4. Strings
  5. State
  6. Test it
  7. Invariants, if you touch squad, tactics, or the pitch

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Edit
    • Write
    • Grep
    • Glob
    • Bash(npm exec --no -- vitest run src/components*)
    • Bash(npm exec --no -- tsc --noEmit)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

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

  • Network

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

New UI Surface loads about 1.9k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 799 words of instructions outside code blocks.

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

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 openfootmanager/openfootmanager at commit 90b05fd, republished under its GPL-3.0 licence (© openfootmanager). 799 words, ~1,873 tokens.

Download SKILL.mdSave it as .claude/skills/new-ui-surface/SKILL.md (or your agent's skills folder).
name
new-ui-surface
description
Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing primitives, and ships with a Testing Library test.
allowed-tools
Read, Edit, Write, Grep, Glob, Bash(npm exec --no -- vitest run src/components*), Bash(npm exec --no -- tsc --noEmit)
when_to_use
Creating any new React component, adding a dashboard tab, building a modal or panel, redesigning an existing screen, or when a UI change needs to look and…
argument-hint
[what you are building]

Building a new UI surface

The app has one visual voice — "Matchday", a broadcast-graphics look. New surfaces should be indistinguishable from existing ones. Reuse first, then compose, then style.

1. Reuse before you build

Read src/components/ui/index.ts before writing markup. It already exports:

Card / CardHeader / CardBody · Button · Badge · ProgressBar · Select · Checkbox · DatePicker · CountryFlag · TeamLocation · PlayerAvatar · TeamLogo · InjuryBadge · JerseyIcon · ThemeToggle · PitchToken · AssetImage · GeneratedAvatar · GeneratedCrest · CountryCombobox

Also check before writing a helper:

  • src/lib/ — formatting and domain helpers (finance.ts, playerSquad.ts, playerRoles.ts, countries.ts, dateFormatting.ts, seasonContext.ts, playerOvr.ts, …)
  • src/hooks/ — useAdvanceTime, useFetchedSquad, useUndoRedo, useAssetDataUrl, …
  • src/services/ — every backend call. Components never call invoke() directly.

A new component belongs in src/components/ui/ only if a second feature will use it. Otherwise put it in the feature folder (src/components/squad/, src/components/transfers/, …).

Apply the root Code quality layer and size rules: frontend functions <= 200 lines/complexity 25 (100/15 in shared directories), <= 7 parameters, production files <= 1,000. Shared libraries and services import no component/page, UI primitives import no feature/page, features import no page, and only services call invoke; type-only imports and re-exports count too. Backend policy is projected into the UI rather than recomputed here.

2. Design tokens

Colours and fonts come from the @theme block in src/App.css. Nothing else defines them.

UseToken
Primary action, positive stateprimary-500…900 (emerald)
Highlight, award, emphasisaccent-400 (#ffd60a gold), accent-500…900
Successsuccess-400/500/600
Dark surfacesnavy-900 (deepest) → navy-800 → navy-700 → navy-600
Headingsfont-heading (Barlow Condensed), usually uppercase tracking-wider
Bodyfont-sans (Inter)
  • Never a hex literal or an arbitrary value (bg-[#10b981]) in a component.
  • Every colour class needs its dark: partner. Light and dark both ship.
  • Light surfaces are white / gray-100; their dark counterparts are navy-800 / navy-900.

src/components/ui/Button.tsx is the reference for how variants, sizes, and states are composed — read it before inventing a new pattern.

3. Accessibility floor

Not optional, and cheap if done while writing rather than after.

  • Focus is visible. Every interactive element: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-<token> plus dark:focus:ring-offset-navy-800. Removing an outline without replacing it is a bug.
  • Semantic elements. <button> for actions, <a> for navigation, <table> for tabular data, headings in order. A div with onClick is not keyboard reachable.
  • Icon-only controls get an accessible name — aria-label={t("…")}, a translated string.
  • Modals trap focus, close on Escape, restore focus to the trigger, and are labelled (role="dialog" + aria-labelledby).
  • Lists and tables that sort or filter announce their state (aria-sort, aria-live for result counts).
  • Colour is never the only signal. Pair it with a label, icon, or shape — this matters for the form/condition/morale indicators especially.
  • Contrast holds in both themes. Gold on white and mid-emerald on navy are the usual failures.
  • Respect prefers-reduced-motion for anything that animates on its own.

4. Strings

Every visible string — and every aria-label, title, placeholder, and alt — is a translation key in every locale. Use /add-ui-string; don't hand-roll it.

5. State

  • Zustand stores in src/store/. Never mutate store state from a component — copy, then set. (fix/hometab-store-mutation is the regression that made this a rule.)
  • Backend data flows through src/services/*Service.ts.
  • Derive display state from the store; consume backend-owned game rules through services. Do not recalculate backend policy in the component.
Show full SKILL.md (296 more words)Show less

6. Test it

Use /write-tests (programme PR 2) for named GWT scenarios. Co-locate Foo.test.tsx next to Foo.tsx, write it first and watch it fail for the intended reason. Test through the component and service wiring; helper-only tests cannot prove that a handler calls the helper. A controlled component needs a stateful host that feeds onChange values back as props, not just vi.fn(). Test service rejection paths and resulting UI feedback, plus failure atomicity when applicable.

ts
// Query by role and accessible name. If this line fails, the component
// is not accessible — the test is doing double duty.
const save = screen.getByRole("button", { name: /save/i });
  • Query by role/label, never by class or test id.
  • Pure logic goes in a *.helpers.ts file and gets unit-tested directly — src/components/squad/SquadTab.helpers.ts is the pattern.
  • Cover keyboard activation, focus visibility/return and semantic role/name for interactive controls. A promoted Biome a11y rule is a syntax gate, not evidence that the actual keyboard flow works.
  • Use ui-accessibility-reviewer, i18n-auditor, and ofm-test-reviewer when their surfaces change.
bash
npm exec --no -- vitest run src/components/<area>
npm exec --no -- tsc --noEmit

7. Invariants, if you touch squad, tactics, or the pitch

  • XI slot alignment — starting-XI array entry i is formation slot i. Substitutions insert at the vacated index; never append or re-sort. Slot geometry comes from buildPitchRows(formation) in src/components/squad/SquadTab.helpers.ts, and PitchToken is the shared token component.
  • Deployed vs natural position — player.position is the natural position and is never mutated. Where a player is currently deployed comes from getDeployedPosition(team, slot). Role pickers and validators use the deployed slot; player descriptions use the natural position.

Checklist

  • Searched src/components/ui/index.ts, src/lib/, src/hooks/ before writing anything new
  • Token classes only — no hex literals, no arbitrary values
  • Every colour class has a dark: partner; checked in both themes
  • Visible focus ring on every interactive element
  • Semantic elements; icon-only controls have translated aria-labels
  • All strings routed through /add-ui-string (every locale)
  • No store mutation from a component
  • Co-located test querying by role, written before the component
  • npm exec --no -- vitest run src/components/<area> and npm exec --no -- tsc --noEmit green

© openfootmanager, GPL-3.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/new-ui-surface of openfootmanager/openfootmanager.

Open the folder on GitHubat commit 90b05fd

Compare with similar skills

New UI Surface 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.

New UI Surface compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
New UI Surface this skillopenfootmanager/openfootmanager1.1k—~1.9kAutomated safety check: PassGPL-3.0
Component Testingmakifbaysal/tasktrooper109—~1.2kAutomated safety check: PassApache-2.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.5k4 repos~1.2kAutomated safety check: PassMIT

Similar skills

  • Component Testing

    makifbaysal/tasktrooper

    A skill your agent uses when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per…

    109 GitHub stars~1.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.5k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed

More from openfootmanager/openfootmanager

  • Add UI String

    openfootmanager/openfootmanager

    Add or change any text a player can see, in every locale the game ships in.

    1.1k GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

  • Add Domain Field

    openfootmanager/openfootmanager

    Add a field to a domain type so it survives save/load. An agent skill from openfootmanager/openfootmanager.

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

  • Add MCP Tool

    openfootmanager/openfootmanager

    Add a tool to the MCP server that lets AI agents play OpenFoot Manager.

    1.1k GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Add Tauri Command

    openfootmanager/openfootmanager

    Expose new backend behaviour to the frontend over Tauri IPC.

    1.1k GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Preflight

    openfootmanager/openfootmanager

    Verify a pull request with the frontend scripts, default and MCP backend tests and clippy, formatting, architecture checks and review evidence.

    1.1k GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about New UI Surface

What does New UI Surface do?

Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing…. New UI Surface is an agent skill from openfootmanager/openfootmanager. Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing primitives, and ships with a Testing Library test.

When should I use New UI Surface?

New UI Surface fits situations like: tasks that involve Accessibility.

How do I install New UI Surface in Claude Code?

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

How do I install New UI Surface in Codex?

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

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

What does New UI Surface need to run?

Going by SKILL.md and its folder, New UI Surface needs the command-line tools its instructions call (npm). Its frontmatter pre-approves these tools: Read, Edit, Write, Grep, Glob, Bash(npm exec --no -- vitest run src/components*), Bash(npm exec --no -- tsc --noEmit).

Does New UI Surface access the network?

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

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

New UI Surface is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does New UI Surface use?

About 1.9k tokens (SKILL.md is roughly 7.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 New UI Surface?

Skills that share tags, products or a category with New UI Surface: Component Testing (makifbaysal/tasktrooper, 109 stars), Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars) and Web Animation Design (baptisteArno/typebot.io, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains New UI Surface?

openfootmanager (a GitHub organization) maintains it in openfootmanager/openfootmanager, which has 1,135 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 7, 2026.

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