How does it handle business logic in components?

It follows the single responsibility principle, requiring all business logic to be extracted into custom hooks to keep UI components clean.

Does it include rules for accessibility?

Yes, it includes specific guidelines for ARIA attributes, semantic HTML, and keyboard navigation to ensure high accessibility standards.

Does this skill support Class Components?

No, it strictly enforces the use of Functional Components and discourages React.FC in favor of standard functional definitions for better type clarity.

Which Storybook version is supported?

The skill is optimized for Storybook CSF 3.0, utilizing modern type definitions like Meta and StoryObj while avoiding manual title settings.

React Development Standards

Name: React Development Standards
Author: DIO0550

byDIO0550

•

Design Tools

Enforces modern React development conventions including functional components, custom hooks, and Storybook CSF 3.0 patterns.

This skill provides a comprehensive set of rules and best practices for building modern React applications. It guides Claude to implement clean, maintainable code by enforcing functional component patterns, extracting business logic into standardized custom hooks, and generating Storybook documentation using CSF 3.0. By providing specific constraints on prop typing, conditional rendering, and accessibility, it ensures consistent code quality and high-performance frontend architecture across development teams.

Key Features

01Functional component and prop typing enforcement

02Accessibility and semantic HTML optimization

03Performance-focused patterns using React.memo

041 GitHub stars

05Standardized custom hook architecture with error handling

06Storybook CSF 3.0 documentation generation

Use Cases

01Scaffolding new React components with standardized prop types and structure.

02Refactoring complex business logic into reusable, testable custom hooks.

03Creating comprehensive UI documentation with Storybook CSF 3.0 templates.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dio0550/d-market react

For use in Claude.ai and ChatGPT

Download Skill