skills.rest
thetangstr
thetangstrCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Provide design standards and component usage instructions for Paperclip UI.

Updated Mar 30, 2026
Search Tags:#accessibility#frontend#visual consistency#component library#ui design#dark theme
One-click install
npx skills add https://github.com/thetangstr/agentdash --skill design-guide-thetangstr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/thetangstr/agentdash/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/thetangstr/agentdash --skill design-guide-thetangstr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references/component-index.md (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on the Paperclip UI design system, ensuring consistent, reusable, and visually appealing frontend components.

Core Features & Use Cases

  • Design Principles and Standards: Outlines the core concepts for dense, keyboard-driven, dark-themed interfaces.
  • Component Architecture: Details the hierarchy and usage patterns for primitives, custom composites, and page layouts.
  • Pattern Guidance: Demonstrates common composition strategies like entity lists, property panels, and dashboards.
  • Quick Start: Consult the design guide to implement UI elements that match Paperclip's strict visual and interaction standards.

Quick Start

Review the design principles and component guidelines to start constructing UI elements consistent with Paperclip's aesthetic.

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 UI components for a dark-themed control panel?▼

UI component architecture is structured around a hierarchy of primitives, custom composites, and page layouts. Following this composition strategy ensures reusability and visual consistency when constructing complex web interfaces like entity lists and property panels.

How do I ensure accessibility in a keyboard-driven frontend interface?▼

A dark-themed UI requires predefined color tokens and layout patterns to maintain visual consistency across complex web interfaces. Using these standardized tokens ensures that frontend components remain uniform, reusable, and visually appealing in low-light control panels.

Can I use standard UI design patterns for dense property panels and dashboards?▼

Yes, you can use UI design patterns for dense property panels and dashboards by composing primitives and custom composites. The design system provides pattern guidance for these layouts, ensuring they align with strict visual and interaction standards for keyboard-driven interfaces.

What are the limitations of using a strict component library for frontend UI design?▼

The limitation of using a strict component library for frontend UI design is that it constrains visual styling to predefined color tokens and layout patterns. Deviating from these strict standards can break accessibility and visual consistency across complex web interfaces.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
lyzno1lyzno1
1

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and consistency.

Community
Basic