skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Paragraph

Create reusable Paragraph components with typography levels and inline elements.

Updated Aug 23, 2026
Search Tags:#typography#react#design system#ui component#rich text#paragraph
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-paragraph
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Paragraph
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Paragraph
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-paragraph

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a flexible and reusable Paragraph component for creating rich text content within a design system, allowing for easy combination of text, badges, icons, and links with consistent typography and styling.

Core Features & Use Cases

  • Typography Control: Apply predefined typography levels (t1-t9) and colors to paragraphs.
  • Inline Elements: Seamlessly integrate text emphasis, badges, icons, and links within a paragraph.
  • Use Case: Displaying product descriptions with highlighted features, status updates with icons and badges, or user-generated content with embedded links.

Quick Start

Import the Paragraph component from '@/src/presentation/components/ui/paragraph' and use it with desired typography and color props.

Frequently Asked Questions about use-design-system/Paragraph

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render rich text with inline elements in a React UI?▼

To render rich text in a React UI, use a paragraph component to compose text with inline elements like badges, icons, and links. This approach ensures consistent typography and styling across your design system.

What is the best way to manage typography levels in a design system?▼

Managing typography levels in a design system involves applying predefined dynamic levels like t1 through t9 to text components. This ensures consistent text scaling and color inheritance across all UI components.

Can I use this rich text component with Next.js?▼

Yes, you can use this rich text component with Next.js. It utilizes React and Next.js conventions for component structure and styling, allowing seamless integration of inline elements within your presentation layer.

How do I add badges and icons inside a paragraph?▼

You add badges and icons inside a paragraph by using a reusable UI component designed for rich text composition. This allows you to seamlessly integrate inline elements alongside standard text content.

How to display product descriptions with highlighted features in React?▼

To display product descriptions with highlighted features in React, implement a paragraph component that supports inline elements. This lets you embed badges and links directly within the text for emphasis.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
zinohomezinohome
1

page-layout-builder

Generate page layouts and shells for common web application patterns.

Community
Intermediate
PaldomPaldom
1

using-streamlit-markdown

Format Streamlit text with colored text, Material icons, badges, and LaTeX.

Community
Basic
clasenclasen
40

blocknote

Manage block-structured rich text documents in React-based editors.

Community
Intermediate