Agentic webdesign shadcn typeset

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

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.From its SKILL.md

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.

2 things 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.
runs commandsInstructs the agent to run 1 command, including `npx shadcn@latest add typeset`.

SKILL.md

2.2 KB, 462 tokens by cl100k_base, 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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.