frontend-dev-guidelines

thomas0369/claude_ai

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

0 stars

0 forks

29 views

View on GitHub Add to Favorites

Installation

Option 1: Use slash command in Claude Code

/install-skill https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines

Option 2: Clone to skills directory

# Global (all projects)

git clone https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines ~/.claude/skills/claude_ai

# Project-specific

git clone https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines .claude/skills/claude_ai

Add MCP server to .cursor/mcp.json:

{
  "mcpServers": {
    "skillz": {
      "command": "npx",
      "args": ["-y", "skillz-mcp", "https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines"]
    }
  }
}

Restart Cursor after adding the configuration.

Option 1: Use Gemini CLI command

gemini extensions install https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines

Option 2: Clone to extensions directory

git clone https://github.com/thomas0369/claude_ai/tree/main/skills/frontend-dev-guidelines ~/.gemini/extensions/claude_ai