New: 97,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

Cursor BYOK Frontend Guide

by leookun in leookun/cursor-byok

Sets the rules for building the Cursor BYOK desktop app's React and Tauri frontend, especially its HTTP boundary and component state architecture.

MITAuto-check passedFrontend & Design

Install Cursor BYOK Frontend Guide

skills CLI
$ npx skills add leookun/cursor-byok --skill frontend -a claude-code

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

GitHub CLI
$ gh skill install leookun/cursor-byok 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/leookun/cursor-byok.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
3.2k
Token cost
~1.9k tokens
SKILL.md length
1,026 words
Files
2
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Sets the rules for building the Cursor BYOK desktop app's React and Tauri frontend, especially its HTTP boundary and component state architecture.

  • Adding a new settings page or window chrome to the desktop app
  • SKILL.md covers Desktop HTTP communication, Component boundaries, Page layout and Typography, plus 4 more sections
  • Calls npm
  • Wiring a new frontend feature to the Rust management API

What it does

This skill governs frontend changes under the desktop app's own directory - routing, page layout, window chrome, settings UI, scrolling, virtualization, charts, themes, and overall component architecture - built on the components and theme system already present there. It treats a Rust management server as the single HTTP origin for the desktop UI: the main WebView and any browser-opened detail pages must talk to a loopback HTTP address under a fixed API namespace, never load the main UI from Tauri's own internal URL scheme, and never expose a second frontend origin.

Every frontend management request stays relative to that fixed API path rather than discovering, injecting or persisting a separate API origin or hardcoding a port. In production the frontend is served embedded by Tauri's own asset resolver through the Rust server; in development, the Rust server reverse-proxies non-API requests to Vite while preserving the path and query string, and Vite's base path is configured to match the same reserved namespace so its generated asset URLs stay consistent.

Component boundaries keep business state - provider, model, call, usage and persisted settings - outside presentation components, which receive snapshots and dispatch actions, reserving local React state for purely transient UI behavior like focus, open state, drag state or input drafts; Tauri's own commands are reserved for native desktop actions such as opening a terminal or tray integration, never as a second channel for HTTP business APIs.

When your agent uses it

  • Adding a new settings page or window chrome to the desktop app
  • Wiring a new frontend feature to the Rust management API
  • Deciding whether UI state belongs in a component or the business layer

Example prompts

  • “Add a new settings page for model provider configuration.”
  • “Wire this new chart component to the usage API endpoint.”
  • “Should this drag state live in the component or the store?”

Requirements

  • Tauri
  • React
  • Vite dev server

What it can do on your machine

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

    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

Cursor BYOK Frontend Guide loads about 1.9k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 1,026 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~62
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 leookun/cursor-byok at commit 9a8fde2, republished under its MIT licence (© leookun). 1,026 words, ~1,889 tokens.

Download SKILL.mdSave it as .claude/skills/frontend/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
frontend
description
Implement and review the Cursor BYOK React/Tauri desktop frontend. Use for changes under apps/desktop involving routing, page layout, window chrome, settings UI, scrolling, virtualization, charts, themes, or frontend component architecture.

Cursor BYOK Frontend

Build on the components and theme system already present in apps/desktop. Preserve the Tauri HTTP boundary; frontend management features call /__byok-api__/api and never add IPC business APIs.

