pattern-craft

Architect composite UI patterns for forms, navigation, data displays, and layouts.

Updated Aug 23, 2026

Search Tags:#layout #navigation #forms #pattern #ui-patterns #design-systems #composite-ui

Ready to run

npx skills add https://github.com/olzn/system-craft --skill pattern-craft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pattern-craft
Source: https://github.com/olzn/system-craft/tree/main/pattern-craft
Command: npx skills add https://github.com/olzn/system-craft --skill pattern-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pattern Craft helps teams design cohesive features by guiding how to assemble components into meaningful patterns across forms, navigation, data displays, feedback, and layouts.

Core Features & Use Cases

Compose form patterns (validation timing, error handling, multi-step flows).
Define navigation structures (sidebar, top nav, breadcrumbs, deep linking) and responsive adaptations.
Assemble data displays (tables, lists, cards) with empty/loading/error states and interactive sorting/filtering.
Specify feedback mechanisms (toasts, inline messages, banners, confirmations, progress) and optimistic updates.
Outline layout strategies (sidebar + main, dashboards, density, and responsive reflow).

Quick Start

Design a dashboard by combining a multi-step form pattern with a navigation pattern and data-display pattern.

Frequently Asked Questions about pattern-craft

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

FAQPage Schema

How do I design composite UI patterns for complex product interfaces?▼

Composite UI patterns combine multiple components into coherent features like forms, navigation, and data displays. You structure them by specifying accessibility, responsive behavior, and consistency guidelines to ensure components interact seamlessly across product interfaces.

What is the best way to structure multi-step form patterns with validation and error handling?▼

Multi-step form patterns require defining validation timing, error handling, and flow progression. You compose these by assembling form components into a sequence that guides users through data entry while maintaining accessibility and consistency guidelines.

How do I assemble data display patterns with empty, loading, and error states?▼

Data display patterns for tables, lists, and cards must include empty, loading, and error states alongside interactive sorting and filtering. You assemble these by combining display components with state-specific feedback mechanisms to ensure coherent data interaction.

Can I use pattern composition for responsive navigation structures like sidebars and breadcrumbs?▼

Navigation patterns support sidebar, top nav, breadcrumbs, and deep linking structures. You define them by assembling navigation components and specifying responsive adaptations that maintain accessibility and consistency across different viewport sizes.

When should I apply composite UI patterns instead of building individual components?▼

Apply composite UI patterns when assembling multiple components into cohesive features like dashboards or multi-step forms. Evaluate trade-offs by considering accessibility requirements, responsive behavior needs, and consistency guidelines to determine if pattern composition adds value over standalone components.

How do I specify feedback mechanisms like toasts and inline messages for optimistic updates?▼

Feedback mechanisms include toasts, inline messages, banners, confirmations, and progress indicators for optimistic updates. You specify these by assembling feedback components into patterns that provide clear user communication while maintaining accessibility and consistency across the interface.