task icon Task

Create Styled QR Code

Generate a styled QR code with user-directed customization

Requirements
Content to encode (URL, text, contact info, etc.). Optional: styling preferences (colors, dot style, logo to embed).
1

Get the content to encode (URL, text, etc.) from the user.

Then propose a styling based on context:

  • If they mention a brand/company, suggest colors that match
  • If they want something "fun" or "creative", suggest dots or classy-rounded style with a gradient
  • If they want "professional" or "clean", suggest square style with dark color
  • If they have a logo to embed, note you'll need the file path

Present your suggestion like:
"I'll create a QR code for [content] with:

  • Style: [dotStyle] dots
  • Color: [color] on [background]
  • Size: [size]px

Want me to proceed, or would you like to adjust the styling?"

3

Once the user approves (or after they've adjusted the styling):

Build the options JSON with their choices:

  • dotStyle: square, dots, rounded, extra-rounded, classy, classy-rounded
  • dotColor: hex color for the QR modules
  • backgroundColor: hex color for background
  • cornerStyle: square, dot, extra-rounded (optional)
  • cornerColor: hex color for corners (optional)
  • gradient: { type: "linear"|"radial", colors: ["#hex1", "#hex2"], rotation: 0-360 } (optional)
  • logoPath: path to logo file if user wants to embed one (optional)
  • logoSize: 0.1 to 0.4 proportion (optional, default 0.3)
  • size: pixels (default 300)
  • errorCorrectionLevel: L, M, Q, H (use H if logo is included)

Remember these settings for follow-up modifications.

5

Present the generated QR code to the user with a file:// link.

Let them know they can request changes like:

  • "Make it red" → update dotColor
  • "Use rounded dots" → update dotStyle
  • "Add my logo" → ask for logo path, update logoPath and bump errorCorrectionLevel to H
  • "Make it bigger" → increase size
  • "Add a gradient" → add gradient object with colors

If they request changes, adjust the options and regenerate.
The new file will overwrite the previous one (same filename based on content).

                    To run this task you must have the following required information:

> Content to encode (URL, text, contact info, etc.). Optional: styling preferences (colors, dot style, logo to embed).

If you don't have all of this information, exit here and respond asking for any extra information you require, and instructions to run this task again with ALL required information.

---

You MUST use a todo list to complete these steps in order. Never move on to one step if you haven't completed the previous step. If you have multiple CONSECUTIVE read steps in a row, read them all at once (in parallel). Otherwise, do not read a file until you reach that step.

Add all steps to your todo list now and begin executing.

## Steps

1. Get the content to encode (URL, text, etc.) from the user.

Then propose a styling based on context:
- If they mention a brand/company, suggest colors that match
- If they want something "fun" or "creative", suggest dots or classy-rounded style with a gradient
- If they want "professional" or "clean", suggest square style with dark color
- If they have a logo to embed, note you'll need the file path

Present your suggestion like:
"I'll create a QR code for [content] with:
- Style: [dotStyle] dots
- Color: [color] on [background]
- Size: [size]px

Want me to proceed, or would you like to adjust the styling?"


2. [Read Styled QR Code Generation Guide]: Read the documentation in: `skills/sauna/[skill_id]/references/qr.code.guide.md` (Reference for all available styling options)

3. Once the user approves (or after they've adjusted the styling):

Build the options JSON with their choices:
- dotStyle: square, dots, rounded, extra-rounded, classy, classy-rounded
- dotColor: hex color for the QR modules
- backgroundColor: hex color for background
- cornerStyle: square, dot, extra-rounded (optional)
- cornerColor: hex color for corners (optional)
- gradient: { type: "linear"|"radial", colors: ["#hex1", "#hex2"], rotation: 0-360 } (optional)
- logoPath: path to logo file if user wants to embed one (optional)
- logoSize: 0.1 to 0.4 proportion (optional, default 0.3)
- size: pixels (default 300)
- errorCorrectionLevel: L, M, Q, H (use H if logo is included)

Remember these settings for follow-up modifications.


4. [Gather Arguments: Generate Styled QR Code] The next step has the following requirements for arguments, do not proceed until you have all the required information:
- `text`: the text or URL to encode
- `outputDir`: state:qr.code.output path
- `options` (default: "{}"): JSON options object with styling choices
- Packages: qr-code-styling-node, jsdom

5. [Run Code: Generate Styled QR Code]: Call `run_script` with:

```json
{
  "file": {
    "path": https://sk.ills.app/code/qr.code.generate/preview,
    "args": [
      "text",
      "outputDir",
      "options"
    ]
  },
  "packages": ["qr-code-styling-node","jsdom"]
}
```

6. Present the generated QR code to the user with a file:// link.

Let them know they can request changes like:
- "Make it red" → update dotColor
- "Use rounded dots" → update dotStyle
- "Add my logo" → ask for logo path, update logoPath and bump errorCorrectionLevel to H
- "Make it bigger" → increase size
- "Add a gradient" → add gradient object with colors

If they request changes, adjust the options and regenerate.
The new file will overwrite the previous one (same filename based on content).