skills.rest
openchamber
openchamberOFFICIAL
Explore all skills by this author →
GitHub

settings-ui-patterns

Define UI design patterns for OpenChamber settings interfaces.

7.8k|844|Updated Sep 11, 2025
Search Tags:#ui#frontend#design system#components#settings#ux
One-click install
npx skills add https://github.com/openchamber/openchamber --skill settings-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: settings-ui-patterns
Source: https://github.com/openchamber/openchamber/tree/main/.opencode/skills/settings-ui-patterns
Command: npx skills add https://github.com/openchamber/openchamber --skill settings-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides clear guidelines and patterns for creating and modifying user interface components, styling, and visual elements specifically for the Settings sections within the OpenChamber application, ensuring consistency and usability.

Core Features & Use Cases

  • UI Component Styling: Defines typography, layout, and spacing for settings pages and controls.
  • Pattern Library: Offers reusable patterns for segmented buttons, radio lists, checkboxes, and input fields.
  • Use Case: A developer needs to add a new section to OpenChamber's Appearance settings for font customization. This skill provides the exact CSS classes, spacing rules, and component examples to ensure the new controls match the existing UI perfectly.

Quick Start

Apply the 'typography-ui-label text-foreground' class to option labels within compact radio controls.

Frequently Asked Questions about settings-ui-patterns

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

FAQPage Schema
What are the standard UI design patterns for building settings interfaces?▼

To style settings UI components, apply specific CSS classes like 'typography-ui-label text-foreground' to option labels. This ensures controls match the canonical 2026 design principles, maintaining a flat hierarchy and consistent typography across settings pages.

How do I add a new section to the Appearance settings for font customization?▼

Yes, you can use these UI component patterns for compact radio controls and input fields. The guidelines provide reusable structural patterns specifically designed to maintain visual consistency and usability across various settings interface control types.

What are the limitations of using a flat hierarchy in settings UI design?▼

To style settings UI components, apply specific CSS classes like 'typography-ui-label text-foreground' to option labels. This ensures controls match the canonical 2026 design principles, maintaining a flat hierarchy and consistent typography across settings pages.

How do I add a new section to the Appearance settings for font customization?▼

Yes, you can use these UI component patterns for compact radio controls and input fields. The guidelines provide reusable structural patterns specifically designed to maintain visual consistency and usability across various settings interface control types.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
cescraflicescrafli

click-path-audit

Trace user interaction paths to detect UI state mismatches from conflicting changes.

Community
Advanced
djkloopdjkloop

layout

Diagnose UI spacing and prescribe systematic layout fixes.

Community
Intermediate
erichowenserichowens
181

windows-3-1-web-designer

Convert modern web interfaces into Windows 3.1 aesthetics with beveled borders and system-gray palettes.

Community
Advanced