skills.rest
2lab-ai
2lab-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

block-kit-preview

Render Slack Block Kit JSON as PNG screenshots using Playwright and Chromium.

Updated Jul 29, 2026
Search Tags:#slack#playwright#ui testing#block kit#design preview
One-click install
npx skills add https://github.com/2lab-ai/soma-work --skill block-kit-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: block-kit-preview
Source: https://github.com/2lab-ai/soma-work/tree/main/src/local/skills/block-kit-preview
Command: npx skills add https://github.com/2lab-ai/soma-work --skill block-kit-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, chromium, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a visual preview of Slack Block Kit JSON layouts as PNG screenshots, allowing for design validation and UI testing before deployment.

Core Features & Use Cases

  • Visual Preview: Render Slack Block Kit JSON as a PNG image to visually inspect the design.
  • Design Comparison: Compare multiple Block Kit designs side by side.
  • Use Case: When designing a new Slack app or updating an existing one, use this Skill to quickly visualize and iterate on Block Kit layouts.

Quick Start

Use the block-kit-preview skill to generate a screenshot of the Block Kit design from the provided JSON.

Frequently Asked Questions about block-kit-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview Slack Block Kit JSON as an image?▼

You can preview Slack Block Kit JSON as an image by rendering it into a PNG screenshot. This allows you to visually inspect the design layout for review and UI validation before deployment.

Do I need Playwright and Chromium to render Slack Block Kit designs?▼

Yes, you need Playwright and Chromium installed to execute the rendering script. These dependencies are required to generate the PNG screenshots from your Slack Block Kit JSON layouts.

Can I compare multiple Slack Block Kit layouts side by side?▼

Yes, you can compare multiple Slack Block Kit designs side by side. By rendering different Block Kit JSON configurations into PNG screenshots, you can easily visually inspect and iterate on layout differences.

What is the best way to validate Slack app UI before deployment?▼

The best way to validate Slack app UI before deployment is to render Block Kit JSON as PNG screenshots. This visual preview mechanism allows you to inspect designs and iterate on layouts quickly.

How to generate screenshots from Block Kit JSON for design review?▼

To generate screenshots from Block Kit JSON for design review, provide your JSON layout to the rendering script. It uses Playwright to output a PNG image file for visual inspection and UI testing.

Related Skills

Explore More Design & Creative Skills→
Mattyreed1Mattyreed1

social-canvas

Render HTML templates into PNG social media visuals with Playwright.

Community
Advanced
ccheneyccheney
58

slack-block-kit

Generate Slack Block Kit UI payloads for messages, modals, and App Home surfaces.

Community
Advanced
0xMerl990xMerl99
1

slack-tools

Manage Slack workspaces, automate channels, and integrate Slack APIs.

Community
Intermediate
taiidanitaiidani
1

slack

Automates Slack workspace tasks like messaging, search, and data extraction via browser.

Community
Advanced