tsh-component

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.