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

Performance Security

by MadAppGang in MadAppGang/claude-code

A skill your agent uses when optimizing performance or reviewing security.

MITAuto-check: notesFrontend & Design

Install Performance Security

skills CLI
$ npx skills add MadAppGang/claude-code --skill performance-security -a claude-code

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

GitHub CLI
$ gh skill install MadAppGang/claude-code performance-security --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/MadAppGang/claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/frontend/skills/performance-security .claude/skills/performance-security && 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
performance-security
GitHub stars
284
Token cost
~2.4k tokens
SKILL.md length
439 words
Files
1
Skills in repo
69
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when optimizing performance or reviewing security.

  • Optimizing performance
  • SKILL.md covers Performance Optimization, Accessibility (a11y), Security and Related Skills
  • Calls pnpm and npx; needs API_KEY and VITE_PUBLIC_KEY
  • Reviewing security

What it does

Performance Security is an agent skill from MadAppGang/claude-code. Use when optimizing performance or reviewing security. Covers code-splitting, React Compiler patterns, asset optimization, a11y testing, and security hardening for React apps.

Its SKILL.md is about 2.4k 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 Accessibility and Security review. It works with React. The repository describes itself as: claude code plugins marketplace. The licence is MIT.

When your agent uses it

  • Optimizing performance
  • Reviewing security

Example prompts

  • “/performance-security”

Requirements

  • Node.js
  • A credential in API_KEY
  • A credential in VITE_PUBLIC_KEY

What it can do on your machine

Read from SKILL.md and the folder at commit 6097ad4. 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:

    • pnpm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm and npx, 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 these keys or tokens, usually read from environment variables:

    • API_KEY
    • VITE_PUBLIC_KEY
    • SECRET_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Performance Security loads about 2.4k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 439 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:266
    **In `.env.local` (not committed):**

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 MadAppGang/claude-code at commit 6097ad4, republished under its MIT licence (© MadAppGang). 439 words, ~2,375 tokens.

Download SKILL.mdSave it as .claude/skills/performance-security/SKILL.md (or your agent's skills folder).
name
performance-security
description
Use when optimizing performance or reviewing security. Covers code-splitting, React Compiler patterns, asset optimization, a11y testing, and security hardening for React apps.
updated
2026-01-20
keywords
performance, security, accessibility, a11y, code-splitting, react-compiler, bundle-optimization

Performance, Accessibility & Security

Production-ready patterns for building fast, accessible, and secure React applications.

Performance Optimization

Code-Splitting

Automatic with TanStack Router:

  • File-based routing automatically code-splits by route
  • Each route is its own chunk
  • Vite handles dynamic imports efficiently

Manual code-splitting:

typescript
import { lazy, Suspense } from 'react'

// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'))

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart data={data} />
    </Suspense>
  )
}

Route-level lazy loading:

typescript
// src/routes/dashboard.lazy.tsx
export const Route = createLazyFileRoute('/dashboard')({
  component: DashboardComponent,
})
React Compiler First

The React Compiler automatically optimizes performance when you write compiler-friendly code:

✅ Do:

  • Keep components pure (no side effects in render)
  • Derive values during render (don't stash in refs)
  • Keep props serializable
  • Inline event handlers (unless they close over large objects)

❌ Avoid:

  • Mutating props or state
  • Side effects in render phase
  • Over-using useCallback/useMemo (compiler handles this)
  • Non-serializable props (functions, symbols)

Verify optimization:

  • Check React DevTools for "Memo ✨" badge
  • Components without badge weren't optimized (check for violations)
Images & Assets

Use Vite asset pipeline:

typescript
// Imports are optimized and hashed
import logo from './logo.png'

<img src={logo} alt="Logo" />

Prefer modern formats:

typescript
// WebP for photos
<img src="/hero.webp" alt="Hero" />

// SVG for icons
import { ReactComponent as Icon } from './icon.svg'
<Icon />

Lazy load images:

typescript
<img src={imageSrc} loading="lazy" alt="Description" />

Responsive images:

typescript
<img
  srcSet="
    /image-320w.webp 320w,
    /image-640w.webp 640w,
    /image-1280w.webp 1280w
  "
  sizes="(max-width: 640px) 100vw, 640px"
  src="/image-640w.webp"
  alt="Description"
/>
Bundle Analysis
bash
# Build with analysis
npx vite build --mode production

# Visualize bundle
pnpm add -D rollup-plugin-visualizer
typescript
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true }),
  ],
})
Performance Checklist
  • Code-split routes and heavy components
  • Verify React Compiler optimizations (✨ badges)
  • Optimize images (WebP, lazy loading, responsive)
  • Prefetch critical data in route loaders
  • Use TanStack Query for automatic deduplication
  • Set appropriate staleTime per query
  • Minimize bundle size (check with visualizer)
  • Enable compression (gzip/brotli on server)

Accessibility (a11y)

Semantic HTML

