How does this skill help with styling?

It provides standardized Tailwind CSS utility patterns for common UI elements like cards, buttons, and headings to ensure visual consistency across the project.

Is the layout mobile-responsive?

Yes, the skill enforces a mobile-first approach using responsive Tailwind grid classes and adaptive container padding.

Does this skill support testing?

Yes, it includes pre-configured testing patterns using Vitest and React Testing Library for verifying component rendering and user interactions.

What is the recommended file structure for components?

Components are organized into individual directories containing the implementation (.jsx), a matching test file (.test.jsx), and an optional index.js for exports.

React UI Component Patterns

Name: React UI Component Patterns
Author: Mark393295827

byMark393295827

•

Design Tools

Standardizes the creation of production-ready React components with integrated Tailwind CSS styling and Vitest testing patterns.

This skill streamlines React development within the house-maint-ai ecosystem by providing a standardized blueprint for UI components. It enforces consistent file structures, JSDoc documentation, and mobile-first responsive design using Tailwind CSS utility classes. Beyond styling, the skill ensures code reliability by embedding comprehensive testing patterns with Vitest and React Testing Library, making it an essential tool for developers looking to maintain high-quality frontend architecture and uniform design systems.

Key Features

01Mobile-first responsive design grid and layout patterns

02Enforced directory structure and barrel export management

03Standardized React component templates with JSDoc documentation

04Tailwind CSS utility patterns for consistent UI components

05Automated Vitest and React Testing Library boilerplate

061 GitHub stars

Use Cases

01Standardizing unit tests for interactive UI elements and event handlers

02Refactoring existing React code to follow mobile-first responsive patterns

03Rapidly scaffolding new UI components with consistent styling and tests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mark393295827/house-maint-ai react-components

For use in Claude.ai and ChatGPT

Download Skill