AI 摘要：localspace 是一个旨在替代 localForage 的现代化存储工具包。它在完全兼容 localForage API 的基础上，利用现代 TypeScript 和异步架构重写，解决了原版在类型定义、IndexedDB 性能瓶颈、以及多平台（Node.js、React Native、Electron）一致性上的长期痛点。其核心亮点包括：支持将高频写入合并为单次事务的合并写入（Coalesced Writes）技术，可提升 3-10 倍性能；内置了强大的插件系统，提供 TTL（Time-to-Live）过期、透明加密、数据压缩、多标签页同步及配额管理（LRU 淘汰）等高级功能；同时保留了极简的 API，方便开发者从旧项目无缝迁移。

GitHub

GitHub - unadlib/localspace: A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API

A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API - unadlib/localspace

AI 摘要：该项目解决了前端开发中需要手动维护两套代码（业务组件与骨架屏组件）的痛点。通过在运行时（Runtime）分析真实组件的 DOM 结构，shimmer-from-structure 能够自动测量元素尺寸、获取 CSS 圆角属性，并生成与之完美契合的扫光动画效果。它支持动态数据注入、全局配置（Context API）、以及与 React Suspense 的无缝集成，极大地降低了 UI 加载态的维护成本。

1. 核心价值与功能特性
• 自动适配结构：无需预定义骨架屏，运行时自动分析组件 DOM。
• 零维护成本：组件布局改变时，骨架屏自动更新，无需手动同步。
• 像素级精确：通过测量实际元素尺寸生成占位块。
• 样式自动提取：自动检测 CSS 中的 border-radius（圆角），确保头像等圆形元素正确显示。
• 感知优化：加载时保留容器背景色和边框，仅对文本和图片内容进行遮盖。

2. 使用模式与 API
• 静态内容包裹：简单的组件直接使用 <Shimmer loading={true}> 包裹即可。
• 动态数据支持：通过 templateProps 属性注入模拟数据，使组件在无真实数据时也能撑开正确的布局结构。
• Suspense 集成：可直接作为 Suspense 的 fallback，利用 React 的生命周期自动处理挂载与卸载。
• 全局配置：提供 ShimmerProvider，允许在应用顶层统一配置扫光颜色、背景色及动画时长等

3. 技术实现原理
• DOM 测量：利用 useLayoutEffect 同步测量所有叶子元素的 getBoundingClientRect()。
• 属性捕获：通过原生 API 获取计算后的 CSS 样式，确保骨架块与原元素形状一致。
• 动画注入：基于测量数据创建绝对定位的扫光层，并应用线性渐变动画。
• 透明处理：加载状态下将真实内容的 color 设为 transparent，从而隐藏文字但保留容器布局。

4. 最佳实践与局限性
• 细粒度控制：建议为不同的业务模块分别包裹 Shimmer，以实现独立的加载状态。
• 性能建议：尽量保持 templateProps 简单，避免在测量阶段进行复杂逻辑运算。
• 已知限制：无法深入捕获 SVG 内部的路径形状；对于异步渲染（如某些 Canvas 图表）需要显式指定容器高度。

GitHub

GitHub - darula-hpp/shimmer-from-structure: Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component…

Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy. - darula-hpp/shimmer-from-structure

npx skills add remotion-dev/skills

Source
Removal 现在拥有了 Agent Skills——只需使用 Claude Code 即可制作视频！

Gist

Claude Code Session

Claude Code Session. GitHub Gist: instantly share code, notes, and snippets.

npx skills add <owner/repo>

1. 前端开发与主流框架最佳实践 (Frontend Development & Frameworks)
• Vercel & React 体系：包含 Vercel 官方推荐的 React 最佳实践和网页设计指南，是目前安装量最高的技能。
• Expo & React Native：涵盖了 Expo 框架的升级、UI 构建、数据获取、CI/CD 流程以及原生 UI 开发等全方位技能。
• Vue & Nuxt 生态：提供了 Nuxt 模块开发、Nuxt UI 使用、Motion 动画库集成以及针对 Vue 的专项支持。
• 3D 与可视化：如 Three.js 的动画、材质、着色器 (Shaders) 和光照等进阶开发技能。

2. AI 智能体元能力与 MCP 集成 (AI Agent Meta-skills & MCP)
• 技能创建工具：Anthropic 提供的 skill-creator 和 mcp-builder（模型上下文协议构建器），帮助开发者快速为 AI 编写新技能。
• 智能体架构：包括子智能体驱动开发 (Subagent-driven development)、并行智能体分发 (Dispatching parallel agents) 以及智能体开发框架。
• 平台集成：如 OpenRouter TypeScript SDK 集成、Stripe 最佳实践、Slack GIF 创建器等。

3. 安全、测试与底层审计 (Security, Testing & Code Audit)
• 漏洞扫描：由 Trail of Bits 提供的各类区块链（Solana, Substrate, TON, Cairo）漏洞扫描器。
• 模糊测试 (Fuzzing)：集成了 libFuzzer、AFL++、OSS-Fuzz 和 Atheris 等多种自动化测试工具。
• 代码质量保障：包含系统化调试 (Systematic debugging)、测试驱动开发 (TDD)、代码复查 (Code Review) 和代码成熟度评估。

