agentic-webdesign-shadcn-typeset

Files (1)

• SKILL.md

SKILL.md (first lines)

# shadcn/typeset

A single CSS file that styles HTML elements and rendered markdown. Add one class, everything inside gets styled. No per-element classes needed.

## Quick Start

```bash
npx shadcn@latest add typeset
```

```tsx
<div className="typeset">{markdownContent}</div>
```

## Core Controls (3 CSS custom properties)

| Property | Purpose | Default |
|----------|---------|---------|
| `--typeset-size` | Base font size | Inherits from container |
| `--typeset-leading` | Line height multiplier | ~1.6 |
| `--typeset-flow` | Spacing between block elements | ~1em |

## Multiple Contexts

```css
.typeset-chat {
  --typeset-leading: 1.6;
  --typeset-flow: 1em;
}

.typeset-docs {
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.5em;
}
```

```tsx
<div className="typeset typeset-chat">{message}</div>
<article className="typeset typeset-docs">{page}</article>
```

## Why This Helps AI Agents

1. **Single class** — agents don't need to add per-element Tailwind classes
2. **Streaming-safe** — new blocks appended during streaming don't restyle earlier ones
3. **No dependencies** — CSS file lives in your project, no package layer
4. **Theme-aware** — uses your existing shadcn theme tokens (colors, fonts)
5. **Flexible** — create as many typesets as you need for different contexts

## Use Cases

- Blog posts rendered from MDX/markdown
- Documentation pages
- Chat message content (AI-generated markdown)
- Product descriptions
- Any content where you have raw HTML or markdown that needs consistent typography

## Pitfalls

- Typeset only styles semantic HTML elements (h1-h6, p, ul, ol, table, pre, code, etc.)
- If your content has class-based styling already, typeset won't override it
- For streaming, wrap only the content portion, not the entire conversation

From S3YED/appie-kit, MIT.

More from S3YED/appie-kit