ui-pattern-library

Catalog UI patterns by domain, density, and backend state for design consistency.

16|Updated Apr 30, 2026

Search Tags:#frontend #design-system #ui-patterns #design-consistency #pattern-catalog #interface-patterns

Ready to run

npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill ui-pattern-library

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-pattern-library
Source: https://github.com/JCE-Joshhh77/JCE-Opencode-Tools/tree/main/config/skills/ui-pattern-library
Command: npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill ui-pattern-library

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI pattern catalog to help agents choose design directions that feel like a real product. Gunakan sebagai inspirasi arsitektur UI, bukan template siap copy.

Core Features & Use Cases

Domain-specific UI pattern recommendations to suit SaaS, admin dashboards, and developer tools.
Guidance on layout, density, and visual language to maintain consistency across product interfaces.
Quick-start guidance on selecting patterns based on domain, user needs, data density, and backend state.

Quick Start

Browse the catalog and select patterns that match your domain, data density, and backend state to start designing your UI.

Frequently Asked Questions about ui-pattern-library

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

FAQPage Schema

How do I maintain UI design consistency across different SaaS dashboards and admin interfaces?▼

To maintain UI design consistency, catalog interface patterns based on your domain, data density, and backend state. This guides design decisions and enforces consistent visual language and layout rules across enterprise SaaS dashboards, developer tools, and fintech products.

What's the best way to choose UI patterns for high data density interfaces?▼

The best way to choose UI patterns for high data density is to evaluate your domain and backend state. Selecting patterns based on these factors ensures your interface architecture handles user needs appropriately without feeling cluttered or inconsistent.

Does this UI pattern library provide ready-to-copy templates for frontend development?▼

No, this UI pattern library does not provide ready-to-copy templates. It serves as UI architecture inspiration, offering domain-specific guidance on layout, density, and visual language to direct your design workflow rather than generating code.

How do I start selecting interface patterns for a fintech or developer tool product?▼

To start selecting interface patterns, browse the catalog and match patterns to your specific domain, user needs, and data density. This quick-start approach aligns your fintech or developer tool UI with established product design directions.

Can I use this pattern catalog for enterprise admin interfaces with complex backend states?▼

Yes, you can use this pattern catalog for enterprise admin interfaces. It provides specific guidance on selecting patterns based on backend state and domain requirements, ensuring your interface architecture remains consistent and appropriate for complex data environments.