open-index/open-npm huggingface dataset:
npm package: @studioraz/cypress-magento
Description: Cypress client for Magento 2
Author: Studioraz
Latest version: 0.0.3

# Studioraz Cypress Plugin

#### Cypress env property
You can also configure Cypress using [cypress.config.ts](../cypress.config.ts) (create from [cypress.config.ts.sample](../cypress.config.ts.sample)

```typescript
import {defineConfig} from 'cypress'

export default defineConfig({
  defaultCommandTimeout: 30000,
  responseTimeout: 30000,
  requestTimeout: 30000,
  env: {
    MAGENTO_ADMIN_USERNAME: 'denistrator',
    MAGENTO_ADMIN_PASSWORD: '!StudioRaz2020#',
    MAGENTO_BASE_PATH: 'https://hyva.mystore.today/',
  },
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      // @ts-ignore
      return require('./cypress/plugins/index.js')(on, config)
    },
    // these examples require no test isolation
    testIsolation: false
  },
})
```
npm package: @studiosolid/shopware-mcp
Description: A local Model Context Protocol (MCP) server for Shopware plugin development
Author: Thomas Diroll
Latest version: 1.2.0

# Shopware MCP

A local Model Context Protocol (MCP) server for Shopware plugin development. This project aims to automate bugfixing for Shopware plugins as much as possible by considering support tickets, affected Shopware versions, and affected plugin versions using LLMs in your IDE. 

## Tools

- ✅ "start-plugin-fix": Detailed instructions on how to approach fixing a bug in a Shopware plugin
- ✅ "get-support-ticket": Support ticket information retrieval (Sensitive data and customer information are stored in dedicated properties, which are **not passed to the LLM**. However, if a customer includes sensitive data directly in the ticket content, it will be.)
- ✅ "check-environment" and "setup-environment": Environment setup based on support ticket information (cloning of Shopware and plugin repo in affected versions)
- 👷‍♂️ Planned: Check code, run existing tests and interact with the browser via MCP to fix bugs

Note: I'm new to MCP development. I'm open to any suggestions and tips!

## Connect to server

Currently you will have to work with a project specific MCP configuration. Right now this is the only way to be able to provide path information about the project to the MCP server on a per project basis.

Create `.cursor/mcp.json` (in case you are using Cursor) in your desired project location with the following content:

```
{
  "mcpServers": {
    "shopware-mcp": {
      "command": "npx",
      "args": ["-y", "@studiosolid/shopware-mcp"],
      "env": {
        "SHOPWARE_ACCOUNT_EMAIL": "YOUR_SHOPWARE_ACCOUNT_EMAIL",
        "SHOPWARE_ACCOUNT_PASSWORD": "YOUR_SHOPWARE_ACCOUNT_PASSWORD"
        "PROJECT_DIRECTORY": "/absolute/path/to/project"
      }
    }
  }
}
```

Check it's connecting successfully. Then you can prompt something like:

```
Use "start-plugin-fix" to stat fixing the plugin affected by support ticket ABCDE-123456.
```

or also simply

```
Can you show me info about ABCDE-123456?
```
npm package: @studiosunnyfield/pimagotchi
Description: Pimagotchi — tamagotchi virtual pet for pi coding agent. 18 animated species, behavior-based evolution, rarity system, and more.
Author: Studio Sunnyfield
Latest version: 1.1.3

# 🐾 Pimagotchi

Pimagotchi (π + たまごっち) — a tamagotchi virtual pet for [pi coding agent](https://github.com/badlogic/pi-mono). Your pet evolves based on how you code.

![Pimagotchi widget](assets/widget.png)

## Install

```bash
pi install npm:@studiosunnyfield/pimagotchi
```

## Features

- **18 animated species** — duck, cat, dragon, ghost, axolotl, capybara, and more (3 animation frames each)
- **Behavior-based evolution** — egg hatches at Lv.3 into a species based on your tool usage: bash warriors get dragons, careful readers get owls, 3am coders get ghosts
- **Rarity system** — common → legendary, more coding = better odds
- **Cosmetics** — 6 eye styles, 8 hats (unlocked by rarity), 1% shiny chance ✧
- **Animated widget** — idle fidgets, blinks, excited during streaming, hearts when petted
- **Persistent** — your pet follows you across sessions

## Usage

![Pimagotchi menu](assets/menu.png)

| Action | How |
|--------|-----|
| **Action menu** | `Ctrl+;` — overlay with arrow navigation |
| **Toggle widget** | `/pet` |
| **Rename** | `/pet <name>` |
| **Feed** | `/pet feed` |
| **Pet** | `/pet pet` |
| **Stats** | `/pet stats` |
| **Manual hatch** | `/pet hatch` (if Lv.3+) |

## Evolution

Your egg hatches into a species based on your coding patterns:

| Pattern | Species Pool |
|---------|-------------|
| Bash-heavy | 🐉 dragon, 🤖 robot, 🪿 goose |
| Edit/write-heavy | 🐱 cat, 🐰 rabbit, 🌵 cactus |
| Read-heavy | 🦉 owl, 🍄 mushroom, 🐢 turtle |
| Night coding | 👻 ghost, 🦎 axolotl |
| High tool count | 🐙 octopus, 🐌 snail |
| Balanced | 🫧 blob, 🦫 capybara, 🐤 duck, 🐧 penguin, 😺 chonk |

## Rarity

| Rarity | Base Odds | Hats Available |
|--------|-----------|---------------|
| ★ Common | 60% | none, beanie |
| ★★ Uncommon | 25% | + propeller |
| ★★★ Rare | 10% | + tophat, wizard |
| ★★★★ Epic | 4% | + crown, halo |
| ★★★★★ Legendary | 1% | + tinyduck |

More tool calls at hatch time = better rarity odds.

## Credits

Sprite art adapted from Claude Code's buddy system. Evolution and progression system original.
npm package: @studiotoolkit/color-from-image
Description: React component for extracting dominant colors from images using advanced color analysis algorithms
Author: StudioToolkit
Latest version: 1.0.2

# Color From Image

React component for extracting dominant colors from images using advanced color analysis algorithms.

**Play around and Generate component code here:**  
https://studiotoolkit.github.io/build-color-from-image

**Complete Demo:**  
https://studiotoolkit.github.io/demo-all

**Complete functionality:**  
https://studiotoolkit.github.io/color-from-image-help

## Features

<table>
<tr>
<td align="center"><img src="assets/Empty-Canvas.png" width="200"/><br/>Empty Canvas</td>
</tr>
<tr>
<td align="center"><img src="assets/Image-Pasted.png" width="200"/><br/>Image Pasted</td>
</tr>
<tr>
<td align="center"><img src="assets/Settings.png" width="200"/><br/>Parameters</td>
</tr>
</table>

- Extract dominant colors from any image using OKLab color space and K-Means++ clustering
- Drag and drop or paste image support (Ctrl+V)
- Customizable canvas dimensions (`width`, `height`)
- Border styling options (`borderColor`, `borderThickness`)
- Load from URL (`imageUrl`) or file object (`imageFile`)
- Programmatic clear with `clearTrigger`
- CORS-aware image loading with fallback
- Color extraction callback (`onColorsExtracted`)

## Installation

```bash
# Using pnpm
pnpm add @studiotoolkit/color-from-image

# Using npm
npm install @studiotoolkit/color-from-image

# Using yarn
yarn add @studiotoolkit/color-from-image
```

**React Version:** `^18.0.0` or higher

## Usage

### Basic Usage

```tsx
import { ColorFromImage } from '@studiotoolkit/color-from-image';
import '@studiotoolkit/color-from-image/style.css';

function App() {
  const handleColorsExtracted = (colors) => {
    console.log('Extracted colors:', colors);
  };

  return <ColorFromImage onColorsExtracted={handleColorsExtracted} />;
}
```

**Sample Output:**

```json
{
  "palette": [
    "#627bb8",
    "#53689e",
    "#4c597d",
    "#6c6d67",
    "#6b3d18",
    "#657092",
    "#43311b",
    "#494b4e",
    "#81889e",
    "#965528",
    "#bc773f",
    "#221b15",
    "#808748",
    "#615d2a",
    "#cdab71",
    "#f1d85d"
  ]
}
```

### Steps to Use

1. Import the component and its styles
2. Add the `ColorFromImage` component to your app
3. Paste an image or drag and drop onto the canvas
4. The component will automatically extract dominant colors
5. Use the `onColorsExtracted` callback to receive the color palette

## Contributors

[StudioToolkit](https://github.com/studiotoolkit)

## License

Licensed under the MIT License.

## Keywords

color-extraction, image-colors, dominant-colors, color-analysis, image-processing, color-palette, react-component, design-tools
npm package: @studiotoolkit/color-palette
Description: React component for displaying and managing color palettes with multiple display modes and customization options
Author: StudioToolkit
Latest version: 1.0.2

# Color Palette

React component for displaying and managing color palettes with multiple display modes and customization options.

**Play around and Generate component code here:**  
https://studiotoolkit.github.io/build-color-palette

**Complete Demo:**  
https://studiotoolkit.github.io/demo-all

## Features

<table>
<tr>
<td align="center"><img src="assets/Box.png" width="600"/><br/>Box</td>
</tr>
<tr>
<td align="center"><img src="assets/Circle.png" width="600"/><br/>Circle</td>
</tr>
<tr>
<td align="center"><img src="assets/Square.png" width="600"/><br/>Square</td>
</tr>
<tr>
<td align="center"><img src="assets/Triangle.png" width="600"/><br/>Triangle</td>
</tr>
<tr>
<td align="center"><img src="assets/Single-Tone.png" width="600"/><br/>Single Tone</td>
</tr>
<tr>
<td align="center"><img src="assets/Two-Tone.png" width="600"/><br/>Two Tone</td>
</tr>
<tr>
<tr>
<td align="center"><img src="assets/Settings.png" width="600"/><br/>Variation</td>
</tr>
<td align="center"><img src="assets/Parameters.png" width="600"/><br/>Parameters</td>
</tr>

</table>

- Multiple display modes: square, table, circle, triangle, block
- Multi-part color swatches (1, 2, or 3 parts) with saturation/brightness control
- Customizable dimensions (`width`)
- Border styling (`boxBorderSize`, `boxBorderColor`)
- Typography options (`displayTitle`, `fontColor`, `fontSize`)
- Background color customization (`backgroundColor`)
- Hex code display toggle (`displayHexcode`)
- Copy colors to clipboard (`showCopyButton`)
- Transform colors with adjustable saturation and brightness per part

## Installation

```bash
# Using pnpm
pnpm add @studiotoolkit/color-palette

# Using npm
npm install @studiotoolkit/color-palette

# Using yarn
yarn add @studiotoolkit/color-palette
```

**React Version:** `^18.0.0` or higher

## Usage

### Basic Usage

```tsx
import { ColorPalette } from '@studiotoolkit/color-palette';
import '@studiotoolkit/color-palette/style.css';

function App() {
  const paletteData = {
    primary: ['#FF5733', '#33FF57', '#3357FF'],
    secondary: ['#FFC300', '#DAF7A6', '#C70039'],
  };

  return <ColorPalette paletteData={paletteData} displayType="square" showCopyButton={true} />;
}
```

### Steps to Use

1. Import the component and its styles
2. Prepare palette data as an object with string arrays
3. Add the `ColorPalette` component with desired display type
4. Customize appearance with optional props
5. Enable copy button to allow users to copy colors

## Contributors

[StudioToolkit](https://github.com/studiotoolkit)

## License

Licensed under the MIT License.

## Keywords

color-palette, color-display, color-swatches, palette-viewer, color-management, design-tools, react-component, color-visualization
npm package: @studiotoolkit/color-palette-generator
Description: Generate color palettes using algorithmic, contrast-based, harmony-based, perceptual, and design-specific algorithms
Author: StudioToolkit
Latest version: 1.0.0

# @studiotoolkit/color-palette-generator

Generate color palettes (Total 57) using various algorithms including Algorithmic (11), Contrast (7), Data visualization (7), Harmony (11), Image (10), Perceptual (10), and design specific (60-30-10) generators.

**Play around and Generate component code here:**  
https://studiotoolkit.github.io/build-palette-generator

**Complete Demo:**  
https://studiotoolkit.github.io/demo-all

**Complete Documentation:**  
https://studiotoolkit.github.io/color-palettes

**60-30-10 Design Documentation:**  
https://studiotoolkit.github.io/60-30-10

**Radium Colors Generation Documentation:**  
https://studiotoolkit.github.io/radium-help

## Installation

```bash
pnpm add @studiotoolkit/color-palette-generator
```

## Usage

```typescript
import {
  AlgorithmicGenerator,
  ContrastGenerator,
  HarmonyGenerator,
  ImageGenerator,
  PerceptualGenerator,
  RadiumGenerator,
  DataVisualsGenerator,
  Select603010,
} from '@studiotoolkit/color-palette-generator';

// Generate a harmony-based palette
const harmonyPalette = HarmonyGenerator.generate('#FF5733');

// Generate a contrast palette
const contrastPalette = ContrastGenerator.generate('#FF5733');

// Generate from an image
const imagePalette = await ImageGenerator.extractFromImage(imageElement);
```

## Generators

- **AlgorithmicGenerator** - Mathematical color generation algorithms
- **ContrastGenerator** - Generate high-contrast color combinations
- **DataVisualsGenerator** - Palettes optimized for data visualization
- **HarmonyGenerator** - Color harmony-based palettes (complementary, triadic, etc.)
- **ImageGenerator** - Extract color palettes from images
- **PerceptualGenerator** - Perceptually uniform color palettes
- **RadiumGenerator** - Design system color generation
- **Select603010** - 60-30-10 color rule generator

## License

MIT