Guide React app UI builds with standardized Mantine or Tailwind choices and accessibility rules.
npx skills add https://github.com/jon23d/opencode-configs --skill ui-design-jon23d
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/jon23d/opencode-configs/tree/main/skills/ui-design Command: npx skills add https://github.com/jon23d/opencode-configs --skill ui-design-jon23d
This guide provides clear, consistent UI design principles for React applications, ensuring teams choose a single design system (Mantine for business apps or Tailwind for consumer apps) and apply consistent typography, spacing, accessibility, and responsive patterns across projects.
Apply ui-design guidelines to your next React UI by selecting Mantine or Tailwind, enforcing accessibility, and establishing a responsive typography and spacing baseline from day one.
High-intent search queries and answers about installing and using this skill.
Choose Mantine for business-facing dashboards and admin panels, or Tailwind for consumer-facing apps and marketing sites. This decision framework prevents mixed ecosystems and ensures consistent React UI design across projects.
Enforce accessibility in React applications by applying standardized rules for inclusive interfaces. This includes using semantic components from Mantine or Tailwind that support responsive design and screen reader compatibility natively.
Maintain consistent typography and spacing by establishing a responsive baseline from day one. Apply standardized UI guidelines using either Mantine or Tailwind to ensure visual consistency across all components and pages.
Mixing Mantine and Tailwind in the same React project is not recommended. This guide enforces choosing a single design system to avoid mixed ecosystems, improve performance, and ensure maintainability across your application.
Design reusable React components for business dashboards by applying Mantine conventions and state-management patterns. This approach improves component reusability and maintainability while adhering to accessibility and responsive design guidelines.
Yes, this React UI design approach supports responsive consumer interfaces by applying Tailwind utility classes. It includes responsive design best practices to ensure usable, inclusive interfaces across different device sizes.
findinfinitelabsBuild a type-safe Chuukese React frontend with Mantine UI v8 and Vite.
HafizFasihImplement a robotics-themed design system for dark-mode industrial dashboards.
AngelP17Standardize UI design with Tailwind-based design tokens and component patterns.
o2b3kStandardize Tailwind CSS utility classes and v4 syntax in HTML components.
