React Performance

databayt/hogwarts

Educational automation streamlining operations for students, educators, and school leaders.

10 stars

8 forks

TypeScript

73 views

View on GitHub Add to Favorites

SKILL.md

name: React Performance description: Component optimization version: 1.0.0 category: performance

React Performance Skill

Memoization

React.memo for components
useMemo for calculations
useCallback for handlers

Code Splitting

React.lazy for heavy components
Suspense for loading states

Checklist

Memoized expensive components
No inline functions
Lazy loaded when appropriate

Installation

Option 1: Use slash command in Claude Code

/install-skill https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance

Option 2: Clone to skills directory

# Global (all projects)

git clone https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance ~/.claude/skills/hogwarts

# Project-specific

git clone https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance .claude/skills/hogwarts

Add MCP server to .cursor/mcp.json:

{
  "mcpServers": {
    "skillz": {
      "command": "npx",
      "args": ["-y", "skillz-mcp", "https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance"]
    }
  }
}

Restart Cursor after adding the configuration.

Option 1: Use Gemini CLI command

gemini extensions install https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance

Option 2: Clone to extensions directory

git clone https://github.com/databayt/hogwarts/tree/main/.claude/skills/react-performance ~/.gemini/extensions/hogwarts

Topics

authjs automation cloud education exam finance library lms multi-tenant nextjs saas school shadcn-ui sis sms stripe