✅ Use semantic elements:

typescript
// Good
<nav><a href="/about">About</a></nav>
<button onClick={handleClick}>Submit</button>
<main><article>Content</article></main>

// Bad
<div onClick={handleNav}>About</div>
<div onClick={handleClick}>Submit</div>
<div><div>Content</div></div>
ARIA When Needed

Only add ARIA when semantic HTML isn't enough:

typescript
// Custom select component
<div
  role="listbox"
  aria-label="Select country"
  aria-activedescendant={activeId}
>
  <div role="option" id="us">United States</div>
  <div role="option" id="uk">United Kingdom</div>
</div>

// Loading state
<button aria-busy={isLoading} disabled={isLoading}>
  {isLoading ? 'Loading...' : 'Submit'}
</button>
Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

typescript
function Dialog({ isOpen, onClose }: DialogProps) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }

    if (isOpen) {
      document.addEventListener('keydown', handleEscape)
      return () => document.removeEventListener('keydown', handleEscape)
    }
  }, [isOpen, onClose])

  return isOpen ? (
    <div role="dialog" aria-modal="true">
      {/* Focus trap implementation */}
      <button onClick={onClose} aria-label="Close dialog">×</button>
      {/* Dialog content */}
    </div>
  ) : null
}
Testing with React Testing Library

Use accessible queries (by role/label):

typescript
import { render, screen } from '@testing-library/react'

test('button is accessible', () => {
  render(<button>Submit</button>)

  // ✅ Good - query by role
  const button = screen.getByRole('button', { name: /submit/i })
  expect(button).toBeInTheDocument()

  // ❌ Avoid - query by test ID
  const button = screen.getByTestId('submit-button')
})

Common accessible queries:

typescript
// By role (preferred)
screen.getByRole('button', { name: /submit/i })
screen.getByRole('textbox', { name: /email/i })
screen.getByRole('heading', { level: 1 })

// By label
screen.getByLabelText(/email address/i)

// By text
screen.getByText(/welcome/i)
Color Contrast
  • Ensure 4.5:1 contrast ratio for normal text
  • Ensure 3:1 contrast ratio for large text (18pt+)
  • Don't rely on color alone for meaning
  • Test with browser DevTools accessibility panel
Show full SKILL.md (187 more words)Show less
Accessibility Checklist
  • Use semantic HTML elements
  • Add alt text to all images
  • Ensure keyboard navigation works
  • Provide focus indicators
  • Test with screen reader (NVDA/JAWS/VoiceOver)
  • Verify color contrast meets WCAG AA
  • Use React Testing Library accessible queries
  • Add skip links for main content
  • Ensure form inputs have labels

Security

Never Ship Secrets

❌ Wrong - secrets in code:

typescript
const API_KEY = 'sk_live_abc123' // Exposed in bundle!

✅ Correct - environment variables:

typescript
// Only VITE_* variables are exposed to client
const API_KEY = import.meta.env.VITE_PUBLIC_KEY

In .env.local (not committed):

bash
VITE_PUBLIC_KEY=pk_live_abc123  # Public key only!

Backend handles secrets:

typescript
// Frontend calls backend, backend uses secret API key
await apiClient.post('/process-payment', { amount, token })
// Backend has access to SECRET_KEY via server env
Validate All Untrusted Data

At boundaries (API responses):

typescript
import { z } from 'zod'

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
})

async function fetchUser(id: string) {
  const response = await apiClient.get(`/users/${id}`)

  // Validate response
  return UserSchema.parse(response.data)
}

User input:

typescript
const formSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Password must be 8+ characters'),
})

type FormData = z.infer<typeof formSchema>

function LoginForm() {
  const handleSubmit = (data: unknown) => {
    const result = formSchema.safeParse(data)

    if (!result.success) {
      setErrors(result.error.errors)
      return
    }

    // result.data is typed and validated
    login(result.data)
  }
}
XSS Prevention

React automatically escapes content in JSX:

typescript
// ✅ Safe - React escapes
<div>{userInput}</div>

// ❌ Dangerous - bypasses escaping
<div dangerouslySetInnerHTML={{ __html: userInput }} />

If you must use HTML:

typescript
import DOMPurify from 'dompurify'

<div dangerouslySetInnerHTML={{
  __html: DOMPurify.sanitize(trustedHTML)
}} />
Content Security Policy

Add CSP headers on server:

nginx
# nginx example
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' data:;
  connect-src 'self' https://api.example.com;
";
Dependency Security

Pin versions in package.json:

json
{
  "dependencies": {
    "react": "19.0.0",  // Exact version
    "@tanstack/react-query": "^5.59.0"  // Allow patches
  }
}

Audit regularly:

bash
pnpm audit
pnpm audit --fix

Use Renovate or Dependabot:

json
// .github/renovate.json
{
  "extends": ["config:base"],
  "automerge": true,
  "major": { "automerge": false }
}
CI Security

Run with --ignore-scripts:

