web-app-ui-implementation
用 Codex 实现 Next.js 网页界面与交互状态
EnglishCodex 安装步骤
- 运行 git clone https://github.com/Eldergenix/Codex-Design.git。进入克隆目录并运行 git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c。
- 复制完整 skills/web-app-ui-implementation 到目标项目的 .agents/skills/web-app-ui-implementation，保留随附文件。
- 从目标项目打开 Codex，用 /skills 或 $web-app-ui-implementation 选择技能，再输入本页示例。
中文摘要
读取项目的组件库和路由约定后实现页面，覆盖加载、空白、错误和交互状态。源技能以 Next.js、TypeScript 与常见 React 组件库为例。
SKILL.md 中文导读
可复现示例
在一个已有的 Next.js 阅读列表项目里增加主题筛选。使用项目原有组件，准备两个主题和一个无结果组合，再模拟一次本地加载失败。工作步骤
- 识别项目的依赖、路由和组件边界。
- 用既有组件实现筛选和状态反馈。
- 检查窄屏、键盘焦点与项目支持的构建验证。
验收方法
筛选可用键盘操作，正常结果、空结果和加载失败各有可见反馈。用窄屏检查列表，并记录已有构建或类型检查命令的结果。
GitHub 原文 · 更新日期
适用环境
需要可访问本地项目的 Codex。将固定版本中的技能目录与随附文件一起使用。
常见问题
已有 Radix 或 shadcn/ui 组件时从哪里开始？
先核对 package.json、现有组件和样式变量。沿用已经采用的组件库、图标与焦点样式，为当前需求补上缺失的状态。