用途:作为设计系统工程、无障碍与 UX 模式的标准参考,集中承载组件设计、表单处理与无障碍指引,不放在语言专属技能中。响应式 CSS 与 Tailwind 见 /css-responsive,SaaS 产品模式见 /saas-product,React hooks 与状态见 /react。
主要能力:设计哲学强调一致性优先于美观、约束促进创造力、无障碍即设计、组合优于配置、内容驱动布局。设计令牌分三层:原始值 primitive → 语义 semantic → 组件 component;组件只引用语义令牌,语义令牌引用原始值。令牌类别包括颜色、间距(4px 基准)、排版(1.25 模数)、圆角、阴影、时长。视觉层级涵盖排版比例(12px 至 30px)、空白节奏与颜色层级。组件 API 设计提倡组合而非属性透传、复合并组件(Radix UI / shadcn/ui 模式)、无头组件库、显式 props 类型、as 多态属性、CVA 变体系统、单一职责与可组合性测试。表单 UX 以服务端验证为唯一权威,分 HTML5 属性、服务端校验、数据库约束三层,讲解跨字段验证、错误位置、多步表单、禁用与只读区别、自动保存。无障碍部分强调语义 HTML 优先、焦点管理、键盘导航及对话框、组合框、标签页、菜单的 ARIA 模式、实时区域、对比度(正文 4.5:1)与 axe-core 测试。另含动效(目的、时长、缓动、prefers-reduced-motion)、暗色模式令牌反转与主题运行时切换的 CSS 自定义属性架构。
使用方式与限制:资料未提供具体安装命令或调用步骤,暂未提供;具体实施细节需结合项目技术栈。