skills.rest
archetypeai
archetypeaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

build-pattern

Assemble composite UI patterns from design system primitives into reusable components.

Updated Apr 9, 2026
Search Tags:#design-system#ui-patterns#frontend-patterns#component-library#composite-component#pattern-assembly
One-click install
npx skills add https://github.com/archetypeai/newton-earthquake-demo --skill build-pattern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-pattern
Source: https://github.com/archetypeai/newton-earthquake-demo/tree/main/.claude/skills/build-pattern
Command: npx skills add https://github.com/archetypeai/newton-earthquake-demo --skill build-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Composite UI patterns are often handcrafted, leading to inconsistent designs and duplicated effort. This skill enables building reusable patterns by combining design system primitives, ensuring consistency and faster UI assembly.

Core Features & Use Cases

  • Pattern assembly from primitives: create components that blend multiple primitives into a cohesive widget (e.g., dashboards, forms, sensor cards).
  • Decision guidance: choose between building a new pattern or extending an existing primitive using design-system conventions.
  • Pattern structure and conventions: provides standard structure, props, and rendering guidelines for patterns.

Quick Start

Describe the reusable pattern you want (for example, a dashboard widget combining Card, Button, and Input) and request a ready-to-use scaffold.

Frequently Asked Questions about build-pattern

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

FAQPage Schema
How do I assemble composite UI patterns from design system primitives?▼

Build reusable UI patterns by combining multiple design system primitives like Card, Button, and Input into cohesive widgets such as dashboards or sensor cards. This enforces consistent styling, standard structure, and behavior across web apps.

When should I create a new UI pattern versus extending an existing primitive?▼

Use the pattern decision framework to decide when to create a new composite pattern versus extending an existing design system primitive. This maintains standard structure, conventions, and prevents duplicated effort in your component library.

What is the standard structure and props convention for frontend UI patterns?▼

Standard UI patterns require a consistent structure, defined props, and rendering guidelines established by design system conventions. Following these rules when assembling composite components ensures predictable behavior and styling across web apps.

Can I build dashboard widgets by combining multiple component library elements?▼

Yes, you can build dashboard widgets by blending multiple component library primitives like Cards, Buttons, and Inputs into a single reusable composite component. This pattern assembly approach prevents duplicated effort and ensures design consistency.

What is the best way to avoid inconsistent designs when building composite components?▼

The best way to avoid inconsistent composite components is to assemble them from established design system primitives using a standard structure and conventions. This prevents handcrafted inconsistencies and duplicated effort across your component library.

Related Skills

Explore More Design & Creative Skills→
themadorgthemadorg
6

bedrud-fe-ui-foundation

Standardize React frontend UI with a reusable design system and shadcn/ui primitives.

Official
Intermediate
BWCbewchanBWCbewchan
5

frontend-design

Generate production-grade frontend interfaces with intentional typography, color, and motion.

Community
Advanced
bmslabsbmslabs

vue-form-input-patterns

Map data types to Vue 3 form components with Zod validators.

Official
Advanced
samcannassamcannas

extract

Extract reusable UI components and design tokens into a unified design system.

Community
Intermediate