React Component Diagnosis
by hylarucoder · development · typescript, react, code-review, api, skill
深度诊断单个 React 组件的架构设计质量，产出一份结构化体检报告：7 维度评分卡（使用者 API、数据流、可测试性、可扩展性、性能、心智模型、边界契约，每维 1-5 分 + 代码证据）、设计亮点、按 P0/P1/P2 分级且标注工作量的改进建议——所有评分基于逐行读代码后发现的具体问题（useMemo 依赖、useEffect cleanup、类型断言、每帧重复计算等），而非扫一眼目录得出的表面评价。当用户请求组件诊断、组件设计审查、架构分析、组件体检、组件 API/props 设计评估时使用，即使没说出"诊断"二字也应主动触发：用户指向一个组件目录或 .tsx 文件问"这个组件设计得怎么样"、"帮我看看这个组件"、"这个写得怎么样"、"是否需要重构"、"为什么每次都 re-render"、"useEffect 写对了吗"、"props 设计合理吗"，或用英文说 "review this React component"、"is this component well designed"、"audit this component"、"should I refactor th...
Source: https://github.com/hylarucoder/hai-stack
Install
git clone https://github.com/hylarucoder/hai-stackTags: typescript, react, code-review, api, skill
⭐ 157 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
React Component Diagnosis is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- maptiler by maptiler
Expert coding skill for the full MapTiler platform — Cloud REST APIs, MapTiler SDK JS (built on MapLibre GL JS), native mobile SDKs, on-premise infrastructure, and vector tile schemas. USE WHEN the user wants to add a map to a web or mobile app, show locations or routes, display geographic data, build a store locator, create data visualizations on maps, add geocoding or address search, do reverse geocoding, look up elevation, do IP geolocation, fetch weather data, transform coordinates betwee...
- Google Ads MCP Server by passiondev227
Enables interaction with Google Ads data via Claude Desktop, providing tools for managing campaigns, ad groups, keywords, budgets, and generating performance insights and visualizations.
- ubuntu-insights by duelist2021jp
Provides Ubuntu system information (CPU, memory, disk, network, services, processes) to Bob via natural language queries.
- io.github.PrometheusAgency/bluesky-brand-monitor by io.github.PrometheusAgency
Monitor Bluesky for new brand mentions, keywords and account posts. Alerts only on new results.
- io.github.NellInc/psychopathia-mcp by io.github.NellInc
Read-only tools over the Psychopathia Machinalis nosology: 79 conditions, 11 tools.
- Disney Lorcana TCG Collection by io.github.IcaroBichir
Connect Claude to Disney Lorcana card data: enrich collections, look up cards, filter by format.
- io.github.HrishiKabra/voting-mcp by io.github.HrishiKabra
Social-choice voting rules (Borda, Copeland, Condorcet, STV, opinion pool) as MCP tools.
- io.github.FerhatDundar/s3-mcp-connector by io.github.FerhatDundar
MCP server for Amazon S3 and S3-compatible endpoints (LocalStack, MinIO). Single Go binary.
Frequently asked questions
How do I install React Component Diagnosis?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support React Component Diagnosis?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is React Component Diagnosis free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.