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.
npx skills add bgorkem/bgorkem-skills --skill react-frontendgit clone --depth 1 https://github.com/bgorkem/bgorkem-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bgorkem/bgorkem-skills/react-frontend)<a href="https://agentmods.dev/skills/bgorkem/bgorkem-skills/react-frontend"><img src="https://agentmods.dev/badge/skills/bgorkem/bgorkem-skills/react-frontend/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/bgorkem/bgorkem-skills/react-frontend"><img src="https://agentmods.dev/badge/skills/bgorkem/bgorkem-skills/react-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00143 | $0.03347 |
| Opus 5 | $0.00072 | $0.01673 |
| Sonnet 5 | $0.00029 | $0.00669 |
| Haiku 4.5 | $0.00014 | $0.00335 |
Grade A, and why
react-frontend scanned grade A with 0 findings 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 8d 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 331 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Frontend Skill (Client-Side Responsive SPA)
Build production-quality client-side React single-page web applications that
run entirely in the browser: Vite + React 18/19, TypeScript (strict), Tailwind
CSS, and react-router-dom. The UI is responsive — it must look and work
well on mobile browsers and desktop browsers alike.
This skill is for client-side SPAs only. All rendering happens in the browser; there is no server-rendering step. Data is fetched client-side after the app mounts. Scope is web only: responsive websites for browsers, not native apps.
0. Scope guardrails
- Client-side SPA only. One HTML shell, JavaScript renders everything in the browser after load. No server rendering of any kind.
- Bundler is Vite (
vite,@vitejs/plugin-react). Dev:npm run dev. Build:npm run build. Preview:npm run preview. - Routing is
react-router-dom(v6+), client-side route matching. - Target both form factors: design responsive layouts that work from small mobile-browser viewports up to large desktop screens.
- Fetch data client-side (e.g.
fetch/axiosinside hooks or a data-fetching library). No server data-loading conventions.
1. Project structure
Group by responsibility. Keep components thin; push logic into services/hooks.
src/
├── main.tsx # Vite entry — mounts <App/> into #root
├── App.tsx # Root component: providers + <RouterProvider/>
├── router.tsx # react-router route tree (createBrowserRouter)
├── components/ # Reusable UI — presentational where possible
│ ├── common/ # Buttons, inputs, layout primitives, shared
│ └── <feature>/ # Feature-scoped components (auth/, cart/, ...)
├── pages/ # Route-level screens, one folder per route area
│ └── <Page>/ # Page.tsx + Page.test.tsx + local parts
├── layouts/ # Shared shells (RootLayout, AuthLayout) for routes
├── hooks/ # Custom hooks (useX) — reusable stateful logic
├── services/ # Business logic, API clients, data access (no JSX)
│ └── <domain>/ # Split by domain (api/, auth/, ...)
├── store/ (optional) # Cross-cutting client state (Context or Zustand)
├── types/ # Shared TypeScript types & interfaces
├── utils/ # Pure helper functions
├── styles/ # index.css (Tailwind entry) + globals
└── assets/ # Static images, fonts, icons
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.
- 8d ago First seen · 331 lines · 143 tokens per session scan A 666bb026d5da
react-frontend is a skill published in the GitHub repository bgorkem/bgorkem-skills (4 stars, last pushed 1mo ago), licensed MIT. It adds 143 tokens to every session and 3,347 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
tanstack-start
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare app with SSR, wants an SSR dashboard, or asks for a React 19 +…
tailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme…
react-native
React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native code. Triggers: 'react native', 'expo', 'mobile app', 'react native…
react-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React…
react-component-generator
Generate React components with TypeScript, proper props, hooks, and accessibility. Use when creating new React components, UI elements, or refactoring existing components.