frontend-design-guidelines

用途：在创建 React/Next.js 组件或页面、构建表单/布局/对话框/导航、审查前端代码、添加动画或微交互、使用 CSS/Tailwind/CSS-in-JS 样式时应用该规则集，也可在用户要求“美化界面”时触发。主要能力：提供默认技术栈建议（Next.js App Router + TypeScript、Tailwind CSS、shadcn/ui 组件通过 npx shadcn@latest add <name> 安装、lucide-react 图标、CSS transitions、next/font 字体）；规定品牌流程，检查项目根目录 brand.md，存在则读取调色板与字体，标记 Status: deferred 则使用 shadcn 默认中性主题且不再提示，不存在则询问一次是否运行 brand-design，用户拒绝或未明确回答则写入 deferred 版 brand.md 并继续；要求交互元素使用真实 button/a 元素而非 div onClick，确保可见 focus ring、触控目标至少 40×40px、实现 loading/empty/error 状态、动画尊重 prefers-reduced-motion、颜色与间距使用设计令牌、满足 WCAG AA 对比度、表单具备 label 与 autocomplete、暗色模式正常、文案简洁主动，并提供最终审查清单覆盖键盘导航、焦点、命中区域、各状态、对比度、响应式测试（375/768/1280px）等。使用方式：技能启动时先读取遥测配置并可能询问遥测偏好，然后根据任务读取对应参考文件（表单读 references/forms.md 与 interactions.md，页面读 layout-and-design.md，动画读 animation.md，Solana UI 读 solana-ui-patterns.md，抛光读 craft-and-polish.md），编码后按最终清单自审。限制：资料未提供该技能的具体安装命令、许可协议、收费信息及独立运行环境要求；涉及 Solana 的部分仅提供钱包、交易、代币金额等 UI 模式参考。