Frontend Development Guidelines

Name: Frontend Development Guidelines
Rating: 0
Author: diet103

by diet103·1mo ago

React/TypeScript patterns with Suspense, MUI v7, TanStack Query, and TanStack Router for modern frontend work.

Agent & Skill BuildingcliapilinuxAutomated screen · 自动筛查open source · 开源

Before you install安装前须知

✓No special access needs declared未声明特殊权限需求

Editor's verdict· 编辑结论

Skill is part of a broader Claude Code infrastructure showcase; the parent repo bundles auto-activation hooks and other skills for a full workflow.
— Editorial team · 编辑团队

Install via Skills CLI

Use npx skills add to install this skill into the selected agent. Phase 0 commands are generated from source rules, not verified.

Codex

npx skills add https://github.com/diet103/claude-code-infrastructure-showcase -g -a codex -y

Drop `-g` to install project-locally

✓

Best for适合什么场景

React/TypeScript projects that use TanStack Query, TanStack Router, and MUI v7
Teams wanting consistent component, feature, and routing conventions across a frontend codebase
Developers looking for opinionated Suspense, lazy loading, and performance patterns

✗

Not for不适合什么场景

Non-React frameworks such as Angular, Vue, or Svelte projects
Codebases that do not use TanStack Query, TanStack Router, or MUI v7
Projects needing a UI component library other than MUI v7 or a different router

vs alternativesvs 其他选择

Full compare table完整对比表 →

#1Anthropic Skill Creator

Create, test, and improve skills in an eval loop.

★ 4.9·163k stars

diff · 差异Best first pick for teams getting serious about authoring reusable skills. The workflow is built around an eval loop: describe the workflow, write trigger examples and expected outputs, then iterate until the skill fires only when it should. Official Anthropic provenance means trigger-description quality and frontmatter format match what Claude actually loads. Not for one-off automation — the eval setup overhead doesn't pay off unless the skill ships to other people.

#2mcp builder

mcp builder: agent skill — from anthropics/skills.

132k stars

diff · 差异Best for taking a tool or API you already use and exposing it via MCP so Claude (or any MCP-aware agent) can call it directly. Handles the MCP protocol surface — tools, resources, prompts — without hand-writing the schema. Strongest when the underlying tool already has a clean API. Weakest when you need to build the underlying tool first; do that separately, then wrap.

#3mcp server builder

mcp server builder: agent skill — from alirezarezvani/claude-skills.

14k stars

diff · 差异Best when mcp-builder isn't enough and you need a full MCP server — multiple tools, persistent state, custom resource handlers, deployment story. Larger surface than mcp-builder; expect more boilerplate to set up but more flexibility once you do. Skip it for single-tool wrappers — mcp-builder is the right size there.

Side-by-side compare维度对比

Key differences with same-lane alternatives

	this skill · 当前Frontend Development Guidelines	Anthropic Skill Creator	mcp builder	mcp server builder
Rating · 评分	0.0	4.9	—	—
Stars · 星标	10.0k	163k	132k	14k
Risk · 风险	Automated screen · 自动筛查	Medium risk · 中风险	Low risk · 低风险	Low risk · 低风险
Best for · 最适合	React/TypeScript projects that use TanStack Query, TanStack Router, and MUI v7	New skill creation	mcp builder: agent skill — from anthropics/skills.	mcp server builder: agent skill — from alirezarezvani/claude-skills.
Not for · 不适合	Non-React frameworks such as Angular, Vue, or Svelte projects	One-off task automation	Workflows that require stronger human review than this catalog entry documents.	Workflows that require stronger human review than this catalog entry documents.

Audit notes审计备注

not individually audited · 未独立审计

Source源码open on GitHub · 公开✓

Author作者community · 社区!

Network网络访问not individually audited · 未独立审计!

Filesystem文件写入not individually audited · 未独立审计!

Dependencies依赖not individually audited · 未独立审计!

Telemetry遥测none · 无✓