Tw Blocks
Copy proven TW-Blocks spacing patterns when you build dashboards, sidebars, forms, and data-heavy SaaS screens without guessing padding and grid rhythm.
Overview
TW-Blocks is an agent skill for the Build phase that documents TW-Blocks spacing patterns for dashboards, forms, tables, chat, and other SaaS UI components.
Install
npx skills add https://github.com/vercel-labs/tw-blocks --skill tw-blocksWhat is this skill?
- Ten component pattern categories: dashboard layouts, toolbars, panels, forms, tables, status, chat, charts, timeline, an
- Dashboard sidebar recipe with 240px standard width and TW-Blocks tokens (p-tab-4, gap-tab-3, h-block-1).
- Reusable class vocabulary for headers, navigation rows, and dense admin UIs aligned to one spacing system.
- Copy-paste snippets for SaaS shells (aside nav, bordered sections, icon + label rows) instead of one-off Tailwind guessi
- Table of contents maps each UI archetype to a dedicated section for fast agent retrieval.
- 10 component pattern categories in the table of contents
- 240px standard width documented for dashboard sidebars
Adoption & trust: 4 installs on skills.sh; 1 GitHub stars; 2/2 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a SaaS UI with Tailwind-style utilities but keep fighting inconsistent padding, sidebar widths, and repeated layout boilerplate across pages.
Who is it for?
Indie builders implementing admin dashboards, settings, and data-heavy web apps who already use or plan to adopt TW-Blocks spacing classes.
Skip if: Teams that need a full component framework with no HTML snippets, pure native mobile UI, or backend-only work with no interface layer.
When should I use this skill?
You are implementing or extending web UI and want TW-Blocks-aligned markup for layouts, forms, tables, or messaging instead of inventing spacing from scratch.
What do I get? / Deliverables
You get copy-ready component markup keyed to TW-Blocks tokens so new screens share the same spacing rhythm and structure as your dashboard shell.
- Component markup snippets using TW-Blocks spacing classes
- Structured dashboard, toolbar, form, or list layouts matching documented patterns
Recommended Skills
Journey fit
Canonical shelf is Build because the skill is a pattern library for implementing UI markup and layout during product construction, not distribution or ops. Frontend is the right subphase: every section ships HTML structure and spacing tokens for visible product surfaces.
How it compares
Use as a spacing-aware pattern cookbook alongside shadcn-style components, not as a replacement for a design system or MCP design server.
Common Questions / FAQ
Who is tw-blocks for?
TW-Blocks is for solo and indie builders and their coding agents who implement web product UI and want consistent TW-Blocks spacing across dashboards, forms, and dense layouts.
When should I use tw-blocks?
Use it during Build frontend work when scaffolding sidebars, toolbars, tables, chat panes, or chart areas; also when validating a prototype landing or in-app shell that must match your main app spacing.
Is tw-blocks safe to install?
Review the Security Audits panel on this Prism page and your org policy before installing; the skill is documentation and markup patterns, but always verify the source repo and updates like any third-party agent skill.
SKILL.md
READMESKILL.md - Tw Blocks
# TW-Blocks Component Patterns Detailed implementation patterns for common UI components using TW-Blocks spacing system. ## Table of Contents - [Dashboard Layouts](#dashboard-layouts) - [Toolbars & Headers](#toolbars--headers) - [Panels & Sidebars](#panels--sidebars) - [Forms & Inputs](#forms--inputs) - [Tables & Lists](#tables--lists) - [Status Indicators](#status-indicators) - [Chat & Messages](#chat--messages) - [Charts & Data Viz](#charts--data-viz) - [Timeline & Animation](#timeline--animation) - [Code Editor Interface](#code-editor-interface) --- ## Dashboard Layouts ### Dashboard Sidebar (240px standard width) ```html <aside class="w-[240px] bg-slate-800 text-white flex flex-col"> <!-- Sidebar Header --> <div class="p-tab-4 border-b border-slate-700"> <div class="flex items-center gap-tab-3"> <div class="w-block-1 h-block-1 bg-blue-500 rounded-lg flex items-center justify-center"> <svg class="w-tab-5 h-tab-5" /> </div> <span class="font-semibold text-lg">AppName</span> </div> </div> <!-- Navigation --> <nav class="flex-1 p-tab-3"> <ul class="space-y-tab-1"> <li> <a href="#" class="flex items-center gap-tab-3 h-block-1 px-tab-3 rounded-lg bg-blue-600 text-white"> <svg class="w-tab-4 h-tab-4" /> <span class="text-sm">Dashboard</span> </a> </li> <li> <a href="#" class="flex items-center gap-tab-3 h-block-1 px-tab-3 rounded-lg text-slate-300 hover:bg-slate-700"> <svg class="w-tab-4 h-tab-4" /> <span class="text-sm">Settings</span> </a> </li> </ul> </nav> <!-- Sidebar Footer --> <div class="p-tab-4 border-t border-slate-700"> <div class="flex items-center gap-tab-3"> <div class="w-block-1 h-block-1 rounded-full bg-blue-500 flex items-center justify-center text-sm font-medium"> AU </div> <div class="flex-1 min-w-0"> <p class="text-sm font-medium truncate">Admin User</p> <p class="text-xs text-slate-400 truncate">admin@example.com</p> </div> </div> </div> </aside> ``` ### Stat Card ```html <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-tab-4"> <div class="flex items-center justify-between gap-tab-3"> <div> <p class="text-sm font-medium text-gray-500">Total Revenue</p> <p class="mt-tab-1 text-2xl font-bold text-gray-900">$45,231.89</p> <p class="mt-tab-1 text-sm text-green-600 flex items-center gap-tab-1"> <svg class="w-tab-4 h-tab-4" /> +20.1% from last month </p> </div> <div class="w-block-1.5 h-block-1.5 bg-green-100 rounded-xl flex items-center justify-center"> <svg class="w-tab-6 h-tab-6 text-green-600" /> </div> </div> </div> ``` --- ## Toolbars & Headers ### Dashboard Header (64px / 2 blocks) ```html <header class="h-block-2 bg-white border-b border-gray-200 flex items-center px-tab-4"> <!-- Search --> <div class="flex-1 max-w-xl"> <div class="relative"> <svg class="absolute left-tab-3 top-1/2 -translate-y-1/2 w-tab-4 h-tab-4 text-gray-400" /> <input type="text" placeholder="Search..." class="w-full h-block-1 pl-tab-10 pr-tab-3 bg-gray-100 rounded-lg text-sm" /> </div> </div> <!-- Actions --> <div class="flex items-center gap-tab-3 ml-auto"> <button class="relative p-tab-2 rounded-lg hover:bg-gray-100"> <svg class="w-tab-5 h-tab-5 text-gray-600" /> <span class="absolute top-tab-1 right-tab-1 w-tab-2 h-tab-2 bg-red-500 rounded-full"></span> </button> <div class="w-block-1 h-block-1 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium"> AU </div> </div> </header> ``` ### Design Tool Toolbar (48px / 1.5 blocks) ```html <header class="h-block-1.5 bg-neutral-900 border-b border-neutral-700 flex items-center px-tab-3"> <!-- Logo --> <div class="flex items-center gap-tab-2">