Agentic webdesign shadcn typeset

Skill S3YED/appie-kit/skills/agentic-webdesign-shadcn-typeset

Build Your Own AI Employee. The complete starter kit for OpenClaw + Hermes Agent. 155 deduplicated skills, drag-and-drop workspace, case studies, install scripts.

Install

npx -y skills add S3YED/appie-kit --skill agentic-webdesign-shadcn-typeset

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use shadcn/typeset — a CSS-only styling system for HTML and rendered markdown. One class, streaming-safe, theme-aware. Use when styling raw HTML/markdown content in shadcn/ui projects for blog posts, docs, chat messages, or AI-generated content.

SKILL.md

2.2 KB, as published. Nobody here has run it

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

npx shadcn@latest add typeset

<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

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

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

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

Why This Helps AI Agents

Single class — agents don't need to add per-element Tailwind classes
Streaming-safe — new blocks appended during streaming don't restyle earlier ones
No dependencies — CSS file lives in your project, no package layer
Theme-aware — uses your existing shadcn theme tokens (colors, fonts)
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