4. 市场行销、内容创作与生产力 (Marketing, Content & Productivity)
• 营销自动化：涵盖 SEO 审计、文案编辑 (Copywriting)、定价策略、营销心理学以及落地页转化率优化 (CRO)。
• 多媒体与社交媒体：针对小红书 (XHS)、X (Twitter) 的图片和帖子生成工具，以及漫画、信息图表 (Infographic) 的创作技能。
• 办公文档处理：支持对 PDF、XLSX、DOCX、PPTX 等复杂文件格式的深度解析与处理。
• 知识管理：针对 Obsidian 的 Markdown 增强、JSON Canvas 以及基础库配置。

5. 开发者工具与自动化 (DevTools & Automation)
• Git 与工作流：如使用 Git Worktrees、处理开发分支、自动生成变更日志 (Changelog) 等。
• 认证与后端：Better Auth 的最佳实践及其在不同框架（如 Nuxt）中的集成。
• 数据库与云服务：Convex 框架的各种功能实现，如实时数据、函数调用、模式验证器 (Schema validator) 等。

Skills

The Agent Skills Directory

Discover and install skills for AI agents.

Zola Chat 和 prompt-kit 作者 @Ibelick 沉淀了他使用 Tailwind + shadcn-ui 生态（Base UI）+ framer-motion 进行 AI 编程时的 Skill , 用来约束 AI 过度设计和给出明确的设计方向。

或许每个项目都应该又一个类似的 UI Skill 来约束项目的设计风格，我准备给项目也加一下

AI 摘要：Dither Image Online 是一个免费的在线工具，旨在帮助用户轻松地将普通图像转换为具有复古和像素艺术风格的抖动（dithered）图像。该工具强调其快速、实时和本地处理的特性，确保用户隐私安全。它提供了多种抖动算法，如 Bayer、Crosshatch、Halftone 和 Contour，并允许用户调整参数以获得所需效果，无需上传图片到服务器，也无需复杂的 Photoshop 操作。

AI 摘要：DiceBear 是一个功能强大的头像库，旨在帮助设计师和开发者快速为项目创建多样化的头像。它提供了从抽象形状到精心设计的人物角色等多种头像风格。用户不仅可以生成随机头像，还可以通过设定 seed 实现确定性头像生成，或利用丰富的定制选项创建个性化头像。DiceBear 通过 JavaScript 库、HTTP API、命令行工具 (CLI)、Figma 插件和在线 Playground 等多种方式，为用户提供了灵活便捷的头像生成方案。

1. DiceBear 项目概览
• 项目定位：专为设计师和开发者打造的头像库。
• 核心优势：快速为项目创建精美头像，提供多样化的选择。
• 头像风格：涵盖抽象形状和精心设计的人物角色。
2. 头像生成功能与特性
• 随机生成：支持生成纯粹随机的头像。
• 确定性生成：通过内置的伪随机数生成器 (PRNG) 和 seed 值，确保基于特定种子重复生成相同的头像，适用于用户身份标识。
• 高度可定制：每个头像风格都提供无数选项，允许用户创建个性化头像。
3. 多平台集成与便捷工具
• JavaScript 库：提供便捷的 JavaScript 客户端集成。
• HTTP API：支持通过 HTTP 请求生成头像。
• 命令行工具 (CLI)：方便在命令行环境中使用。
• Figma 插件：直接在 Figma 设计工具中使用。
• 在线 Playground：提供交互式平台进行头像预览和配置。

Aiden Bai(aidenybai): 介绍 repogrep.com 对任何公共 GitHub 仓库进行超快速代码库搜索
我在不到 10 秒内找到了 React Hooks 的源代码。
https://x.com/aidenybai/status/2008222085240549530

AI 摘要：Repogrep 是一款创新的 AI 编码代理，专为解决在海量代码库中快速搜索的痛点而设计。它能够搜索任何公共 GitHub 仓库，用户只需粘贴 GitHub 仓库 URL 或输入关键词，即可实现超快的代码查找。

SkyWT(@skywt2003): 求教，那些看起来很漂亮的渐变背景都是怎么做出来的？
为什么我随便画几个几何图形叠加模糊，就没那么好看

Huazi(@HeyHuazi): 用现成的😂 来一些周刊提到过的
https://grainient.supply
https://patterncraft.fun
https://fffuel.co
https://uvcanvas.com/docs/components

Corey Chiu(@realcoreychiu): http://gradientshub.com 直接抄

grainient.supply

1000+ Gradients and AI-Generated Backgrounds

Grainient offers 1000+ awesome gradients, noisy textured, and AI-generated backgrounds. Subscribe for unlimited downloads and elevate your designs with our premium collection.

