skills.rest
jangirsamarth
jangirsamarthCOMMUNITY
Explore all skills by this author →
𝕏@JangirSamarthGitHub

design-guide

Guide UI component creation with design tokens and interaction patterns.

Updated Mar 31, 2026
Search Tags:#design system#frontend development#ui design#component design#Paperclip
One-click install
npx skills add https://github.com/jangirsamarth/paperclip-ai-coworker --skill design-guide-jangirsamarth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/jangirsamarth/paperclip-ai-coworker/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/jangirsamarth/paperclip-ai-coworker --skill design-guide-jangirsamarth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps teams create consistent and reusable UI components by providing a comprehensive design guide, reducing inconsistencies and speeding up development.

Core Features & Use Cases

  • Component Creation: Guidelines for building UI components that follow a consistent design language.
  • Design Tokens: A collection of colors, typography, and spacing to ensure visual consistency.
  • Status & Priority Systems: Predefined colors and icons for status indicators and priority levels.
  • Component Hierarchy: Clear guidelines on component composition and when to create new components.
  • Interactive Patterns: Best practices for hover states, focus, and inline editing.
  • Layout System: Documentation on the three-zone layout and component placement.
  • Quick Start: Access the design guide to learn about component creation, design tokens, and typography.

Quick Start

Read the design guide to understand Paperclip's UI component design system and best practices.

Frequently Asked Questions about design-guide

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

FAQPage Schema
What are design tokens and how do they enforce visual consistency in frontend development?▼

Design tokens are predefined collections of colors, typography, and spacing values used to maintain visual consistency across UI components, ensuring all frontend interfaces share a unified design language.

Can I use this UI design guide with my existing frontend development workflow?▼

Yes, you can use these design guidelines within an existing frontend development workflow to create reusable interfaces, provided you adhere to the predefined design tokens and component composition guidelines.

What is the best way to structure component hierarchy for reusable interfaces?▼

The best way to structure component hierarchy is to follow clear guidelines on component composition and determine when to create new components, ensuring interfaces remain reusable and visually cohesive.

How do I manage status indicators and priority levels in UI component design?▼

To manage status indicators and priority levels in UI component design, use the predefined colors and icons provided within the design system to maintain consistency across interactive patterns.

When should I create new components instead of modifying existing ones in a design system?▼

You should create new components instead of modifying existing ones when the required interaction patterns or layout placement fall outside the predefined component hierarchy and composition guidelines.

Related Skills

Explore More Design & Creative Skills→
jhouserjhouser

frontend-dev-guidelines

Provide frontend development guidelines for React/TypeScript applications using Suspense, TanStack Query, and Tailwind CSS.

Community
Intermediate
civictechdccivictechdc
1

interaction-design

Design and implement microinteractions and motion patterns for web and mobile interfaces.

Official
Advanced
jcdiv47jcdiv47

arrange

Assess UI layouts and implement systematic spacing and hierarchy improvements.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

paper

Standardize UI design with token-based spacing, color palettes, and font scales.

Community
Intermediate