Frontend

SkillAI & models

Gives your agent a frontend skill for building and changing Next.js app screens such as dashboards, charts, and settings.

Use Frontend in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Frontend and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Frontend skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

FrontendStart free

About this skill

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

What this skill tells your AI

The instructions your AI receives, as published by theopenco/llmgateway in .agents/skills/frontend/SKILL.md and read by Ahel’s review.

Data

Call the Hono API only through the generated typed client: useFetchClient() or useApi() from @/lib/fetch-client. Regenerate it by running the generate script in apps/api, then in the app. Utility functions take the client as a parameter from the calling component.
Backend logic lives in apps/api; frontends add no Next.js API routes.
Fetch data with TanStack Query, not useEffect.
Capability flags from the API are false when unset (non-null columns), while @llmgateway/models definitions leave them undefined. Use || for fallbacks between flags on API data.
Store user settings that are not in the database in cookies so SSR sees them.
Frontend gates are UX only; the API endpoint enforces auth, verification, and permissions itself.

Navigation and layout

Use next/link for internal links and next/navigation's router for programmatic navigation.
Keep inline links in prose attached to nearby words with a non-breaking space or a short whitespace-nowrap wrapper.
New org-level dashboard pages live under apps/ui/src/app/dashboard/[orgId]/org/; every other segment there is parsed as a projectId.
Portaled popovers inside a Dialog use the shared DialogSafePopover (packages/shared/src/components/ui/popover.tsx), which stays inside the dialog's scroll lock.

Display

Format counts and chart values with formatNumber, formatCompactNumber, and formatChartValue from @llmgateway/shared/number-format. Keep date, currency, and CSV formatting separate.
Format chart tooltip values with ChartTooltipContent's valueFormatter; formatter replaces the whole row and drops series labels.

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

Signals

GitHub stars: 2k
Forks: 190
Last commit: Sep 2026
Hacker News mentions: 20

Advanced

Item type: skill
Key: frontend-theopenco
Source: github.com/theopenco/llmgateway

github.com/theopenco/llmgateway