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

by theopenco in theopenco/llmgateway

Build and change LLM Gateway Next.js frontends — apps/ui, apps/playground, apps/code, apps/airside, and ee/admin — including API calls, data fetching, navigation, dashboard routes, dialogs and…

Custom licenceAuto-check passedFrontend & Design

Install Frontend

skills CLI
$ npx skills add theopenco/llmgateway --skill frontend -a claude-code

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

GitHub CLI
$ gh skill install theopenco/llmgateway frontend --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/theopenco/llmgateway.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend .claude/skills/frontend && 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
GitHub stars
1.7k
Token cost
~717 tokens
SKILL.md length
329 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
Custom licence

At a glance

Build and change LLM Gateway Next.js frontends — apps/ui, apps/playground, apps/code, apps/airside, and ee/admin — including API calls, data fetching, navigation, dashboard routes, dialogs and…

  • Editing React components
  • SKILL.md covers Data, Navigation and layout and Display
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Pages in those apps

What it does

Frontend is an agent skill from theopenco/llmgateway. Build and change LLM Gateway Next.js frontends — apps/ui, apps/playground, apps/code, apps/airside, and ee/admin — including API calls, data fetching, navigation, dashboard routes, dialogs and popovers, charts, number formatting, and user settings. Use when editing React components or pages in those apps, adding a dashboard page, calling the API from the UI, or formatting displayed values.

Its SKILL.md is about 720 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 React components and Model routing and gateways. It works with Next.js. The repository describes itself as: Route, manage, and analyze your LLM requests across multiple providers with a unified API interface.

When your agent uses it

  • Editing React components
  • Pages in those apps
  • Adding a dashboard page
  • Calling the API from the UI

Example prompts

  • “/frontend”

What it can do on your machine

Read from SKILL.md and the folder at commit 414b1b9. 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 loads about 717 tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 329 words of instructions outside code blocks.

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

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 329 words (~717 tokens).

“Before a PR, follow the screenshot rules in the pull-request skill.”

— opening of SKILL.md by theopenco, Custom licence
name
frontend

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/frontend of theopenco/llmgateway.

Open the folder on GitHubat commit 414b1b9

Compare with similar skills

Frontend 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 compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend this skilltheopenco/llmgateway1.7k—~717Automated safety check: PassCustom licence
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
React View Transitions Guidevercel-labs/next-beats16710 repos~3.1kAutomated safety check: PassMIT
Vercel React Best Practicessanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Chakra UI v2 to v3 Migrationchakra-ui/chakra-ui41k—~3.4kAutomated safety check: PassMIT

Similar skills

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    167 GitHub starsUsed in 10 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    sanity-io/sanity

    Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 130 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v2 to v3 Migration

    chakra-ui/chakra-ui

    Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

    41k GitHub stars~3.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

More from theopenco/llmgateway

All 19 skills in this repo

  • Blog

    theopenco/llmgateway

    Write and validate an LLM Gateway marketing blog post in the repository's current house style, including structured frontmatter and a gpt-image-2 OpenGraph image.

    1.7k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Model Benchmarks

    theopenco/llmgateway

    Run and report repository model or provider-mapping benchmarks.

    1.7k GitHub stars~1.1k tokensUpdated today
    Auto-check: notes

  • Skill Authoring

    theopenco/llmgateway

    Create, update, and audit repository-local agent skills against the current LLM Gateway codebase.

    1.7k GitHub stars~662 tokensUpdated today
    Auto-check passed

  • Security Audit

    theopenco/llmgateway

    Security best practices, vulnerability review, and full security audits for LLM Gateway.

    1.7k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Changelog

    theopenco/llmgateway

    Write a new LLM Gateway changelog entry. An agent skill from theopenco/llmgateway.

    1.7k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Knowledge Base

    theopenco/llmgateway

    Write a new LLM Gateway docs Knowledge base page under apps/docs/content/(product)/learn with light and dark dashboard screenshots.

    1.7k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend

What does Frontend do?

Build and change LLM Gateway Next.js frontends — apps/ui, apps/playground, apps/code, apps/airside, and ee/admin — including API calls, data fetching, navigation, dashboard routes, dialogs and…. Frontend is an agent skill from theopenco/llmgateway.js frontends — apps/ui, apps/playground, apps/code, apps/airside, and ee/admin — including API calls, data fetching, navigation, dashboard routes, dialogs and popovers, charts, number formatting, and user settings.

When should I use Frontend?

Frontend fits situations like: editing React components; pages in those apps; adding a dashboard page; calling the API from the UI.

How do I install Frontend in Claude Code?

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

How do I install Frontend in Codex?

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

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

What does Frontend need to run?

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

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

Frontend has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Frontend use?

About 717 tokens (SKILL.md is roughly 2.9k 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?

Skills that share tags, products or a category with Frontend: Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars), React View Transitions Guide (vercel-labs/next-beats, 167 stars), Vercel React Best Practices (sanity-io/sanity, 6.4k stars) and GSAP for React (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend?

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

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