schalkneethling/css-console

schalkneethling 프로필

최근 기록된 소스 활동: 2026년 7월 26일 09:26

SkillsMP 카탈로그 업데이트: 2026년 10월 17일 00:09

수집된 skills: 2

GitHub 스타: 1
GitHub 포크: 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

수집된 skill 2개 중 2개를 표시합니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

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