What are the critical rules for code quality?

The skill enforces zero use of the 'any' type, forbids dangerouslySetInnerHTML, requires the className prop for component compatibility, and mandates proper useEffect cleanup.

What styling library does this skill advocate for?

This skill specifically enforces the use of Emotion styled-components and prohibits the use of inline HTML styles to ensure style consistency and maintainability.

How does it organize component structure?

It follows the Atomic Design methodology, categorizing components into Atoms (basic blocks), Molecules (simple combinations), Organisms (complex logic), and Templates (layouts).

Does this skill provide theme support?

Yes, it requires the use of the useSharedTheme hook and theme tokens for all colors, spacing, and typography instead of hardcoded CSS values.

React UI System Guidelines

Name: React UI System Guidelines
Author: ludiscan

byludiscan

•

デザインツール

Enforces consistent React UI development using Emotion, Atomic Design principles, and standardized theme tokens.

This skill provides a comprehensive framework for frontend development within the ludiscan-webapp project, ensuring high-quality, maintainable, and accessible user interfaces. It enforces strict adherence to Emotion styled-components, Atomic Design architecture, and theme-based styling, helping developers avoid common pitfalls like hardcoded values or inline styles while promoting reusable component patterns and robust TypeScript definitions.

主な機能

01Atomic Design hierarchy (Atoms, Molecules, Organisms, Templates)

02Comprehensive TypeScript pattern guidance for UI components

031 GitHub stars

04Strict Emotion styled-components enforcement and patterns

05Standardized theme token access and implementation

06Best practices for accessible and performant React layouts

ユースケース

01Building new UI components from scratch following project standards

02Refactoring legacy inline styles into a centralized design system

03Onboarding developers to specific frontend architectural patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ludiscan/ludiscan-webapp ui-guidlines

For use in Claude.ai and ChatGPT

Download Skill