react-components

Implement React/TypeScript components with Tailwind CSS and shadcn/ui.

Updated Mar 30, 2026

Search Tags:#typescript #a11y #react #i18n #pwa #tailwind #shadcn-ui

Ready to run

npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill react-components-benidrissa

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/Benidrissa/etutor-digital-ph/tree/main/.claude/skills/react-components
Command: npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill react-components-benidrissa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build production-grade React/TypeScript components for the Sira learning platform, ensuring consistency with Tailwind CSS + shadcn/ui, mobile-first accessibility, and bilingual FR/EN support.

Core Features & Use Cases

Framework: Next.js 15 App Router + React 19
Language: TypeScript 5.x (strict mode)
Styling: Tailwind CSS + shadcn/ui components
State: Zustand for client state, TanStack Query v5 for server state
Forms: React Hook Form + Zod validation
i18n: next-intl (translations for FR/EN)
PWA: next-pwa + Workbox (offline-first)
A11y: WCAG 2.1 AA compliance

Quick Start

Create a new Next.js 15 component in TypeScript, styled with Tailwind and shadcn/ui, and ensure translations via next-intl wired for FR and EN.

Frequently Asked Questions about react-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build production-grade React components with Next.js 15 App Router and TypeScript strict mode?▼

To build production-grade React components with Next.js 15 and TypeScript strict mode, design mobile-first layouts styled with Tailwind CSS and shadcn/ui, ensuring WCAG 2.1 AA accessibility and FR/EN i18n via next-intl.

Does this React component approach support offline-first PWA patterns?▼

Yes, this React component approach supports offline-first PWA patterns by integrating next-pwa and Workbox, ensuring components remain functional and ready under offline network scenarios.

How do I manage state and forms in React using Zustand, TanStack Query, and React Hook Form?▼

Manage state and forms by using Zustand for client state, TanStack Query v5 for server state, and React Hook Form combined with Zod for schema validation, ensuring robust data handling within your components.

What is the best way to ensure WCAG 2.1 AA accessibility in shadcn/ui components?▼

The best way to ensure WCAG 2.1 AA accessibility in shadcn/ui components is to design them with mobile-first responsive layouts down to 320px, strictly adhering to accessibility requirements throughout the Sira platform implementation.

Can I use this setup to handle bilingual FR/EN translations with next-intl?▼

Yes, you can handle bilingual FR/EN translations by wiring next-intl into your components, ensuring the interface properly displays translations for both French and English locales.

When should I not use Tailwind CSS with shadcn/ui for React component development?▼

You should not use Tailwind CSS with shadcn/ui if your project does not support Next.js 15 App Router or requires state management and validation libraries outside the specified Zustand, TanStack Query, and Zod ecosystem.