skills.rest
WeAreBini
WeAreBiniOFFICIAL
Explore all skills by this author →
Website𝕏@WeAreBiniGitHub

design-guide

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
One-click install
npx skills add https://github.com/WeAreBini/paperclip --skill design-guide-wearebini
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
CodeForPhillyCodeForPhilly

frontend-shadcn

Standardize React frontend development with Vite, React 19, TypeScript, Tailwind CSS, and React Router v7.

Official
Intermediate
felipeotarolafelipeotarola

design-guide

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

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced