Claude MarketplacesSubmit
hieutrtr avatar

React Frontend Expert

hieutrtr/ai1-skills

This is a comprehensive implementation guide for React 18+ with TypeScript, focused on the actual coding phase. It enforces functional components only (no React.FC), provides opinionated project structure separating features from shared components, and includes battle-tested patterns for custom hooks like useAuth and useDebounce. The TanStack Query section is especially solid, pushing query options factories to prevent key collisions and emphasizing cache invalidation over manual refetches. It explicitly scopes itself to implementation, carving out testing and deployment to other skills. If you're building a modern React app and want consistent patterns across your team without debating architecture mid-sprint, this gives you the rails.

skills.sh installs
206
GitHub stars
8
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add hieutrtr/ai1-skills --skill react-frontend-expert --agent claude-code

Installs into .claude/skills of the current project.

Files

React Frontend Expert

When to Use

Activate this skill when:

  • Creating or modifying React components (functional components only)
  • Writing custom hooks (useXxx)
  • Building pages with routing
  • Implementing data fetching with TanStack Query
  • Handling forms with validation
  • Setting up project structure for a React/TypeScript application

Do NOT use this skill for:

  • Writing component or hook tests (use react-testing-patterns)
  • E2E browser testing (use e2e-testing)
  • API contract design (use api-design-patterns)
  • Backend implementation (use python-backend-expert)
  • Deployment or CI/CD (use deployment-pipeline)

Instructions

Project Structure

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/hieutrtr/ai1-skills
Categories
Frontend Development, Testing & QA, Design & UI/UX
First seen
Jun 3, 2026

More from hieutrtr/ai1-skills

All 3

Recommended

More Frontend Development
1autohandai avatartailwind-ui-patternsautohandai/community-skillsTailwind CSS v4 patterns, component styling, and responsive design174skills.sh installs
2addyosmani avatarfrontend-ui-engineeringaddyosmani/agent-skillsBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layout77.8Kskills.sh installs
3ulpi-io avatarfrontend-design-ui-uxulpi-io/skillsProduce a distinctive, LOCKED design language plus an implementation-ready UX/UI spec, written to `.ulpi/design/`: a per-brief visual identity (palette, type, s2.4Kskills.sh installs
4sergiodxa avatarfrontend-react-best-practicessergiodxa/agent-skillsReact performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Trigger1.2Kskills.sh installs
5bobmatnyc avatartailwind-cssbobmatnyc/claude-mpm-skillsTailwind CSS utility-first framework for rapid UI development with responsive design and dark mode1.2Kskills.sh installs
6onewave-ai avatarresponsive-layout-builderonewave-ai/claude-skillsBuild responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first lay370skills.sh installs