open-index/open-npm huggingface dataset:
npm package: @style-capture/core
Description: Shared capture mapping and Claude export helpers for Style Capture
Latest version: 1.2.0

<h3 align="center">@style-capture/core</h3>
<p align="center">Tailwind mapping, capture contracts, and Claude-ready serializers extracted from Style Capture.</p>

## Highlights

- Shared capture types and message contracts for Style Capture tooling
- Tailwind utility mapping with confidence, unsupported-property, and review metadata
- Compact Claude-friendly HTML and CSS serializers for captured DOM snapshots

## Quick Start

```bash
npm install @style-capture/core
```

```tsx
import {
  createDefaultSettings,
  formatCaptureForClaudeMarkdown,
  mapCaptureToTailwind,
  type CaptureResult,
} from "@style-capture/core";

const capture: CaptureResult = {
  elements: {
    "node-0": {
      attributes: {},
      boundingBox: {
        bottom: 48,
        height: 48,
        left: 0,
        right: 160,
        top: 0,
        width: 160,
        x: 0,
        y: 0,
      },
      children: [],
      classList: [],
      id: "node-0",
      parentId: null,
      pseudo: {},
      selector: ".hero-card",
      styles: {
        "background-color": "rgb(255, 255, 255)",
        display: "flex",
        "justify-content": "space-between",
        padding: "16px",
      },
      tagName: "div",
    },
  },
  metadata: {
    url: "https://example.com/card",
  },
  order: ["node-0"],
  rootElementId: "node-0",
  rootOuterHtml: '<div class="hero-card">Hello</div>',
  settings: createDefaultSettings(),
  summary: {
    elementCount: 1,
    pseudoElementCount: 0,
  },
  version: 1,
};

const mapping = mapCaptureToTailwind(capture);
const prompt = formatCaptureForClaudeMarkdown(capture, mapping);

console.log(mapping.elements["node-0"]?.suggestedClassName);
console.log(prompt);
```

## Usage

```tsx
import {
  buildClaudeCapturePrompt,
  createDefaultSettings,
  mapCaptureToTailwind,
} from "@style-capture/core";

const settings = createDefaultSettings();
const mapping = mapCaptureToTailwind(capture);
const prompt = buildClaudeCapturePrompt(capture, mapping);
```

Public exports:

- `createDefaultSettings`
- `mapCaptureToTailwind`
- `buildClaudeCapturePrompt`
- `formatCaptureForClaudeMarkdown`
- Capture result, mapping, and message types from the package root

Requires a runtime with standard DOM globals if you want annotated HTML output. When `DOMParser` is unavailable, the serializer falls back to compact raw HTML and selector-based CSS output.

## License

[MIT](LICENSE.md)
npm package: @style-class/preset-tailwind
Description: style-class插件的 Tailwind CSS 的紧凑预设
Author: xiaosi
Latest version: 1.0.0

# style-class插件使用文档

## 简介

style-class 的 tailwind 预设，tailwind V3 版本。

---



## 📦 安装

```bash
npm install @style-class/preset-tailwind -D
```

---



## ⚙️ 配置选项

theme 主题

rules 规则

keyframes 动画

selectorVariants 选择器变体

```javascript
import { theme, rules, keyframes, selectorVariants } from '@style-class/preset-tailwind'
```

---



## 📚 更多资源

