skills.rest
firstloophq
firstloophqOFFICIAL
Explore all skills by this author →
GitHub

ui-design

Document UI design patterns and component guidelines for Nomendex.

9|3|Updated Jan 13, 2026
Search Tags:#theming#accessibility#frontend#ui-design#design-patterns#dialog#nomendex
One-click install
npx skills add https://github.com/firstloophq/nomendex --skill ui-design-firstloophq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/firstloophq/nomendex/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/firstloophq/nomendex --skill ui-design-firstloophq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nomendex UI lacks a shared set of patterns and guidelines, leading to inconsistent dialogs, layouts, and interactions across features. This Skill consolidates design tokens, layout rules, and interaction patterns to streamline UI work for designers and developers.

Core Features & Use Cases

  • Jumbo Dialogs: full-viewport dialogs (size=jumbo) for complex workflows such as multi-pane layouts and advanced search interfaces.
  • Theming and tokens: consistent surfaces, borders, and text colors drawn from a central theme to ensure visual coherence.
  • Keyboard navigation and accessibility: patterns for focus management, arrow-key navigation, and accessible content ordering.
  • Two-column and responsive layouts: proven structures for combining lists, previews, and controls in adaptable widths.

Quick Start

Open a jumbo dialog using the CommandDialogProvider to achieve a full-viewport UI pattern.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I establish consistent UI design patterns for the Nomendex interface?▼

To establish consistent UI design patterns for Nomendex, you use this Skill to consolidate design tokens, layout rules, and interaction patterns, ensuring visual coherence across dialogs and layouts.

What is a jumbo dialog and when do I need it for frontend workflows?▼

A jumbo dialog is a full-viewport dialog used for complex frontend workflows like multi-pane layouts and advanced search interfaces. You need it when standard dialogs cannot accommodate intricate content combinations.

How do I manage keyboard navigation and accessibility in Nomendex UI components?▼

You manage keyboard navigation and accessibility by applying documented patterns for focus management, arrow-key navigation, and accessible content ordering to ensure usable Nomendex UI components.

Does this Skill provide guidelines for theming and responsive two-column layouts?▼

Yes, this Skill provides theming guidelines using central tokens for surfaces and borders, alongside proven structures for two-column and responsive layouts to combine lists, previews, and controls.

What's the best way to implement reusable UI components without visual inconsistency?▼

The best way to implement reusable UI components without visual inconsistency is to align with a centralized UI design system that documents design tokens, component guidelines, and layout best practices.

Are there limitations to using design tokens for Nomendex UI theming?▼

The primary limitation is that design tokens for Nomendex UI theming must be drawn from the central theme to maintain visual coherence, restricting arbitrary color or border values outside the defined system.

Related Skills

Explore More Design & Creative Skills→
maneeshanifmaneeshanif

shadcn-ui-setup

Install and configure Shadcn/ui components in a Next.js project.

Community
Advanced
dereekbdereekb
13

DBX Web Layout Components

Implement DBX Web layout components in Angular projects.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
wzyxdwllwzyxdwll
14

extract

Identify reusable UI patterns and design tokens for consolidation into a centralized design system.

Community
Intermediate