一个 Raycast 扩展，可以直接从本地计算机搜索 CSS-Tricks 文章。该扩展使用 WordPress REST API 获取实时搜索结果，提供了一种快速查找和复制文章 URL 的方法。单击结果会显示摘要并在浏览器中打开文章。

Raycast

Raycast Store: CSS Tricks

Search on CSS Tricks

AI 摘要：本文介绍了 Dan Abramov 发布的新工具 RSC Explorer，旨在帮助开发者直观理解 React Server Components (RSC) 的底层工作原理。由于最近 React Server Components 披露了一个严重的安全漏洞，RSC 协议引起了广泛关注。RSC Explorer 是一个开源的单页应用，通过模拟 RSC 协议的读写过程，展示了数据流、代码传输、流式渲染、服务器操作以及无框架路由刷新等核心概念，让开发者能够“所见即所得”地学习 RSC。

GitHub

GitHub - gaearon/rscexplorer: A tool for people curious about the React Server Components protocol

A tool for people curious about the React Server Components protocol - gaearon/rscexplorer

AI 摘要：这篇博文介绍了 Andy Clarke 开发的一款有趣的卡通标题文本生成器，它可以生成具有卡通风格的文本，并提供 CSS 代码。文章还重点介绍了其核心功能 Splinter.js，它通过包裹每个字符的 <span> 标签，并加入 ARIA 属性，在实现逐字样式控制的同时，增强了可访问性，解决了传统工具可能导致辅助技术识别障碍的问题。

AI 摘要：Simon Willison 在这篇文章中总结了构建 HTML 工具的核心模式：保持单文件、避免 React、使用 CDN 加载依赖、利用复制粘贴、调试工具、URL 与 localStorage 持久化、收集 CORS API、直接调用 LLM、文件操作、可下载文件、Pyodide 与 WebAssembly、复用已有工具以及记录开发过程。通过这些模式，作者在两年内用 LLM 生成了 150+ 个实用工具，并提供了大量示例与源码链接。

AI 摘要：ColorMate 是一款面向设计师与开发者的免费在线配色工具，可快速生成符合无障碍标准（Accessibility）的调色板。用户可提取图片配色、即时预览 UI 效果、进行对比度测试（Contrast Checker），并将结果以 HEX、CSS 或 PNG 格式导出。它还提供由 AI 命名、锁定颜色及实时生成新方案的功能，并收录多种热门配色示例。

AI 摘要：Harmonizer 是 Evil Martians 推出的色彩工具，可在 Figma 插件或 Web 界面中使用，利用 OKLCH 与 APCA 生成具一致亮度与对比度的配色方案。该工具通过定义光度等级、色相与背景上下文，自动生成可在浅色与深色模式中保持视觉一致的色彩体系。支持导出多种开发格式（Tailwind、CSS 变量、JSON）

1. 工具介绍与设计初衷
• Harmonizer 旨在解决现有设计系统中颜色等级不一致、对比度难以统一、浅色/深色模式映射不对称等问题。
• 利用感知一致的亮度（lightness）与对比（contrast），确保 UI 元素间的视觉可靠性与可访问性。

2. 工作原理
• 继承 Figma 文档的色域设置（P3 或 sRGB）。
• 用户可定义色阶（如 100–900）及相应光度步进。
• 支持设定对比度计算方向（前景/背景）及背景上下文（白、黑或自定义）。
• 一键生成 Palette，自动产生色彩预览与变量。

3. 核心特性
• 可调色彩配置文件（P3 或 sRGB）。
• 基于 OKLCH 实现感知一致的色度 (chroma)。
• 使用 APCA 或 WCAG 对比计算公式，提升屏幕可读性。
• 支持自定义背景颜色、自动识别现有调色板、自动更新样式变量。
• 提供可共享的设定文件（Config）与开发导出（Tailwind、CSS、JSON）。

4. 技术背景与实现细节
• 使用 PNPM 管理 monorepo，包含 core、web、figma-plugin 三个子包。
• 主要命令包括安装依赖、构建、预览、格式化及类型检查。
• 借助 Spred 响应式库与 React 实现状态管理。
• 色彩计算逻辑在 Web Worker 中执行，避免阻塞主线程。
• 通过 CSS 变量动态控制外观，实现全局响应式配色。

5. 设计理论与算法基础
• OKLCH：提供感知上平衡的亮度与色度模型。
• APCA：面向自发光显示器的现代对比度算法。
• APCACH：自定义计算器，将上述两种算法融合以生成高度可访问的色彩。

GitHub

GitHub - evilmartians/harmonizer

Contribute to evilmartians/harmonizer development by creating an account on GitHub.

AI 摘要：此浏览器扩展程序是一个灵活的新标签页助手，受到谷歌“Material You”设计的启发，用户可根据自身需求进行主题定制、欢迎信息及多种实用工具的配置，同时与用户喜欢的搜索引擎无缝集成。

GitHub

GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home page) inspired with Google's 'Material You' design

A Simple New Tab (browser's home page) inspired with Google's 'Material You' design - GitHub - prem-k-r/MaterialYouNewTab: A Simple New Tab (browser's home ...