design-guide

Define Paperclip UI design standards for layout, color, typography, and components.

Updated Apr 3, 2026

Search Tags:#design #ui #consistency #react #style guide #component #tailwind

Ready to run

npx skills add https://github.com/jtangir87/paperclip --skill design-guide-jtangir87

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a detailed guide to maintaining a cohesive and professional UI design language across the Paperclip platform, ensuring visual consistency and usability.

Core Features & Use Cases

Design Principles & Best Practices: Outlines philosophies such as dense layouts, keyboard-first interaction, and dark theme defaults.
Tech Stack & Tokens: Documents the React, Tailwind CSS, and design token usage for consistent styling.
Component & Pattern Documentation: Describes reusable component structures, composition patterns, and layout systems.
Quick Start: Refer to this guide when building new UI components or updating existing ones to adhere to Paperclip’s visual and interaction standards.

Quick Start

Follow the design guidelines when creating or modifying UI components to ensure consistency with the Paperclip aesthetic and usability standards.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I establish consistent UI design standards in React and Tailwind CSS?▼

To establish consistent UI design standards in React and Tailwind CSS, apply a comprehensive design system defining layout, color, typography, and component tokens to ensure visual consistency across your interface.

What design principles should I follow for building dense, keyboard-first interfaces?▼

For building dense, keyboard-first interfaces, follow design philosophies that prioritize dark theme defaults and efficient interaction patterns to maintain a cohesive and professional UI design language.

How do I use design tokens to maintain visual consistency across components?▼

Use design tokens to maintain visual consistency by mapping standardized styling values directly to your React and Tailwind CSS components to ensure all interface elements adhere to established aesthetic and usability standards.

Does this UI style guide support frontend development outside of the Paperclip platform?▼

This UI style guide is specifically tailored for frontend development within the Paperclip platform, addressing its unique component structures and composition patterns to enforce adherence to established visual principles and tokens.

What is the best way to document reusable component structures and composition patterns?▼

The best way to document reusable component structures and composition patterns is to define them within a comprehensive design system to ensure visual consistency and best practices across all interface elements.