skills.rest
mhamzahashim
mhamzahashimCOMMUNITY
Explore all skills by this author →
Website𝕏@mhamza_hashimGitHub

design-guide

Guide Paperclip UI component creation with design tokens and typography.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide for designing and implementing consistent UI components across Paperclip applications, ensuring a professional and cohesive user experience.

Core Features & Use Cases

  • Design System Guide: Offers guidelines for creating consistent, reusable frontend components.
  • Component Creation: Walks through the process of creating new UI components and modifying existing ones.
  • Use Case: When building a new feature in Paperclip, use this Skill to ensure the UI elements adhere to the established design system.

Quick Start

Use the design-guide skill to review the design principles and component hierarchy for building UI components in Paperclip.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I ensure consistent UI design when building frontend components in Paperclip?▼

To ensure consistent UI design in Paperclip, apply a design system guide that establishes design tokens, typography, and status systems. This enforces component reusability and established design principles across frontend workflows.

What is a design system guide for component development?▼

A design system guide for component development provides principles and patterns for creating reusable UI elements. It ensures cohesive user experiences by standardizing typography, design tokens, and priority systems across applications.

How do I create new UI components following established design patterns?▼

Create new UI components by adhering to an established component hierarchy and design principles. Review guidelines for component creation to ensure new elements integrate seamlessly into the existing design system.

Can I modify existing Paperclip components without breaking design consistency?▼

Yes, you can modify existing Paperclip components without breaking design consistency by following established design tokens and component patterns. The guide ensures modifications adhere to original design principles.

Do I need specific dependencies to use a Paperclip design system guide?▼

No specific dependencies are required to use the Paperclip design system guide. It provides standalone scripts, references, and assets to support component creation and maintain design consistency in frontend workflows.

Related Skills

Explore More Design & Creative Skills→
kochangbokkochangbok
1

create-agent-adapter

Guide development of Paperclip agent adapters for server, UI, and CLI modules.

Community
Advanced
googlarzgooglarz
3

design-guide

Organize design tokens and enforce consistent frontend component patterns.

Community
Advanced
joshkellett87joshkellett87

ui-design-system

Generate design tokens and documentation for scalable UI systems.

Community
Advanced
wiltaylorwiltaylor

warp-ui-guidelines

Provide UI code consistency guidelines for the Warp client.

Community
Intermediate