TailPrint Builder

What It Does

TailPrint replicates the visual DNA of BlueprintJS — the high-density, professional, industrial aesthetic used by ERP, IoT monitoring, and accounting tools — using only Tailwind CSS. No BlueprintJS package. No React dependency in the design layer. Just portable class recipes.

• Provides the complete token system: Blueprint color scale, inset box-shadows, 3px border radius, tabular numerals
• Delivers 21 component recipes covering tables, badges, cards, sidebars, inputs, modals, callouts, and more
• Charts via ApexCharts (CDN, no npm install) — pre-configured with TailPrint tokens and IBM Plex Sans
• Supports multi-tenant theming and dark mode via CSS variables — a single data-tenant attribute re-themes the entire app
• Targets 25 rows × 8 columns visible at 1080p without scrolling — true data density, not marketing
• AI-native docs: the skill loads all component rules and anti-patterns into context so Claude can generate correct TailPrint pages on the first attempt

When to Use

• Building professional admin dashboards, ERP screens, or IoT monitoring UIs
• Replacing BlueprintJS with a Tailwind-only implementation to reduce bundle size
• When your users are professionals who prefer data density over generous whitespace
• Multi-tenant SaaS apps where each tenant needs its own brand accent without a full design overhaul

How to Use

After installing the plugin, invoke it in Claude Code and describe the page you want to build. Example prompts:

Invoke the skill directly with:

The skill loads the full TailPrint token system, component recipes, anti-patterns, and layout rules into context before generating any code.

Design Docs

The full TailPrint specification — token system, typography, theming, layout, and all 21 component recipes — is embedded directly in the skill file. When you invoke the skill, the entire spec loads into your agent's context.

View skill source on GitHub →

Source & Changelog

Skill source: skills/tailprint-builder/