Desktop HTTP communication

  • Treat the Rust management server as the single HTTP origin for the desktop UI. The main WebView and browser-opened detail pages must use http://127.0.0.1:<dynamic-port>/__byok-api__/; do not load the main UI from tauri://localhost or expose a second frontend origin.
  • Make every frontend management request relative to /__byok-api__/api. Do not discover, inject, persist, or pass an apiOrigin, and do not construct management URLs from a fixed port.
  • Keep the /__byok-api__/ namespace reserved for this boundary:
    • /__byok-api__/api/* is handled locally by the Rust management API.
    • Other /__byok-api__/* paths are frontend documents, assets, modules, and development resources.
  • In production, serve the frontend embedded by Tauri's frontendDist through the Rust server. Reuse Tauri's asset resolver rather than bundling or copying a second set of frontend resources.
  • In development, let the Rust server reverse-proxy non-API /__byok-api__/* requests to Vite. Preserve the request path and query string. Do not configure Vite to proxy management API requests back to Rust.
  • Configure Vite's base path as /__byok-api__/ so generated assets, module imports, and development client URLs stay under the reserved namespace.
  • Bind the development Vite server to an explicit loopback address compatible with the Rust proxy target; do not rely on localhost resolving to the same IP family.
  • Open external detail pages with their normal loopback HTTP URL and hash route. Because the page and API are same-origin, do not add Tauri URL workarounds, API-origin query parameters, or CORS-dependent browser flows.
  • Use Tauri commands only for native desktop capabilities such as opening Terminal, tray integration, or operating-system actions. Do not create IPC mirrors for HTTP business APIs.

Component boundaries

  • Keep Provider, Model, Call, Usage, and persisted settings state outside presentation components.
  • Let components receive business snapshots and dispatch actions. Local React state is allowed for transient UI behavior such as focus, open state, drag state, and input drafts.
  • Split pages, layouts, charts, forms, and reusable controls into focused components. Do not collect an entire feature set in App.tsx.
  • Keep App.tsx as the route composition root.

Page layout

  • Build every full-height page with components/layout/PageLayout.tsx; do not hand-roll page shells with grid rows.
  • Put page-level commands and controls such as create, import, export, filtering, sorting, and view options in the shared page action region through PageActions. Keep only operations that target one concrete list item, such as edit and delete, inside that item's row. Do not add duplicate action bars or panel-header controls inside page content.
  • Never render a title region above a data table or flat data list. Use the page title for context, keep column labels in the table header, place page-level controls in PageActions, and wrap the table in a titleless Card. A hierarchy label that identifies parent data in a grouped parent-child view is not a table title.
  • Keep the main scroll viewport full-height and position: relative; place the page title and action region absolutely over it.
  • Reserve the absolute title/action region with padding-top on the scroll content, never by shortening or offsetting the scroll viewport itself.
  • Keep the menu Card fixed and reserve it with the content area's margin-left; do not place Header, menu, and content in a flow grid.
  • Do not use child or section padding to create external spacing. Use flex/grid gaps between siblings and margins or fixed offsets at container boundaries; the scroll-content top padding is reserved only for its absolute title/action overlay.
  • Use a vertical flex layout with these invariants:
    • Header: flex: 0 0 auto.
    • Footer: flex: 0 0 auto.
    • Content: flex: 1 1 auto, min-height: 0, and overflow: hidden.
  • Keep Header and Footer outside the scroll viewport. They must never grow or shrink with content.
  • Apply macOS, Windows, and Linux window-corner safe-area variables only to edge chrome that can enter native rounded corners.
  • Keep macOS traffic-light space and the top fixed drag strip free of interactive controls.
  • Avoid decorative brand text and explanatory copy when it does not help the user perform an action or interpret state.
Show full SKILL.md (347 more words)Show less

Typography

  • Write component styles in SCSS and source every font-size from src/styles/_typography.scss; never hardcode a font size in SCSS, React styles, or chart options.
  • Use base for normal UI text and ordinary titles, including title bars, panels, cards, and section headings. Do not increase a font merely because its element is h1 or h2.
  • Use xs only for secondary information. Reserve lg for an explicitly oversized display title; do not use it for routine headings.
  • Audit all typography-token usages after changing the scale, not only raw numeric font sizes.

Scrolling and virtualization

  • Use components/layout/VirtualPage.tsx for vertically scrolling page content.
  • Use components/virtual/VirtualList.tsx for data collections and menus that can grow.
  • Treat ScrollArea as the low-level primitive owned by the virtual scrolling implementation. Do not import ScrollArea directly in pages or layouts.
  • Use the global scroll-shadow-top and scroll-shadow-bottom masks for scroll-edge shadows. When a scroll content inset reserves an absolute overlay, source the top shadow distance from the same CSS variable as its padding-top.
  • Model non-list pages as a short sequence of measurable top-level virtual sections.
  • Do not use document scrolling, native page overflow: auto, or nested vertical scroll containers.
  • Ensure every flex/grid ancestor of a virtual viewport has min-height: 0 and the viewport has an explicit bounded height.

Routing and pages

  • Use HashRouter for Tauri compatibility.
  • Keep / as the statistics dashboard and expose every primary page through the persistent menu in the shared AppLayout.
  • Use top-level routes for primary pages: /, /providers, /models, /calls, and /settings.
  • Do not create separate Home and Settings shells or add a Home-switching control.
  • Keep route content independent of the window Header and Footer.

Charts

  • Use ECharts through components/charts/EChart.tsx.
  • Register only required ECharts Core charts, components, and renderers.
  • Keep chart components declarative: accept domain data and construct an option without fetching or persisting data.
  • Let ResizeObserver resize the chart with its layout container and dispose the instance on unmount.

Validation

Run from apps/desktop:

bash
npm run check
npm run tauri:build -- --debug --no-bundle

Verify that Header and Footer remain fixed, only the virtual content viewport scrolls, settings navigation remains reachable at minimum window size, and macOS controls stay outside rounded-corner and traffic-light unsafe regions.

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

Files

SKILL.md and 1 other file in .agents/skills/frontend of leookun/cursor-byok.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 9a8fde2

Compare with similar skills

Cursor BYOK Frontend Guide 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.

Cursor BYOK Frontend Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cursor BYOK Frontend Guide this skillleookun/cursor-byok3.2k—~1.9kAutomated safety check: PassMIT
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
Frontend Patternskurealnum/dotfiles29019 repos~3.7kAutomated safety check: PassNone
Frontend UI FunctionalvictorGPT/vibeusage131—~939Automated safety check: PassMIT
Frontendredis/RedisInsight8.9k—~3.2kAutomated safety check: PassCustom licence
NEAR dApp Builderinternet-court/internet-court-skill6.4k1 repos~684Automated safety check: PassCustom licence

Similar skills

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Frontend Patterns

    kurealnum/dotfiles

    Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

    290 GitHub starsUsed in 19 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • Frontend UI Functional

    victorGPT/vibeusage

    A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…

    131 GitHub stars~939 tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Frontend

    redis/RedisInsight

    Official

    React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage.

    8.9k GitHub stars~3.2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • NEAR dApp Builder

    internet-court/internet-court-skill

    Scaffolds new NEAR dApps with create-near-app or adds NEAR wallet sign-in, contract calls and transaction signing to an existing React or plain JavaScript app.

    6.4k GitHub starsUsed in 1 repo~684 tokens
    Frontend & DesignAuto-check passed

  • Frontend Design Ultimate

    aAAaqwq/AGI-Super-Team

    Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

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

More from leookun/cursor-byok

  • Cursor BYOK Prefix Stability

    leookun/cursor-byok

    Guides changes to the cursor-byok server so provider conversation history stays append-only and each turn's history remains an exact prefix of the next, protecting prefix caches.

    3.2k GitHub stars~1.3k tokensUpdated 9 days ago
    Auto-check passed

  • Cursor BYOK Database Schema

    leookun/cursor-byok

    Guides SQLite schema changes in the Cursor BYOK server, keeping SQLx migrations, the Rust store, API contracts and fixtures aligned.

    3.2k GitHub stars~1.3k tokensUpdated 9 days ago
    Auto-check passed

  • Model Selection Component

    leookun/cursor-byok

    Standardizes how a desktop app's UI lets a person choose one or more already-configured AI models, through a single grouped dropdown component.

    3.2k GitHub stars~1.3k tokensUpdated 9 days ago
    Auto-check passed

  • Cursor BYOK Desktop Release

    leookun/cursor-byok

    Guides releases of the Cursor BYOK desktop app on GitHub, with strict rules on who may publish and how version tags, updater manifests and signing are handled.

    3.2k GitHub stars~1.3k tokensUpdated 9 days ago
    Auto-check passed

  • Desktop i18n for Cursor BYOK

    leookun/cursor-byok

    Rules for localizing the Cursor BYOK desktop app: the global t() function, complete locale catalogs, system-language selection and the scan-and-check commands.

    3.2k GitHub stars~508 tokensUpdated 9 days ago
    Auto-check passed

  • Floating UI Overlays

    leookun/cursor-byok

    Rules for building dropdowns, popovers, tooltips and menus in the desktop app with @floating-ui/dom, covering portals, positioning, dismissal and ARIA state.

    3.2k GitHub stars~496 tokensUpdated 9 days ago
    Auto-check passed

Works with

Categories

Questions about Cursor BYOK Frontend Guide

What does Cursor BYOK Frontend Guide do?

Sets the rules for building the Cursor BYOK desktop app's React and Tauri frontend, especially its HTTP boundary and component state architecture. This skill governs frontend changes under the desktop app's own directory - routing, page layout, window chrome, settings UI, scrolling, virtualization, charts, themes, and overall component architecture - built on the components and theme system already present there. It treats a Rust management server as the single HTTP origin for the desktop UI: the main WebView and any browser-opened detail pages must talk to a loopback HTTP address under a fixed API namespace, never load the main UI from Tauri's own internal URL scheme, and never expose a second frontend origin.

When should I use Cursor BYOK Frontend Guide?

Cursor BYOK Frontend Guide fits situations like: adding a new settings page or window chrome to the desktop app; wiring a new frontend feature to the Rust management API; deciding whether UI state belongs in a component or the business layer.

How do I install Cursor BYOK Frontend Guide in Claude Code?

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

How do I install Cursor BYOK Frontend Guide in Codex?

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

Can I use Cursor BYOK Frontend Guide 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 leookun/cursor-byok --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 Cursor BYOK Frontend Guide need to run?

Going by SKILL.md and its folder, Cursor BYOK Frontend Guide needs the command-line tools its instructions call (npm). Our summary lists: Tauri; React; Vite dev server.

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

Cursor BYOK Frontend Guide 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 Cursor BYOK Frontend Guide use?

About 1.9k tokens (SKILL.md is roughly 7.6k 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 Cursor BYOK Frontend Guide?

Skills that share tags, products or a category with Cursor BYOK Frontend Guide: React Router Development (remix-run/react-router, 57k stars), Frontend Patterns (kurealnum/dotfiles, 290 stars), Frontend UI Functional (victorGPT/vibeusage, 131 stars) and Frontend (redis/RedisInsight, 8.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cursor BYOK Frontend Guide?

leookun (a GitHub user) maintains it in leookun/cursor-byok, which has 3,151 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on September 28, 2026.

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