beui-pro

A library of licensed premium React page sections, such as heroes, pricing areas, navigation, and footers, available through an authenticated shadcn registry. The blocks are source code that can be installed and adapted in a React project.

In plain words
What is it for?
Building or improving landing pages with ready-made React sections. It helps select, install, combine, and customize the blocks a project needs.
Why use it?
It helps developers start from existing page sections instead of creating every layout from scratch. Access depends on a configured BEUI_PRO_TOKEN and a working connection to the live registry.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/starc007/ui-components/beui-pro
Any agent
npx skills add starc007/ui-components --skill beui-pro
Clone the repo
git clone --depth 1 https://github.com/starc007/ui-components

Made for: Claude Code, Codex.

Per session 83 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,266 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00083 $0.01266
Opus 5 $0.00042 $0.00633
Sonnet 5 $0.00017 $0.00253
Haiku 4.5 $0.00008 $0.00127

Measured 3d ago against content hash e7b6df93bdc3, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

beui-pro scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -fsS \
skills/beui-pro/SKILL.md · 150 lines

How it starts

The opening of the file, as written. The whole thing — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.

beUI Pro

Use the customer's licensed beUI Pro registry as the source of truth. Discover current items at runtime, install only the blocks the project needs, then compose and adapt the generated source.

Protect access

  • Require BEUI_PRO_TOKEN in the environment before accessing the registry.
  • Never print, paste, commit, or write the token into source files.
  • Never accept a token copied into the user's prompt when an environment variable can be used.
  • Stop and ask the user to configure their token when it is unavailable. Do not replace a requested Pro block with an approximation.
  • If the live catalog cannot be fetched, do not present remembered, documented, or locally inferred slugs as the current catalog.
  • Treat 401 as a missing, invalid, or expired token. Treat 404 as a stale or incorrect install slug and refresh the catalog.

Check access without revealing the value:

test -n "$BEUI_PRO_TOKEN" && echo "beUI Pro token is configured"

Configure the registries

Inspect the project's existing components.json before editing it. Preserve its aliases and settings. Ensure both namespaces exist because Pro blocks can depend on public beUI primitives:

{
  "registries": {
    "@beui": "https://beui.dev/r/{name}.json",
    "@beui-pro": {
      "url": "https://pro.beui.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${BEUI_PRO_TOKEN}"
      }
    }
  }
}

Merge this into the existing file rather than replacing it. Do not create or modify a secret file unless the user explicitly asks.

Workflow

1. Understand the project

Read the existing app before choosing blocks. Identify:

  • framework and package manager
  • requested page or section
  • existing typography, theme tokens, spacing, and layout shell
  • blocks already installed
  • required states, data, and interactions

Prefer a coherent page composition over selecting blocks independently.

2. Fetch the live catalog

Fetch the authenticated registry every time instead of relying on remembered slugs:

Read the full file on GitHub · 150 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 150 lines · 83 tokens per session scan A e7b6df93bdc3

Subscribe to this mod's changes

beui-pro is a skill published in the GitHub repository starc007/ui-components (1,355 stars, last pushed 4d ago), licensed MIT. It adds 83 tokens to every session and 1,266 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

tamagui

Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with styled(), configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/"…

tamagui/tamagui · 90 tokens

onejs-setup-and-overview

Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…

Singtaa/OneJS · 199 tokens

emil-design-eng

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

persianlabs/ui · 35 tokens

forge

Forge design system for React. Use when writing any React UI in this project, when picking which component to use, when theming, when creating block templates, or when reviewing UI code for accessibility and anti-patterns. Covers components, tokens, theming, motion, patterns, a11y, and anti-patterns.

Webba-Creative-Technologies/forge · 67 tokens

feature-flags

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

react/react · 34 tokens

frontend-unit-testing

Write comprehensive, behaviour-driven unit tests for Gradio frontend Svelte components using Vitest browser mode, Playwright, and the @self/tootils test utilities.

gradio-app/gradio · 37 tokens