design-guide

Guide frontend component creation with Paperclip UI design tokens and patterns.

Updated Mar 11, 2026

Search Tags:#react #design system #component library #tailwind css #frontend development #ui design

Ready to run

npx skills add https://github.com/Dinuda/summun.cloud --skill design-guide-dinuda

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Dinuda/summun.cloud/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Dinuda/summun.cloud --skill design-guide-dinuda

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the Paperclip UI design system, ensuring consistency, reusability, and adherence to design principles across all frontend development.

Core Features & Use Cases

Component Creation Guidelines: Learn how to build new, reusable UI components.
Design Tokens & Typography: Understand and utilize the established color palettes, spacing, and typographic scales.
Pattern Library: Discover and apply common composition patterns for elements like entity rows, metric cards, and property displays.
Use Case: When developing a new feature that requires a data table, consult this guide to understand the correct structure, styling, and interactive elements to use, ensuring it matches the existing application's look and feel.

Quick Start

Use the design-guide skill to understand how to create a new button component.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I build consistent React UI components with Tailwind CSS?▼

To build consistent React UI components with Tailwind CSS, follow a structured design system guide that provides component creation rules, design tokens, and composition patterns. This ensures structural and visual consistency across your frontend application.

What are design tokens and how do I use them in a React component library?▼

Design tokens in a React component library are predefined variables for color palettes, spacing, and typographic scales. You use them to style components uniformly, ensuring visual consistency across all frontend interfaces without hardcoding values.

How do I create reusable data tables using TypeScript and Tailwind CSS?▼

To create reusable data tables using TypeScript and Tailwind CSS, consult a design system pattern library to apply the correct structure, styling, and interactive elements. This ensures the table matches the existing application's look and feel.

Does this design system guide work with React and TypeScript standards?▼

Yes, this design system guide adheres strictly to React, TypeScript, and Tailwind CSS standards. It provides frontend development guidelines for creating reusable components, managing typography, and applying composition patterns within these specific technologies.

What is the best way to structure composition patterns for metric cards?▼

The best way to structure composition patterns for metric cards is to use a standardized UI design system. This system provides predefined templates for entity rows, metric cards, and property displays, ensuring reusable and consistent frontend layouts.

How do I apply typographic scales when building a frontend component library?▼

To apply typographic scales when building a frontend component library, utilize the established design tokens provided by your UI design system. This ensures all text elements maintain proper hierarchy, readability, and visual consistency across the application.