ui-styling

ui-styling 技能提供了一个专业且可扩展的框架，用于开发现代 React 界面。它强制执行“组件优先”的哲学，确保 shadcn/ui 等 UI 原语不会直接用于功能代码中，而是包裹在自定义的、可重复使用的组件内。这种方法建立了单一事实来源，显著提高了可维护性，并确保复杂应用程序中的用户体验一致。此技能专为构建设计系统、复杂表单或响应式仪表板的开发人员所设计，需要在快速原型制作与长期代码库健康之间取得平衡。

• 使用 React、Tailwind CSS 工具类与 CVA (Class Variance Authority) 进行高级组件组合，实现高度可扩展的变体管理。

• 表单整合工作流程，结合 React Hook Form 与 Zod 验证模式，以实现强大的类型安全输入处理。

• 移动优先的响应式设计模式，包括触控友好的组件尺寸调整与使用断点的自适应布局。

• 通过 CSS 变量、主题支持以及针对原语、自定义包装器与功能特定组合的模块化文件组织，进行全面的样式管理。

• 基于 Radix UI 原语的无障碍功能实现，确保屏幕阅读器兼容性与键盘导航标准。

• 务必将 shadcn/ui 原语包裹在自定义组件中，以允许集中式样式更新与一致的属性接口。

• 使用建议的组件组织结构：将原语保留在 components/ui/，将重用逻辑放在 components/custom/，并将领域逻辑隔离在 components/features/ 中。

• 对于交互式元素，优先考虑触控友好的最小高度 (min-h-11)，以改善移动设备的使用性。

• 若有复杂的表单需求，请参考使用 Zod 与 React Hook Form 的整合验证模式，以确保数据一致性。

• 在实现多态组件时，利用 asChild 模式来维持灵活的渲染目标，同时保留无障碍属性。