CtrlK
BlogDocsLog inGet started
Tessl Logo

simon/skills

Auto-generated tile from GitHub (10 skills)

92

1.16x
Quality

94%

Does it follow best practices?

Impact

92%

1.16x

Average score across 44 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-16/

Code Snippet Image Pipeline for Documentation Site

Problem/Feature Description

A developer-tools company publishes a documentation website and a monthly engineering newsletter. Their technical writers regularly need to include polished code snippets as images — in blog posts, social media announcements, and API reference docs. Currently each writer manually screenshots their editor with their own font and colour preferences, resulting in inconsistent branding across posts.

The head of DevRel wants a standardised, scriptable pipeline so that anyone on the team can generate a code snippet image from any source file on the command line, with a consistent look (company theme, font, padding). The pipeline should also support a "social" variant with a larger font and a watermark for Twitter/LinkedIn posts.

The engineering team has a folder of TypeScript example files at examples/ (which you should create with at least 3 sample .ts files) that should all be rendered as part of a batch job. The output should go into a rendered/ directory. There should also be a way to render a single file quickly for spot-checking.

Create a shell script that automates this pipeline, along with the necessary configuration, so the team can run it in CI or locally with a single command.

Output Specification

Produce the following files:

  • render.sh — the main automation script that sets up configuration, validates the environment, and runs both a batch render and a single-file spot-check render
  • snipgrapher.config.json — the project configuration file with at least two profiles: one for documentation (default) and one for social media posts (social)
  • examples/ — a directory with at least 3 small .ts example files (each can be 5–20 lines of realistic TypeScript)
  • README.md — instructions for running the pipeline locally and notes on how to override settings for different environments (e.g., using environment variables in CI)

The script must be executable and should output clear progress messages. Any rendered output files (PNGs, SVGs, etc.) in rendered/ are expected — the grader will check both the script's structure and whether it would produce output correctly.

Note: Since snipgrapher may not be globally installed, the script should handle the case where it is not available in PATH.

evals

README.md

tile.json