skills.rest
ATD04
ATD04COMMUNITY
Explore all skills by this author →
GitHub

design-guide

Guide frontend developers in building Paperclip UI components with design tokens and patterns.

Updated Apr 14, 2026
Search Tags:#design system#frontend development#ui design#consistent components#Paperclip UI
One-click install
npx skills add https://github.com/ATD04/Abdalrhman-Dmour-9xai19 --skill design-guide-atd04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/ATD04/Abdalrhman-Dmour-9xai19/tree/main/paperclip-master/.claude/skills/design-guide
Command: npx skills add https://github.com/ATD04/Abdalrhman-Dmour-9xai19 --skill design-guide-atd04

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide for building consistent, reusable frontend components using the Paperclip UI design system, addressing the challenges of maintaining a consistent design language across projects.

Core Features & Use Cases

  • Component Creation: Detailed guidelines for creating new UI components and extending existing ones.
  • Design Tokens: Overview of the color, typography, and spacing tokens for a consistent look and feel.
  • Typography Scale: Instructions for using the established typography patterns for readability and clarity.
  • Status & Priority Systems: Guidance on implementing status and priority indicators for tasks and entities.
  • Component Hierarchy: Explanation of the component hierarchy and when to create new components.
  • Composition Patterns: Examples of how components can be composed together to create complex UI structures.
  • Interactive Patterns: Best practices for implementing interactive elements like hover states and inline editing.
  • Layout System: Description of the three-zone layout system used in Paperclip UI.
  • Design Guide Page: How to maintain and update the /design-guide page for documentation purposes.
  • Component Index: Reference for all UI components used in Paperclip UI.
  • File Conventions: Naming conventions for files and components.
  • Common Mistakes to Avoid: Tips to avoid common pitfalls in UI design and development.

Quick Start

Follow the design-guide to understand the Paperclip UI design system and start creating consistent, reusable frontend components.

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 frontend components using a design system?▼

To build consistent frontend components using a design system, follow established guidelines for component creation, design tokens, and composition patterns to maintain a unified design language across projects.

What are design tokens and how do they work for UI components?▼

Design tokens are predefined values for color, typography, and spacing that ensure a consistent look and feel across reusable frontend components. They centralize styling decisions so components remain visually unified.

How do I implement status and priority indicators in UI design?▼

Implement status and priority indicators in UI design by following specific system guidelines for tasks and entities, ensuring visual cues like colors and badges consistently communicate state and urgency across components.

What is the best way to structure a UI layout system for reusable components?▼

The best way to structure a UI layout system for reusable components is using a three-zone layout system that organizes content areas systematically, allowing complex UI structures to be composed predictably.

What are common mistakes to avoid when creating frontend components?▼

Common mistakes to avoid when creating frontend components include ignoring established file naming conventions, misusing the typography scale, and violating component hierarchy, which all break design consistency.

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
ajianazajianaz
4

flutter-ui-ux

Build responsive Flutter UI components with animations and theming.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

visual-design-foundations

Establish design systems with typography scales, 8-point grids, and semantic color tokens.

Community
Intermediate
bradtaylorsfbradtaylorsf
8

component-architecture

Design component architectures in frontend frameworks like React.

Community
Intermediate