Now vibe coding, so learning hammer FE ?
《Shadscan：shadcn 应用的确定性 UI 审计工具》
标签：#前端 #shadcn/ui #React #UI审计 #CLI工具 #可访问性 #CI/CD #AI_Agent
总结：
Shadscan 是一款面向 React/shadcn 应用的静态 UI 审计 CLI 工具，通过 59 条确定性规则从 Foundation、Interaction、States、Accessibility、Forms 和 Production Polish 六个维度为应用打分（0-100），无需启动应用或调用 AI 即可在终端和 CI 中完成审计。它支持生成 JSON 报告、AI Agent 修复指令（--prompt）和 GitHub Action 集成，适用于 Next.js、React Router、TanStack Start、Astro 等多种框架，并支持 monorepo 多包扫描。
文章要点：
1. 零侵入式审计：无需启动应用、修改文件或调用 AI 模型，纯静态分析即可给出可复现的评分结果，适合嵌入 CI 流水线。
2. 六维评分体系：涵盖基础配置、交互体验、状态处理、无障碍访问、表单输入和生产级打磨，共 59 条规则，每条都附带证据和修复建议。
3. AI Agent 友好：支持
4. 多框架与 Monorepo 支持：自动识别 Next.js App/Pages Router、React Router、TanStack Start、Astro、Vite 等框架，智能区分应用包和库包，避免设计系统被误扣分。
5. GitHub Action 一键集成：提供复合 Action，可自动写评分到 Job Summary、设置分数门槛拦截 CI，还能持续更新跟踪 Issue 并嵌入 Agent 修复指令。
URL：https://www.shadscan.com
标签：#前端 #shadcn/ui #React #UI审计 #CLI工具 #可访问性 #CI/CD #AI_Agent
总结：
Shadscan 是一款面向 React/shadcn 应用的静态 UI 审计 CLI 工具，通过 59 条确定性规则从 Foundation、Interaction、States、Accessibility、Forms 和 Production Polish 六个维度为应用打分（0-100），无需启动应用或调用 AI 即可在终端和 CI 中完成审计。它支持生成 JSON 报告、AI Agent 修复指令（--prompt）和 GitHub Action 集成，适用于 Next.js、React Router、TanStack Start、Astro 等多种框架，并支持 monorepo 多包扫描。
文章要点：
1. 零侵入式审计：无需启动应用、修改文件或调用 AI 模型，纯静态分析即可给出可复现的评分结果，适合嵌入 CI 流水线。
2. 六维评分体系：涵盖基础配置、交互体验、状态处理、无障碍访问、表单输入和生产级打磨，共 59 条规则，每条都附带证据和修复建议。
3. AI Agent 友好：支持
--prompt 生成可直接粘贴给 Claude Code、Codex CLI 等编码 Agent 的修复计划，也支持 --apply 直接唤起本地 Agent 执行。4. 多框架与 Monorepo 支持：自动识别 Next.js App/Pages Router、React Router、TanStack Start、Astro、Vite 等框架，智能区分应用包和库包，避免设计系统被误扣分。
5. GitHub Action 一键集成：提供复合 Action，可自动写评分到 Job Summary、设置分数门槛拦截 CI，还能持续更新跟踪 Issue 并嵌入 Agent 修复指令。
URL：https://www.shadscan.com
shadscan
shadscan: Audit shadcn apps for UI fundamentals
Audit accessibility, UI states, navigation, forms, metadata, and production polish with deterministic evidence and agent-ready fixes.
《Brainless：复刻AI编码助手终端UI的shadcn组件库》
标签：#前端 #shadcn #React #AI终端UI #ClaudeCode #Codex
总结：
Brainless 是一个 shadcn/ui 组件注册表，提供一套可复用的 React 组件，精准还原 Claude Code、OpenAI Codex 和 Grok 等 AI 编码助手的终端风格界面。开发者可通过
文章要点：
1. 精准还原终端风格：组件库完整复刻了 Claude Code、Codex、Grok 等主流 AI 编码助手的终端界面，包括待办列表、计划展示、思考过程等核心 UI 元素
2. 像素级细节还原：从实际终端截图出发，逐帧对比"已发布"与"捕获"版本，修正了行间距、符号对齐、颜色处理等细节差异，确保视觉体验与真实终端一致
3. shadcn 生态原生支持：作为官方注册表组件，可直接通过 shadcn CLI 安装，与现有项目无缝集成，无需额外配置
4. 开源可扩展：代码托管在 GitHub，开发者可自由查看源码、提交改进，甚至基于其设计思路构建自己的 Agent 风格界面
URL：https://brainless.swerdlow.dev/
标签：#前端 #shadcn #React #AI终端UI #ClaudeCode #Codex
总结：
Brainless 是一个 shadcn/ui 组件注册表，提供一套可复用的 React 组件，精准还原 Claude Code、OpenAI Codex 和 Grok 等 AI 编码助手的终端风格界面。开发者可通过
npx shadcn@latest add 一键安装，快速构建具有"Agent 味"的交互界面。文章要点：
1. 精准还原终端风格：组件库完整复刻了 Claude Code、Codex、Grok 等主流 AI 编码助手的终端界面，包括待办列表、计划展示、思考过程等核心 UI 元素
2. 像素级细节还原：从实际终端截图出发，逐帧对比"已发布"与"捕获"版本，修正了行间距、符号对齐、颜色处理等细节差异，确保视觉体验与真实终端一致
3. shadcn 生态原生支持：作为官方注册表组件，可直接通过 shadcn CLI 安装，与现有项目无缝集成，无需额外配置
4. 开源可扩展：代码托管在 GitHub，开发者可自由查看源码、提交改进，甚至基于其设计思路构建自己的 Agent 风格界面
URL：https://brainless.swerdlow.dev/
brainless
Claude Code, Codex, and Grok interfaces as shadcn components.
