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.

主な機能

Atomic Design hierarchy (Atoms, Molecules, Organisms, Templates)
Comprehensive TypeScript pattern guidance for UI components
1 GitHub stars
Strict Emotion styled-components enforcement and patterns
Standardized theme token access and implementation
Best practices for accessible and performant React layouts

ユースケース

Building new UI components from scratch following project standards
Refactoring legacy inline styles into a centralized design system
Onboarding developers to specific frontend architectural patterns

概要

主な機能

Atomic Design hierarchy (Atoms, Molecules, Organisms, Templates)
Comprehensive TypeScript pattern guidance for UI components
1 GitHub stars
Strict Emotion styled-components enforcement and patterns
Standardized theme token access and implementation
Best practices for accessible and performant React layouts

ユースケース

Building new UI components from scratch following project standards
Refactoring legacy inline styles into a centralized design system
Onboarding developers to specific frontend architectural patterns