skills.rest
latitude-dev
latitude-devOFFICIAL
Explore all skills by this author →
Website𝕏@trylatitudeGitHub

artifact-designer

Create, validate, preview, and publish self-contained HTML artifacts to Cloudflare Workers.

4.6k|387|Updated Jun 28, 2024
Search Tags:#publishing#HTML#preview#artifact#Dashboard#Design system#Cloudflare workers
One-click install
npx skills add https://github.com/latitude-dev/latitude-llm --skill artifact-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifact-designer
Source: https://github.com/latitude-dev/latitude-llm/tree/main/.agents/skills/artifact-designer
Command: npx skills add https://github.com/latitude-dev/latitude-llm --skill artifact-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires wrangler, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Building and sharing standalone HTML reports, dashboards, and prototypes usually requires manual scaffolding, design decisions, and deployment setup. This Skill standardizes the entire lifecycle of self-contained HTML artifacts, from creation with a bundled design system to validation, local preview, and publishing to a public URL.

Core Features & Use Cases

  • Artifact scaffolding and design system: Generate new single-file HTML artifacts using a bundled Artifact UI theme grounded in Vercel Geist tokens, with support for project- or user-level DESIGN.md overrides.
  • Validation and preview: Check HTML files for publish safety (no external scripts, fetch calls, oversized assets) and serve them locally for preview before sharing.
  • Publishing to Cloudflare Workers: Deploy artifacts or existing user-provided HTML files as temporary or permanent Workers, reusing an authenticated Wrangler session when available.
  • Use Case: After finishing a data analysis, ask the agent to create a benchmark viewer artifact, validate it strictly, preview it in the browser, and publish a temporary public link to share with teammates.

Quick Start

Ask the agent to create a new HTML report artifact titled "Q3 Benchmark Report", validate it, and publish a temporary preview link.

Frequently Asked Questions about artifact-designer

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

FAQPage Schema
How do I publish an HTML file to a public URL?▼

Run the helper script with the publish command and the --file flag pointing to your HTML file, choosing a temporary or permanent target. It deploys the file as a Cloudflare Worker and prints the workers.dev URL, reusing an authenticated Wrangler session if one exists.

How do I create a self-contained HTML dashboard artifact?▼

Use the create command with a title, instructions, and kind to scaffold a new artifact in the .artifacts directory. The generated index.html includes the bundled Artifact UI theme based on Vercel Geist tokens, which you then edit, validate, and preview.

What restrictions apply to published HTML artifacts?▼

Artifacts must be self-contained: no external scripts, stylesheets, fonts, images, or API calls via fetch, XMLHttpRequest, or WebSocket. Each file must stay under 5 MiB, with a total size target of 16 MiB, enforced by the strict validation mode.

Does publishing to Cloudflare require an account?▼

Temporary publishing works without an authenticated account by using isolated Cloudflare auth, producing a claim URL valid for 60 minutes. Permanent publishing requires Cloudflare authentication, and an existing Wrangler login is reused automatically when detected.

Why does artifact validation fail on my HTML file?▼

Validation fails when the file exceeds 5 MiB, references external HTTP resources, or contains fetch, XMLHttpRequest, or WebSocket calls in strict mode. Fix these issues by inlining assets as data URIs or SVG and removing runtime network requests.

Related Skills

Explore More Design & Creative Skills→
clinecline
19

plotting

Create standardized charts from analytics query results with CSV and HTML or PNG exports.

Official
Intermediate
redpanda-dataredpanda-data
34

to-prd

Synthesize context into a Product Requirements Document and publish it to an issue tracker.

Official
Intermediate
freepik-companyfreepik-company
6

review-leaks

Detect secrets, credentials, PII, and sensitive data leaks in code.

Official
Advanced
david-bieridavid-bieri

webdev:static-site-i18n

Automate client-side internationalization for multi-page static sites with data-i18n attributes.

Community
Intermediate