- 🔗 [GitHub 仓库](https://github.com/chen-xiaosi/style-class)
- 💬 [社区讨论](https://github.com/chen-xiaosi/style-class/discussions)
- 🐛 [问题反馈](https://github.com/chen-xiaosi/style-class/issues)

---

## 📄 许可证

MIT License
npm package: @style-hooks/babel-preset-es
Description: A babel preset for configuring ECMAScript-next features style hooks packages.
Latest version: 1.0.3

# @style-hooks/babel-preset-es
A babel preset for configuring ECMAScript-next features style hooks
packages.

## Installation
`yarn add --dev @style-hooks/babel-preset-es`

## Usage
### `.babelrc`
```json
{
  "presets": [
    [
      "@style-hooks/es", {
        "env": {
          "modules": false
        }
      }
    ]
  ]
}
```
## Included presets
- `@babel/preset-env`

## Included plugins
- `@babel/plugin-transform-runtime`
- `@babel/plugin-proposal-class-properties`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-proposal-export-namespace-from`
- `@babel/plugin-proposal-logical-assignment-operators`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-transform-object-assign`
- `@babel/plugin-proposal-object-rest-spread`
- `@babel/plugin-proposal-optional-chaining`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-syntax-import-meta`
- `babel-plugin-closure-elimination`
- `babel-plugin-dev-expression`

## Options
### `env`
- *default* `{loose: true}`
- Define `false` to turn off `@babel/preset-env`

### `runtime`
- *default* `{}`
- Define `false` to turn off `@babel/plugin-transform-runtime`

### `classProps`
- *default* `{loose: true}`

### `macros`
- Define `false` to turn off `babel-plugin-macros`
npm package: @style-hooks/styled
Description: ⚡️Supercharge your styled components with Style Hooks and themes
Author: Jared Lunde
Latest version: 2.0.1

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/@style-hooks/styled?style=plastic)](https://bundlephobia.com/result?p=@style-hooks/styled)
[![codecov](https://codecov.io/gh/style-hooks/styled/branch/master/graph/badge.svg)](https://codecov.io/gh/style-hooks/styled)
[![Build Status](https://travis-ci.org/style-hooks/styled.svg?branch=master)](https://travis-ci.org/style-hooks/styled)
[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://jaredlunde.mit-license.org/)

---

<p align=center>
  <br/>
  <img src='https://raw.githubusercontent.com/style-hooks/docs/master/assets/logo%402x.png' width='320'/>
</p>

<h2 align=center>Supercharge your styled components with style hooks and themes</h2>

```jsx harmony
import React from 'react'
import {css} from '@emotion/core'
import {createStyleHook} from '@style-hooks/core'
import styled from '@style-hooks/styled'

// Can be used like any other styled component system
let DivA = styled.div`
  margin: 0;
`

// The magic happens when you add @style-hooks/core
// to the mix
let useBox = createStyleHook('box', {
  m: (value, theme, props) =>
    css`
      margin: ${value}rem;
    `,
})
let useText = createStyleHook('text', {
  size: (value, theme, props) =>
    css`
      font-size: ${value}rem;
    `,
})

// Styled components composed with style hooks
// <DivAWithBoxAndText size='1' m='2'/>
let DivAWithBoxAndText = DivA.compose(
  useText,
  useBox
)

// Styled components with functions in template literals
// <DivB color='red'/>
let DivB = styled.div`
  color: ${(theme, props) => theme.colors[props.color]};
`

// Another way to compose style hooks with styled components
let DivC = styled.div(`margin: 0;`, [useBox])

// Flexible inputs, you can use strings, objects,
// and functions with props/themes
let DivD = styled.div(`margin: 0;`)
let DivE = styled.div({margin: 0})
let DivF = styled.div((theme, props) => `margin: 0;`, [useBox])
let DivG = styled.div((theme, props) => ({margin: 0}))

// And you can always create additional components
// with extra style hooks
let DivH = DivG.compose(useBox)
```

## Installation

#### `npm i @style-hooks/styled @style-hooks/core @emotion/core`

#### `yarn add @style-hooks/styled @style-hooks/core @emotion/core`

## Peer dependencies

- `@emotion/core`
- `@style-hooks/core`

## Playground

Check out
[`@style-hooks/styled` on CodeSandbox](https://codesandbox.io/s/style-hooksstyled-basic-example-y9x6s)

## [API Documentation](https://style-hooks.jaredlunde.com/styled-components/)

Complete documentation can be found
[here](https://style-hooks.jaredlunde.com/styled-components/)

## LICENSE

MIT
npm package: @style-hooks/system
Description: A library for creating design systems with @style-hooks/core
Author: Jared Lunde
Latest version: 1.0.9

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/@style-hooks/system?style=plastic)](https://bundlephobia.com/result?p=@style-hooks/system)
[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://jaredlunde.mit-license.org/)

---

# system

A library for creating design systems with style-hooks

## Installation

#### `npm i system`

#### `yarn add system`

## LICENSE

MIT
npm package: @style-kit-n/core
Description: This packages includes the underlying abstractions for creating components using `styled-kit-n` that are shared across environments.
Author: Neal Williams
Latest version: 0.23.0

# @style-kit-n/core
This packages includes the underlying abstractions for creating components using `styled-kit-n` that are shared across
environments.

This package exports the following abstractions and types:

## `createStyled`
A function that can be used to create the relevant `styled` function for each environment and implementation.

## `StyleEngine`
A Typescript interface to encapsulate the differences between environments and implementations. This interface exposes
the following methods:
- `generateStyles`: maps style props to direct HTML style
- `generateClasses`: maps style props to HTML class names (eg. for use with Tailwind)
- `resolveClassConflicts`: method to resolve conflicting class names due to inheritance
- `getBaseProps`: method to get the base props supported by components created by `styled` (eg. `HTML` attributes)
- `getMediaWidth`: environment-specific method to get media length
- `listenForResize`: environment-specific listener to respond to media changes
  `cleanupResizeListener`: cleanup method for above listener

## `baseTheme`, `BaseTheme`
A default theme (and corresponding type) with values that are reused across environments.

## `StyleKitNProvider`
A generic context provider used to create environment-specific packages