Agent skill

Improve Frontend

A skill your agent uses when wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities, stability risks, performance issues, and code simplification…

GPL-3.0Auto-check passedFrontend & Design

Install Improve Frontend

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a claude-code

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

GitHub CLI

$ gh skill install luxury-yacht/app improve-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/luxury-yacht/app.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/improve-frontend .claude/skills/improve-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/

Paste into Claude Code

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .claude/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install luxury-yacht/app improve-frontend --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/luxury-yacht/app.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/improve-frontend .agents/skills/improve-frontend && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .agents/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install luxury-yacht/app improve-frontend --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/luxury-yacht/app.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/improve-frontend .cursor/skills/improve-frontend && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .cursor/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/luxury-yacht/app.git --path .agents/skills/improve-frontend

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install luxury-yacht/app improve-frontend --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/luxury-yacht/app.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/improve-frontend .gemini/skills/improve-frontend && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .gemini/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install luxury-yacht/app improve-frontend

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/luxury-yacht/app.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/improve-frontend .github/skills/improve-frontend && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .github/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add luxury-yacht/app --skill improve-frontend -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install luxury-yacht/app improve-frontend --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/luxury-yacht/app.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/improve-frontend .opencode/skills/improve-frontend && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "improve-frontend" agent skill from https://github.com/luxury-yacht/app/tree/main/.agents/skills/improve-frontend into .opencode/skills/improve-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "improve-frontend", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: improve-frontend
GitHub stars: 444
Token cost: ~1.3k tokens
SKILL.md length: 599 words
Files: 1
Skills in repo: 17
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

A skill your agent uses when wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities, stability risks, performance issues, and code simplification…

Wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities
SKILL.md covers Scan, Present, Fix and Do not
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Stability risks

What it does

Improve Frontend is an agent skill from luxury-yacht/app. Use when wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities, stability risks, performance issues, and code simplification opportunities, then presents 5 ranked findings for the user to choose from

Its SKILL.md is about 1.3k 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 Code simplification and Container orchestration. It works with React, TypeScript and Kubernetes. The repository describes itself as: Luxury Yacht - A cross-platform app for managing Kubernetes clusters and resources. The licence is GPL-3.0.

When your agent uses it

Wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities
Stability risks
Performance issues
Code simplification opportunities

Example prompts

“/improve-frontend”

What it can do on your machine

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

Improve Frontend loads about 1.3k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 599 words of instructions outside code blocks.

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

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 luxury-yacht/app at commit 7001a03, republished under its GPL-3.0 licence (© luxury-yacht). 599 words, ~1,338 tokens.

