Home / Skills / frontend-dev-guidelines

frontend-dev-guidelines

diet103/claude-code-infrastructure-showcaseSkill

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.

ScannedSkillSource: GitHub

10,038 stars +12 this week Updated 4mo ago License MIT Context ≈101 tokens always loaded

70popular

Why this score

Stars

21/35

Usage (forks)

9/15

Upkeep

15/25

License

15/15

Owner history

10/10

This repo hosts 9 skills, so its 10,038 stars are split between them (about 1,115 each) for scoring.

Popularity score: 70/100 from public GitHub signals only. It shows how widely used and maintained this is, not how well it works. Not included yet: the fake-star check. The security scan is shown separately and doesn't change the score. How we rank

Security

Scanned Oct 20, 2026 at commit 07f75ce3c301, with Cisco's open-source skill-scanner.

None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.

A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan

Alternatives

Other makers' add-ons that do the same job, next to this one.

Name	Score	Stars	Context	Updated
This onefrontend-dev-guidelines diet103/claude-code-infrastructure-showcase · Skill	70	★ 10k	≈101 always	4mo ago
frontend-dev MiniMax-AI/skills · Skill Same job: frontend	65	★ 14k	≈24 always	7mo ago
frontend-ai-guide shinpr/claude-code-workflows · Skill Same job: frontend	68	★ 703	≈60 always	16d ago
frontend-react-best-practices modelscope/ms-agent · Skill Same job: frontend	76	★ 4.4k	≈68 always	17d ago
frontend-design xstongxue/best-skills · Skill Same job: frontend	68	★ 3.0k	≈39 always	2mo ago
frontend-typescript-rules shinpr/ai-coding-project-boilerplate · Skill Same job: frontend	62	★ 234	≈37 always	21d ago

Install

mkdir -p .claude/skills/frontend-dev-guidelines

curl -sL https://codeload.github.com/diet103/claude-code-infrastructure-showcase/tar.gz/07f75ce3c301259e857343596e7883b8ce5a9f50 | tar -xz -C .claude/skills/frontend-dev-guidelines --strip-components=4 "claude-code-infrastructure-showcase-07f75ce3c301259e857343596e7883b8ce5a9f50/.agents/skills/frontend-dev-guidelines"

To remove it later:

rm -rf .claude/skills/frontend-dev-guidelines

npx skills add diet103/claude-code-infrastructure-showcase --skill frontend-dev-guidelines

Pinned to commit 07f75ce3c301 as listed by GitHub.

Context cost: ≈101 tokens loaded every session (name and description), plus ≈2.9k tokens when the skill is used.

The Claude Code command downloads this skill folder at the pinned commit into .claude/skills/. The Skills CLI (npx skills) works with many agents but can't pin a version, so it installs whatever is current.

Used for

Engineering › Frontend

Facts

Repo: diet103/claude-code-infrastructure-showcase
Stars: 10,038
Forks: 1,214
Last push: 2026-07-13 (4mo ago)
License: MIT
Owner: diet103 · since 2025
Language: TypeScript
Works with: Claude Code, Skills CLI