bash
# Prevents malicious post-install scripts
pnpm install --ignore-scripts

Scan for secrets:

bash
# Add to CI
git-secrets --scan
Security Checklist
  • Never commit secrets or API keys
  • Only expose VITE_* env vars to client
  • Validate all API responses with Zod
  • Sanitize user-generated HTML (if needed)
  • Set Content Security Policy headers
  • Pin dependency versions
  • Run pnpm audit regularly
  • Enable Renovate/Dependabot
  • Use --ignore-scripts in CI
  • Implement proper authentication flow
  • core-principles - Project structure and standards
  • react-patterns - Compiler-friendly code
  • tanstack-query - Performance via caching and deduplication
  • tooling-setup - TypeScript strict mode for type safety

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

Files

Just SKILL.md in plugins/frontend/skills/performance-security of MadAppGang/claude-code.

Open the folder on GitHubat commit 6097ad4

Compare with similar skills

Performance Security 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.

Performance Security compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Performance Security this skillMadAppGang/claude-code284—~2.4kAutomated safety check: NotesMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Accessibility CompliancevmDeshpande/ai-agent-automation1783 repos~601Automated safety check: PassApache-2.0
React Ariaintentui/laravel1621 repos~3.9kAutomated safety check: PassApache-2.0

Similar skills

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 9 days ago
    Frontend & DesignAuto-check: notes

  • Accessibility Compliance

    vmDeshpande/ai-agent-automation

    Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support.

    178 GitHub starsUsed in 3 repos~601 tokens
    Frontend & DesignAuto-check passed

  • React Aria

    intentui/laravel

    Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.

    162 GitHub starsUsed in 1 repo~3.9k tokens
    Frontend & DesignAuto-check passed

  • Instui Docs

    instructure/instructure-ui

    Look up authoritative Instructure UI (InstUI, @instructure/ui-) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs.

    482 GitHub stars~498 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from MadAppGang/claude-code

All 69 skills in this repo

  • API Spec Analyzer

    MadAppGang/claude-code

    Analyzes API documentation from OpenAPI specs to provide TypeScript interfaces, request/response formats, and implementation guidance.

    284 GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check passed

  • Content Brief

    MadAppGang/claude-code

    Content brief template and creation methodology for SEO-optimized content.

    284 GitHub starsUsed in 1 repo~959 tokens
    Auto-check passed

  • Context Detection

    MadAppGang/claude-code

    A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…

    284 GitHub stars~5.4k tokensUpdated 6 mo ago
    Auto-check passed

  • Content Optimizer

    MadAppGang/claude-code

    On-page SEO optimization techniques including keyword density, meta tags, heading structure, and readability.

    284 GitHub starsUsed in 1 repo~694 tokens
    Auto-check passed

  • Keyword Cluster Builder

    MadAppGang/claude-code

    Techniques for expanding seed keywords and clustering by topic and intent.

    284 GitHub starsUsed in 1 repo~674 tokens
    Auto-check passed

  • Serp Analysis

    MadAppGang/claude-code

    SERP analysis techniques for intent classification, feature identification, and competitive intelligence.

    284 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

Works with

Categories

Questions about Performance Security

What does Performance Security do?

A skill your agent uses when optimizing performance or reviewing security. Performance Security is an agent skill from MadAppGang/claude-code. Use when optimizing performance or reviewing security.

When should I use Performance Security?

Performance Security fits situations like: optimizing performance; reviewing security.

How do I install Performance Security in Claude Code?

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

How do I install Performance Security in Codex?

Run `npx skills add MadAppGang/claude-code --skill performance-security -a codex`. Or copy the skill folder (plugins/frontend/skills/performance-security in MadAppGang/claude-code) into .agents/skills/performance-security in your project. Codex loads it when a task matches its description.

Can I use Performance Security 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 MadAppGang/claude-code --skill performance-security -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/performance-security, .gemini/skills/performance-security, .github/skills/performance-security and .opencode/skills/performance-security in your project.

What does Performance Security need to run?

Going by SKILL.md and its folder, Performance Security needs the command-line tools its instructions call (pnpm and npx) and credentials named API_KEY, VITE_PUBLIC_KEY and SECRET_KEY. Our summary lists: Node.js; A credential in API_KEY; A credential in VITE_PUBLIC_KEY.

Does Performance Security access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Performance Security safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Performance Security use?

Performance Security 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 Performance Security use?

About 2.4k tokens (SKILL.md is roughly 9.5k 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 Performance Security?

Skills that share tags, products or a category with Performance Security: Wcag Audit Patterns (vmDeshpande/ai-agent-automation, 178 stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Extract Design (Manavarya09/design-extract, 4.2k stars) and Accessibility Compliance (vmDeshpande/ai-agent-automation, 178 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Performance Security?

MadAppGang (a GitHub organization) maintains it in MadAppGang/claude-code, which has 284 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on March 15, 2026.

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