skills.rest
lgoodcode
lgoodcodeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-patterns

Codify reusable React UI patterns for consistent interfaces.

Updated Apr 9, 2026
Search Tags:#frontend#react#navigation#ui-patterns#tooltip#jsx-performance
One-click install
npx skills add https://github.com/lgoodcode/instamolt-seeder --skill ui-patterns-lgoodcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/lgoodcode/instamolt-seeder/tree/main/.claude/skills/ui-patterns
Command: npx skills add https://github.com/lgoodcode/instamolt-seeder --skill ui-patterns-lgoodcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

InstaMolt UI patterns establish a centralized, consistent approach for building React interfaces, ensuring uniform text color usage, accessible tooltips, predictable navigation, and reusable component conventions across the codebase.

Core Features & Use Cases

  • Text Color Hierarchy: standardizes text color utilities (text-foreground, text-copy, text-copy-subtle, text-copy-faint) to ensure typographic consistency across components.
  • Tooltips: enforces using the Tooltip component instead of HTML title attributes to improve accessibility and UX consistency.
  • Navigation & Buttons: prescribes internal routing with next/link and a shared Button component to ensure consistent interactions, styles, and focus management.
  • JSX Performance: guidelines to avoid inline object creation and memoize dynamic styles to improve rendering performance.
  • Use Case: when adding a new page or UI component, reuse the shared primitives and follow the documented patterns to maintain a cohesive interface.

Quick Start

Implement new React UI components by importing and using the shared Button and Tooltip components and by applying Next.js Link for internal navigation.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
How do I standardize text color hierarchy in React components?▼

Implement accessible tooltips in React by using a shared Tooltip component instead of standard HTML title attributes, ensuring consistent UX and accessibility across new pages and UI components.

How do I handle internal navigation in a Next.js React application?▼

Handle Next.js internal navigation by using the next/link component for routing and a shared Button primitive, ensuring predictable interactions, consistent styling, and proper focus management across the application.

How do I prevent inline style objects from hurting React JSX performance?▼

Prevent JSX performance issues by memoizing dynamic styles and avoiding inline object creation during component rendering, which stops unnecessary re-renders and improves React frontend performance.

What are the best practices for creating new React UI components?▼

Best practices for new React UI components involve reusing shared UI primitives, applying consistent text color hierarchy, enforcing accessible tooltips, and following JSX performance guidelines to maintain a cohesive interface.

Related Skills

Explore More Design & Creative Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
wredziowredzio

using-ui-components

Compose complex UIs from predefined UI primitives in the components/ui package.

Community
Basic
mauroviverosmauroviveros

tailwind-css-patterns

Automate Tailwind CSS pattern implementation for React, Vue, and Svelte projects.

Community
Intermediate
roanbrasilroanbrasil
5

design-systems

Builds W3C-compliant design token systems and accessible component libraries with Storybook documentation.

Community
Advanced