Download SKILL.mdSave it as .claude/skills/improve-frontend/SKILL.md (or your agent's skills folder).

name: improve-frontend
description: Use when wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities, stability risks, performance issues, and code simplification opportunities, then presents 5 ranked findings for the user to choose from

Improve Frontend

Scan the React/TypeScript frontend, present exactly 5 concrete findings ranked security > stability > performance > simplicity, wait for the user to pick one (or ask for a rescan of another area), then fix only that one.

/improve-frontend [area] takes an optional focus area (for example refresh, object-panel, browse, tables, streaming); without one, scan broadly.

Scan

With [area], limit discovery to that module or directory. Otherwise sample 8-12 files across core/, modules/, shared/, and ui/, weighted toward recent git activity (fresh churn often harbors fresh bugs) or high line counts. Open backend contracts only when a candidate crosses into a backend producer. Check the tiers in order:

Tier	Category	Look for
Security	XSS vectors	`dangerouslySetInnerHTML`, unescaped DOM-attribute interpolation, untrusted HTML from K8s annotations, labels, or events
Security	Sensitive data	Kubeconfig contents, tokens, or secrets in console logs, unencrypted `localStorage`, or React DevTools-visible state
Security	Bypassed network boundary	`fetch`/`XMLHttpRequest` outside `core/refresh/` and `core/data-access/` (Biome `no-direct-fetch` catches only `fetch`)
Security	Injection via K8s data	User-controlled names, labels, or annotations used unsanitized in URLs, DOM IDs, or code-building template literals
Security	Prototype pollution	Deep merges, spreads of unvalidated external objects, `Object.assign` from API responses without key allowlists
Security	Dependency risk	`package.json` versions with known CVEs
Stability	Memory leaks	Subscriptions, listeners, timers, or stream handlers not cleaned up in the `useEffect` return; streams left open on unmount
Stability	Error boundaries	Trees (especially detail panels and streaming components) where one bad K8s response crashes the app
Stability	Race conditions	Stale closures in `useEffect`/`useCallback`; async work that updates state after unmount
Stability	Null safety	Missing optional chaining on nullable K8s fields; array methods on possibly undefined values
Stability	Multi-cluster	Components or hooks that assume one cluster, ignore `clusterId`, or keep state across a cluster switch
Stability	State consistency	Stale cache after cluster/namespace switch, contexts not cleared on disconnect, derived state that can desync
Performance	Re-renders	Missing `memo`, inline object/array/function props, unstable context values
Performance	Bundle size	Heavy imports that could be lazy-loaded; barrel re-exports pulling whole modules
Performance	Computation	Missing `useMemo`/`useCallback` for nontrivial work, or wrong dependency arrays
Performance	Redundant fetching	Components requesting the same data independently instead of sharing via the refresh orchestrator
Performance	Tables	GridTable lists without row virtualization; column factories recreated each render
Performance	CSS waste	Unused classes, broad selectors causing layout thrash, missing `will-change` on animated elements
Simplicity	Dead code	Exported components/hooks/utils with no imports, unreachable branches, commented-out JSX
Simplicity	Duplication	Copy-pasted component logic, repeated fetch-and-transform code, similar components that could share a base
Simplicity	Over-abstraction	Pass-through wrapper components, hooks wrapping a single `useState`, unnecessary HOCs
Simplicity	Consolidation	Near-identical utilities or type definitions that could be unified
Simplicity	Stale patterns	Class components, legacy context API, patterns the codebase has moved away from

Show full SKILL.md (150 more words)Show less

For each finding, note cross-boundary effects: the backend sends data the frontend processes unsafely, the fix needs a backend response-shape change, or a frontend performance issue is really backend over-fetching.

Present

List findings in priority order, then by impact within a tier:

N. **[SECURITY|STABILITY|PERFORMANCE|SIMPLICITY] Category — file:line**
   One-line description of the issue.
   Impact: What could go wrong / what improves.
   [Cross-boundary: backend effect, if any]

Then ask: "Which one should we fix? (pick a number, or say 'rescan' for a different area)"

Fix

Read the full context around the issue. When a component's props or a hook's return type changes, update every consumer.
A fix that crosses into backend producers changes both layers together; read the owning backend guidance first.

Do not

Report style-only issues (formatting, import order); Biome owns style.
Propose comments, JSDoc, or type annotations as an improvement.
Flag intentional patterns documented in AGENTS.md or owning docs, or consolidations recorded in the settled findings.
Present a large-scale refactor as one finding; break it down.
Change dependencies without strong justification (CVE, bug).

Files

Just SKILL.md in .agents/skills/improve-frontend of luxury-yacht/app.

Open the folder on GitHubat commit 7001a03

Compare with similar skills

Improve 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.

Improve Frontend compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Improve Frontend this skillluxury-yacht/app	444	—	~1.3k	Automated safety check: Pass	GPL-3.0	today
Admin Template Project Initializersouthliu/south-admin-react	580	—	~519	Automated safety check: Pass	MIT	21 days ago
Using Docs Kitlobehub/lobe-ui	2.2k	—	~2.8k	Automated safety check: Pass	MIT	today
Pi K8s Deployrodrigorodrigues/microservices-design-patterns	187	—	~1.6k	Automated safety check: Pass	None	22 days ago
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types	111	—	~1.1k	Automated safety check: Pass	MIT	2 mo ago
Fix Frontend Review CommentsJetBrains/kotlin-web-site	1.6k	—	~444	Automated safety check: Pass	Apache-2.0	2 days ago

Similar skills

Admin Template Project Initializer
southliu/south-admin-react
Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.
580 GitHub stars~519 tokensUpdated 21 days ago
Frontend & DesignAuto-check passed
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
2.2k GitHub stars~2.8k tokensUpdated today
Frontend & DesignAuto-check passed
Pi K8s Deploy
rodrigorodrigues/microservices-design-patterns
Check Docker Hub for a new :latest image on a managed service and roll it out to the home Pi k8s cluster, the same way authentication-service was deployed on 2026-08-29 (SSH + kubectl rollout…
187 GitHub stars~1.6k tokensUpdated 22 days ago
DevOps & CloudAuto-check passed
React Render Types Composition
HorusGoul/eslint-plugin-react-render-types
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.
111 GitHub stars~1.1k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Fix Frontend Review Comments
JetBrains/kotlin-web-site
Official
Apply pull-request review comments to the frontend of kotlinlang.org (Next.js, React, TypeScript, CSS Modules under blocks/, components/, pages/, hooks/, utils/, test/).
1.6k GitHub stars~444 tokensUpdated 2 days ago
Frontend & DesignAuto-check passed
Cleanup Specialist
ahaodev/shadmin
Safe cleanup of Shadmin's Go backend, React frontend, Go CLI, and docs — remove dead code, consolidate duplication, and improve maintainability without changing behavior or adding features.
174 GitHub stars~1.3k tokensUpdated 2 days ago
DevelopmentAuto-check passed

More from luxury-yacht/app

All 17 skills in this repo

Improve Backend
luxury-yacht/app
A skill your agent uses when wanting to systematically improve the Go backend - scans for security vulnerabilities, stability risks, performance issues, and code simplification opportunities, then…
444 GitHub stars~1.1k tokensUpdated today
Auto-check passed
Make Impossible States Impossible
luxury-yacht/app
Eliminate representable-but-invalid Luxury Yacht states with discriminated unions, required identity, typed status, validated constructors, or one boundary chokepoint; use for "make impossible…
444 GitHub stars~1.5k tokensUpdated today
Auto-check passed
Add Resource
luxury-yacht/app
Add or extend support for a Kubernetes resource kind across the required catalog, refresh, detail, object-panel, object-map, permission, documentation, and test surfaces
444 GitHub stars~704 tokensUpdated today
Auto-check passed
App Review
luxury-yacht/app
Audit broad Luxury Yacht systems or cross-cutting concerns for structural simplification, hardening, optimization, or refactoring; use for app-wide reviews and phased structural plans, not branch…
444 GitHub stars~818 tokensUpdated today
Auto-check passed
Browse Tables
luxury-yacht/app
Change cluster or namespace views, Browse/catalog surfaces, shared GridTable behavior, filters, pagination, large datasets, metrics columns, or refresh-backed resource tables
444 GitHub stars~518 tokensUpdated today
Auto-check passed
Refresh Subsystem
luxury-yacht/app
Modify Luxury Yacht refresh domains, snapshots, streams, doorbells, polling fallback, diagnostics, retained data, or refresh lifecycle while preserving cross-layer ordering and recovery contracts
444 GitHub stars~563 tokensUpdated today
Auto-check passed

Works with

Questions about Improve Frontend

What does Improve Frontend do?

A skill your agent uses when wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities, stability risks, performance issues, and code simplification…. Improve Frontend is an agent skill from luxury-yacht/app.

When should I use Improve Frontend?

Improve Frontend fits situations like: wanting to systematically improve the React/TypeScript frontend - scans for security vulnerabilities; stability risks; performance issues; code simplification opportunities.

How do I install Improve Frontend in Claude Code?

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

How do I install Improve Frontend in Codex?

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

Can I use Improve 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 luxury-yacht/app --skill improve-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/improve-frontend, .gemini/skills/improve-frontend, .github/skills/improve-frontend and .opencode/skills/improve-frontend in your project.

What does Improve Frontend need to run?

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

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

Improve Frontend is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Improve Frontend use?

About 1.3k tokens (SKILL.md is roughly 5.4k 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 Improve Frontend?

Skills that share tags, products or a category with Improve Frontend: Admin Template Project Initializer (southliu/south-admin-react, 580 stars), Using Docs Kit (lobehub/lobe-ui, 2.2k stars), Pi K8s Deploy (rodrigorodrigues/microservices-design-patterns, 187 stars) and React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Improve Frontend?

luxury-yacht (a GitHub organization) maintains it in luxury-yacht/app, which has 444 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 10, 2026.

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

Install Improve Frontend

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Improve Frontend

Scan

Present

Fix

Do not

Files

Compare with similar skills

Similar skills

More from luxury-yacht/app

Related

Questions about Improve Frontend