skills.rest
Qmop1967
Qmop1967COMMUNITY
Explore all skills by this author →
GitHub

tsh-component

Standardize React UI components with shadcn/ui, dark mode, and RTL support.

Updated Nov 26, 2025
Search Tags:#React#UI/UX#components#Next.js#TailwindCSS#shadcn/ui#dark mode#RTL
One-click install
npx skills add https://github.com/Qmop1967/Clients-Console --skill tsh-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tsh-component
Source: https://github.com/Qmop1967/Clients-Console/tree/main/.claude/skills/tsh-component
Command: npx skills add https://github.com/Qmop1967/Clients-Console --skill tsh-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes the development of new UI components, ensuring they adhere to design guidelines, support internationalization (RTL), dark mode, and responsiveness, reducing development time and improving consistency.

Core Features & Use Cases

  • Standardized Component Patterns: Follow established patterns for pages, client components, and loading skeletons, accelerating development and maintaining code quality.
  • RTL & Dark Mode Support: Implement components that seamlessly adapt to Arabic RTL layouts and dark themes, providing a consistent experience for all users.
  • Responsive Design: Build mobile-first components that automatically adjust and look great on any screen size, from phones to desktops.
  • Use Case: When creating a new product listing page, use this Skill to quickly scaffold the page, implement a product card with proper pricing and stock display, and ensure it's responsive, bilingual, and dark-mode ready, all while following best practices.

Quick Start

Use the tsh-component skill to create a new product card component that displays the product name, price, and stock, ensuring it supports RTL layout and dark mode.

Frequently Asked Questions about tsh-component

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

FAQPage Schema
How do I build React components that support both dark mode and RTL layouts?▼

Dark mode and RTL support are built into this Skill's standardized component patterns using shadcn/ui primitives. Follow the established server and client component structure, apply dark mode classes, and use next-intl for RTL layout adaptation to ensure components render correctly in both themes and languages.

Can I use shadcn/ui components with Next.js app directory and TailwindCSS?▼

Yes. This Skill provides patterns for integrating shadcn/ui with the Next.js app directory, TailwindCSS for styling, and server/client component boundaries. It specifies Suspense usage for loading states and skeleton patterns compatible with all three technologies.

What's the best way to implement responsive product listing pages in Next.js?▼

Use this Skill's product card and page scaffolding templates, which include mobile-first responsive design, grid patterns, and structured layouts. The templates handle pricing display, stock indicators, and skeleton loading states while maintaining consistency across screen sizes.

How do I structure loading states and skeleton components in Next.js?▼

This Skill specifies skeleton and grid patterns with Suspense integration for the Next.js app directory. Use the provided loading skeleton templates to wrap asynchronous components and display placeholder UI while data loads, maintaining responsive layout structure.

Do I need specific knowledge to implement bilingual and dark-mode-ready components?▼

The Skill handles next-intl integration for internationalization and includes patterns for RTL support, so you follow established templates rather than building from scratch. Basic React and Next.js knowledge is sufficient; the patterns abstract the complexity of dual-mode and multilingual design.

What design patterns does this Skill provide for consistent UI development?▼

It provides standardized patterns for pages, client components, loading skeletons, product cards, and empty states. All patterns follow shadcn/ui guidelines, support responsive design, dark mode, and RTL, ensuring visual and behavioral consistency across the TSH Clients Console.

Related Skills

Explore More Software Engineering Skills→
sahaja9707sahaja9707

shadcn-ui

Initialize and configure shadcn/ui projects with React components and Tailwind CSS.

Community
Intermediate
MSBart2MSBart2
2

feature-requirements

Codify FanHub product requirements into actionable UX, accessibility, and analytics guidelines.

Official
Intermediate
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate
Qmop1967Qmop1967

tsh-i18n

Coordinates English and Arabic translations for the TSH Client Console with JSON namespaces and RTL layouts.

Community
Intermediate