task icon Task

Create Styled QR Code

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).

                    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 read steps in a row, read them all at once (in parallel).

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`: ui: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).