schalkneethling/css-console

schalkneethling 资料

最近记录的来源活动: 2026年7月26日 09:26

SkillsMP 收录数据更新: 2026年10月17日 00:09

已收集 skills: 2

GitHub 星标: 1
GitHub Forks: 0

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

# css-console CSS Console is a development-only tool that turns inert, source-local CSS comments into live, element-specific value probes. Annotate a rule, a declaration, or a custom function, load the library in development, and read the authored and browser-resolved values for every matching element in the console you already have open. ```css /* css-console: log inline-size, padding label="cards" */ .card { inline-size: calc(50vw - var(--space)); padding: var(--space); } ``` ```ts import { createCSSConsole, createConsoleAdapter } from "@schalkneethling/css-console"; const cssConsole = createCSSConsole({ sources: "document", maxElements: 50, waitForFonts: false, }); const unsubscribe = cssConsole.subscribe(createConsoleAdapter()); const summary = await cssConsole.scan(); unsubscribe(); cssConsole.dispose(); ``` ## What is here - A **compiler** that reads annotations from CSS source text and turns them into rule, declaration, and function probes, resolving nesting and call sites without evaluating any CSS. - A **browser evaluator** that asks the live engine what each probe resolved to, one element and pseudo-element pair at a time, and never writes to the document. - A **scan lifecycle** with serialized scans, a live event stream, an abort signal, and a summary that carries every record and diagnostic. - A **console adapter** that renders that stream as a collapsed group per probe, with tables at multiplicity, live elements you can inspect, and a handoff to developer tools wherever a value is contested. - A **playground** at `examples/playground/` demonstrating nine cases whose values the source text cannot state. ## Documentation - [docs/usage.md](docs/usage.md) — the annotation grammar, installation, the API and its options, the report, and the limitations. - [docs/capabilities.md](docs/capabilities.md) — what a page-scoped script can and cannot observe about computed CSS, and what only an engine could offer. - [docs/diagnostics.md](docs/diagnostics.md) — every diagnostic code, what it means, and what to do about it. - [docs/decisions/](docs/decisions/) — the decision records behind the design. - [plans/implementation.md](plans/implementation.md) — the full design contract. ## Development This project uses [Vite+](https://viteplus.dev) and pnpm. - Install dependencies: `vp install` - Run the unit tests: `vp test` - Format, lint, and type check: `vp check` - Fix formatting and lint: `vp check --fix` - Inspect annotations in a stylesheet: `vp run inspect:annotations -- path/to/file.css` - Build the library: `vp pack` ## License [MIT](LICENSE)

正在加载仓库 README…

这个仓库中的 skills

软件开发工程师

1 个职业分类 · 已分类 100%

skill

职业分类

描述

更新

dependabot-config

软件开发工程师

Generate or update Dependabot configuration files for projects. Use this skill whenever the user asks to add, create, update, configure, or fix Dependabot for a project — including phrases like "set up Dependabot", "add Dependabot config", "update my…

原文语言：英语

2026-07-26

npm-trusted-publishing-github-workflow

软件开发工程师

Generate, repair, or debug the GitHub Actions workflow FILE that performs an OIDC trusted publish of a pnpm package — the concrete publish.yml, its test → build → publish job shape, the package tarball artifact handoff, Node-version inference from…

原文语言：英语

2026-07-26

已展示 2 / 2 个已收集 Skill。

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/schalkneethling/css-console.