skills.rest
KRISHNA0R
KRISHNA0RCOMMUNITY
Explore all skills by this author →
GitHub

ui-pattern

Assemble reusable UI patterns from StyleSeed primitives with dynamic props.

25|6|Updated Apr 20, 2026
Search Tags:#design-system#ui-components#pattern-library#ui-patterns#styleseed
One-click install
npx skills add https://github.com/KRISHNA0R/PORTFOLIOv2 --skill ui-pattern-krishna0r
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-pattern
Source: https://github.com/KRISHNA0R/PORTFOLIOv2/tree/main/.agents/skills/ui-pattern
Command: npx skills add https://github.com/KRISHNA0R/PORTFOLIOv2 --skill ui-pattern-krishna0r

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reusable UI sections reduce markup duplication across pages, enabling consistent design and easier maintenance by composing patterns from StyleSeed primitives.

Core Features & Use Cases

  • Build patterns such as card lists, grids, two-column layouts, form sections, ranking blocks, and chart wrappers using existing StyleSeed primitives.
  • Expose a clean API through props so patterns can be reused with varying content and data.
  • Integrate with design tokens for spacing, typography, and color to maintain a cohesive look across pages.

Quick Start

Create a new UI pattern using the StyleSeed primitives and mount it in your page layout.

Frequently Asked Questions about ui-pattern

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

FAQPage Schema
How do I build reusable UI patterns from existing design system primitives?▼

Build reusable UI patterns by assembling existing design system primitives from components/ui and components/patterns, exposing dynamic props to reduce ad hoc markup duplication across pages.

How do I maintain consistent spacing and typography across repeating card grids and lists?▼

Maintain consistent spacing and typography across repeating card grids and lists by integrating composed UI patterns with central design tokens for color and layout.

Can I use StyleSeed primitives to create form sections and ranking blocks for dashboards?▼

Yes, you can use StyleSeed primitives to create form sections, ranking blocks, and chart wrappers for dashboards, ensuring consistent layout and styling across content-rich sections.

What is the best way to reduce ad hoc markup duplication across landing pages?▼

The best way to reduce ad hoc markup duplication across landing pages is to compose reusable UI patterns from existing primitives and expose a clean API through dynamic props.

Do I need existing UI components to start creating a pattern library?▼

Yes, you need existing UI components in components/ui and components/patterns to consume as primitives, which are then assembled into reusable sections to maintain design tokens.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
jiaiyanjiaiyan
21

element-plus-design-layout

Design responsive Element Plus layouts with a 24-column grid system.

Community
Intermediate
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
aaronjullger-lgtmaaronjullger-lgtm

ui-primitive-consolidation

Consolidate scattered UI patterns into reusable primitives across PANaCEa.

Community
Advanced