design-guide

Name: design-guide
Availability: InStock
Author: Bini

Guide frontend developers in building consistent UI components for Paperclip.

14|2|Updated Mar 6, 2026

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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

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

Core Features & Use Cases

Component Creation Guidelines: Learn how to build new UI components following Paperclip's standards.
Design Tokens: Understand and utilize the defined color palettes, typography scales, and spacing.
Composition Patterns: Discover and apply common patterns for structuring UI elements.
Use Case: When developing a new feature that requires a data table, consult this guide to understand the correct EntityRow and StatusBadge usage, ensuring it matches the existing UI.

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 and reusable React UI components?▼

To build reusable React UI components, follow a structured design system covering design principles, tech stack choices, and composition patterns to ensure frontend integrity and scalability across your application.

What are design tokens and how do I use them in frontend development?▼

Design tokens are defined visual values like color palettes, typography scales, and spacing. Use them in frontend development to maintain visual consistency and scalability across all UI components.

How do I structure UI composition patterns for a component library?▼

Structure UI composition patterns by defining a clear component hierarchy and applying common layout and interactive element patterns. This ensures new elements match existing UI standards and remain scalable.

Can I use Tailwind CSS to implement a design system for web applications?▼

Yes, Tailwind CSS is included in the tech stack for implementing design systems. It works alongside defined design tokens and typography scales to build consistent, reusable frontend UI components.

What is the best way to standardize status badges and data tables in a UI?▼

Standardize status badges and data tables by consulting a design guide for correct EntityRow and StatusBadge usage. This ensures new data features match the existing UI and established component hierarchy.