What problem does it solve? Frontend teams often build ad hoc UI with hardcoded styles, inconsistent spacing, and duplicated primitives. This Skill enforces a shared component system and semantic design tokens so web UI stays consistent, accessible, and maintainable across the iWana neXt project. ## Core Features & Use Cases - Component inventory governance: Lists which @iwana/ui components (Button, Input, Card, Badge, OtpInput, ThemeProvider, ThemeToggle) are actually implemented versus roadmap items, preventing imports of nonexistent components. - Design token rules: Defines semantic token categories for spacing, typography, color, and radius built on Tailwind 4 CSS-first configuration with shadcn/ui and Radix Primitives. - Patterns and anti-patterns: Provides ready-to-use TSX patterns for sections, forms, empty states, and primary actions, plus explicit anti-patterns such as hardcoded inline styles and React Native imports. - Use Case: When building a new customer summary screen, an agent uses this Skill to compose Section, Stack, Heading, and Text primitives with semantic tokens instead of inventing one-off styled divs. ## Quick Start Use the core-components skill to build a form section for the customer page using only implemented @iwana/ui components and semantic design tokens.
