ui-guidelines
Installation
SKILL.md
Overview
This skill provides comprehensive UI development guidelines for the ludiscan-webapp project. Follow these guidelines to maintain consistency, code quality, and accessibility.
Files in This Skill
- SKILL.md (this file) - Core principles and quick reference
- reference.md - Theme tokens, z-index, and component API reference
- patterns.md - React best practices, TypeScript patterns, and common pitfalls
- examples.md - Code examples for creating components
Core Principles
1. Styling System
ALWAYS use Emotion styled components - NEVER use inline HTML tags
- ✅ Good:
const StyledDiv = styled.div...orconst StyledButton = styled(Component)... - ❌ Bad:
<div style={{...}}>