Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/689https://channel.meo-ai.com/posts/689Mon, 03 Aug 2026 00:52:47 GMT<span class="post-title-source">《Shadscan：</span><mark class="highlight"><span class="post-title-source">shadcn</span></mark><span class="post-title-source"> 应用的确定性 UI 审计工具》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23shadcn" title="#shadcn">#shadcn</a>/ui <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23UI%E5%AE%A1%E8%AE%A1" title="#UI审计">#UI审计</a> <a href="/search/result?q=%23CLI%E5%B7%A5%E5%85%B7" title="#CLI工具">#CLI工具</a> <a href="/search/result?q=%23%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7" title="#可访问性">#可访问性</a> <a href="/search/result?q=%23CI" title="#CI">#CI</a>/CD <a href="/search/result?q=%23AI_Agent" title="#AI_Agent">#AI_Agent</a><br /><br />总结：<br />Shadscan 是一款面向 React/<mark class="highlight">shadcn</mark> 应用的静态 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 多包扫描。<br /><br />文章要点：<br />1. 零侵入式审计：无需启动应用、修改文件或调用 AI 模型，纯静态分析即可给出可复现的评分结果，适合嵌入 CI 流水线。<br />2. 六维评分体系：涵盖基础配置、交互体验、状态处理、无障碍访问、表单输入和生产级打磨，共 59 条规则，每条都附带证据和修复建议。<br />3. AI Agent 友好：支持 <code>--prompt</code> 生成可直接粘贴给 Claude Code、Codex CLI 等编码 Agent 的修复计划，也支持 <code>--apply</code> 直接唤起本地 Agent 执行。<br />4. 多框架与 Monorepo 支持：自动识别 Next.js App/Pages Router、React Router、TanStack Start、Astro、Vite 等框架，智能区分应用包和库包，避免设计系统被误扣分。<br />5. GitHub Action 一键集成：提供复合 Action，可自动写评分到 Job Summary、设置分数门槛拦截 CI，还能持续更新跟踪 Issue 并嵌入 Agent 修复指令。<br /><br />URL：<a href="https://www.shadscan.com/" target="_blank" rel="noopener" title="https://www.shadscan.com">https://www.shadscan.com</a><a class="tgme_widget_message_link_preview" href="https://shadscan.com/" target="_blank" rel="noopener" title="Audit accessibility, UI states, navigation, forms, metadata, and production polish with deterministic evidence and agent-ready fixes."> <div class="link_preview_site_name accent_color">shadscan</div> <img class="link_preview_image" alt="shadscan: Audit shadcn apps for UI fundamentals" src="/static/https://cdn4.telesco.pe/file/s3X0dADj_OhS1wkvvAJmaESI7LkBcJuQ7MeOH91FcBH_EvHzkLkYqoW6TszLu_CC73dCDHRKjOTu_gh-GjModLA6WnjiXzH6PpJJvmarWiRtiyWnSPzknNMBwbxtaB3DHBJ4-PushbJk3JKm-dbHfEfg42O-xK2U3QOfEQRZOUxwxDF66oMMk86lpgLIZwQjd8BP7ygVCIb53B5o1t-CeezevGbhf8pCOg7pfjsgcGOHGsPI9YYimmN3KZWnA4n_hgFNEb-BcbFLiKYWWu1Y5LokicKqZzUUpQWL7ymzKhd7RINZ4FPY2Pysr2n2LJrKNpNqs4m8iNvdx11q7ZsxtA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">shadscan: Audit <mark class="highlight">shadcn</mark> apps for UI fundamentals</div> <div class="link_preview_description">Audit accessibility, UI states, navigation, forms, metadata, and production polish with deterministic evidence and agent-ready fixes.</div> </a>https://channel.meo-ai.com/posts/681https://channel.meo-ai.com/posts/681Sun, 19 Jul 2026 14:13:17 GMT<span class="post-title-source">《Brainless：复刻AI编码助手终端UI的shadcn组件库》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23shadcn" title="#shadcn">#shadcn</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23AI%E7%BB%88%E7%AB%AFUI" title="#AI终端UI">#AI终端UI</a> <a href="/search/result?q=%23ClaudeCode" title="#ClaudeCode">#ClaudeCode</a> <a href="/search/result?q=%23Codex" title="#Codex">#Codex</a><br /><br />总结：<br />Brainless 是一个 <mark class="highlight">shadcn</mark>/ui 组件注册表，提供一套可复用的 React 组件，精准还原 Claude Code、OpenAI Codex 和 Grok 等 AI 编码助手的终端风格界面。开发者可通过 <code>npx <mark class="highlight">shadcn</mark>@latest add</code> 一键安装，快速构建具有"Agent 味"的交互界面。<br /><br />文章要点：<br />1. 精准还原终端风格：组件库完整复刻了 Claude Code、Codex、Grok 等主流 AI 编码助手的终端界面，包括待办列表、计划展示、思考过程等核心 UI 元素<br />2. 像素级细节还原：从实际终端截图出发，逐帧对比"已发布"与"捕获"版本，修正了行间距、符号对齐、颜色处理等细节差异，确保视觉体验与真实终端一致<br />3. <mark class="highlight">shadcn</mark> 生态原生支持：作为官方注册表组件，可直接通过 <mark class="highlight">shadcn</mark> CLI 安装，与现有项目无缝集成，无需额外配置<br />4. 开源可扩展：代码托管在 GitHub，开发者可自由查看源码、提交改进，甚至基于其设计思路构建自己的 Agent 风格界面<br /><br />URL：<a href="https://brainless.swerdlow.dev/" target="_blank" rel="noopener" title="https://brainless.swerdlow.dev/">https://brainless.swerdlow.dev/</a><a class="tgme_widget_message_link_preview" href="https://brainless.swerdlow.dev/" target="_blank" rel="noopener" title="Claude Code, Codex, and Grok interfaces as shadcn components."> <div class="link_preview_site_name accent_color">brainless</div> <img class="link_preview_image" alt="brainless" src="/static/https://cdn4.telesco.pe/file/HK14x62iOHCcqEYnMd_DNKi7tYf0NIbUi5dSBdZqfDYd7nQnQBKQot0AKNnSsrreswrjpm0ob5eokCsKWEbY0_e3ipf3PXdObM-vmXJcV4Q6cmlEuDo83_cjY8F1utKHLpb92JXTQRvFt6wFbrSm_b_J2b9PA8ApTUo2RuLpAuOAh9b0a-LwJH3XVNqEti5rjdU4WnpGkVfgnUfeFzVS78TZSKqx-iK11je2NY_GbWe_hYsbBzUgOUfuvkk_RhCeCTbr4H6Hp8k1IGWGECnGjPOsGEEGcNKctRqcwdATdEJhol6uTWKWyLe8S1o746LPXQ7SFRdHxKOgcJhyZA3FaQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_description">Claude Code, Codex, and Grok interfaces as <mark class="highlight">shadcn</mark> components.</div> </a>https://channel.meo-ai.com/posts/679https://channel.meo-ai.com/posts/679Sun, 19 Jul 2026 14:08:25 GMT<span class="post-title-source">《</span><mark class="highlight"><span class="post-title-source">shadcn</span></mark><span class="post-title-source">/typeset 发布：为HTML内容打造统一排版系统》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23shadcn" title="#shadcn">#shadcn</a> <a href="/search/result?q=%23CSS%E6%8E%92%E7%89%88" title="#CSS排版">#CSS排版</a> <a href="/search/result?q=%23Markdown%E6%B8%B2%E6%9F%93" title="#Markdown渲染">#Markdown渲染</a> <a href="/search/result?q=%23%E6%B5%81%E5%BC%8F%E5%86%85%E5%AE%B9" title="#流式内容">#流式内容</a><br /><br />总结：<br /><mark class="highlight">shadcn</mark>/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个 <code>typeset</code> 类，即可为博客、文档、聊天流等场景提供统一且可灵活调节的文本样式，专为流式输出场景优化。<br /><br />文章要点：<br />1. 开箱即用：只需在容器上添加 <code>typeset</code> 类，内部所有 HTML 元素（标题、段落、列表、表格、代码块等）自动获得优雅排版<br />2. 三旋钮控制：通过 <code>--typeset-size</code>（字号）、<code>--typeset-leading</code>（行高）、<code>--typeset-flow</code>（间距）三个 CSS 变量，轻松为不同场景（聊天、文档、博客）定制专属节奏<br />3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景<br />4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"<br /><br />URL：<a href="https://ui.shadcn.com/docs/changelog/2026-07-typeset" target="_blank" rel="noopener" title="https://ui.shadcn.com/docs/changelog/2026-07-typeset">https://ui.shadcn.com/docs/changelog/2026-07-typeset</a><a class="tgme_widget_message_link_preview" href="https://ui.shadcn.com/docs/changelog/2026-07-typeset" target="_blank" rel="noopener" title="A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own."> <div class="link_preview_site_name accent_color">Shadcn</div> <img class="link_preview_image" alt="July 2026 - Introducing shadcn/typeset" src="/static/https://cdn4.telesco.pe/file/P3vpd47EB-LfgY7nz8oty8yeu0zqOTJIPYScgmHMUBLtXJyqXQMChAUbcBeXvGnSWfZ5qHCm0cMQ3W-5nM0h_Gt8kVoNVWopDO9XUNW_RYIF1Cg_H_nYt0Sz26qseWNZJ8VoycwR0DpZXjHWcSzQBHTg-Yqz723iZ34FVoXla7Xq6Ztr-TXhgq31SPkSf0Wkr5y7omcm265hrj1jUBL4xPq94gCoJMUO-DS0pt-rEdD9lKA7BPI5jhvKciicSvYoeDcqYwi1dy_1er0cUDmh8wBvChyyivPOIR6puWyDw69VOkpfM4W0UrPhVPoQIR55ykctK8FV9U4xXM0qBcwCRw.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">July 2026 - Introducing <mark class="highlight">shadcn</mark>/typeset</div> <div class="link_preview_description">A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.</div> </a>