New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Settings UI Patterns

by openchamber in openchamber/openchamber

A skill your agent uses when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior.

MITAuto-check passedFrontend & Design

Install Settings UI Patterns

skills CLI
$ npx skills add openchamber/openchamber --skill settings-ui-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install openchamber/openchamber settings-ui-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/settings-ui-patterns .claude/skills/settings-ui-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
settings-ui-patterns
GitHub stars
11k
Token cost
~1.5k tokens
SKILL.md length
740 words
Files
4 (incl. references)
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior.

  • Modifying OpenChamber Settings pages
  • SKILL.md covers Required Companion Skills, Canonical Direction, Load References By Task and Quick Primitive Selection, plus 4 more sections
  • Calls bun
  • Configuration surfaces

What it does

Settings UI Patterns is an agent skill from openchamber/openchamber. Use when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/controls.md`, `references/layout.md` and `references/search.md`).

It sits in Frontend & Design. The repository describes itself as: Agentic Development Environment based on OpenCode AI agent. The licence is MIT.

When your agent uses it

  • Modifying OpenChamber Settings pages
  • Configuration surfaces
  • Responsive Settings layouts
  • Settings search behavior

Example prompts

  • “/settings-ui-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit eabe419. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Settings UI Patterns loads about 1.5k tokens when it runs, and up to ~4.4k if it reads all its reference files. Until then it costs about 45 tokens; SKILL.md has 740 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~45
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from openchamber/openchamber at commit eabe419, republished under its MIT licence (© openchamber). 740 words, ~1,526 tokens.

Download SKILL.mdSave it as .claude/skills/settings-ui-patterns/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
settings-ui-patterns
description
Use when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior.

Settings UI Patterns

Required Companion Skills

  • Load theme-system for colors, buttons, icons, and visual states.
  • Load locale-ui-patterns for every visible string, tooltip, placeholder, and accessible label.
  • Load ui-api-decoupling when a setting reads/writes runtime data or adds a capability, and write the surface list from its Name The Surfaces Before Editing step before adding or moving a settings page: a page that exists on desktop and is unreachable on a phone is the common way this goes wrong.

When examples conflict, shared component/theme and localization contracts win. Stop on unresolved material conflicts.

Canonical Direction

Settings are built from the shared primitives in packages/ui/src/components/sections/shared/SettingsSection.tsx, SettingsPageLayout.tsx, and SettingsInfoHint.tsx. Never hand-roll page chrome, section headers, field rows, checkbox rows, or info tooltips with raw divs — use the primitives, and extend them (in the shared file) when a new shape is genuinely missing.

  • Flat hierarchy through spacing and typography; no boxed backgrounds or row chrome. Card grids are the one exception, for browse pages (see references/layout.md).
  • Secondary helper text is hidden behind an info icon (info prop) by default; the default view stays quiet.
  • Controls have one standard size (h-9 / select size="settings") and capped widths — no full-bleed inputs.
  • Layouts respond to the settings pane width via container queries (@xl: / @3xl:), never viewport sm:/lg: breakpoints (the pane is much narrower than the viewport inside the dialog).
  • Checkbox/radio state comes before labels; selected states are subtle and never shift layout.

Load References By Task

TaskRequired reference
Page skeleton, sections, hierarchy, nav placement, spacing, columns, responsivenessreferences/layout.md
Field rows, checkboxes, radios, chips, selects, inputs, numeric steppers, info hintsreferences/controls.md
Adding/moving controls, pages, availability, anchors, or search entriesreferences/search.md

Load each reference whose task branch applies; reference loading is complete when layout, control, and search implications are each classified.

Quick Primitive Selection

NeedShared primitive
Page wrapper (title, description, save status, scrolling, @container)SettingsPageLayout
Titled block with dividerSettingsSection (divider={false} for the first one)
Label left / control rightSettingsFieldRow
Label above control (two-column cells, wide controls)SettingsStackedField
BooleanSettingsCheckboxRow
Mutually exclusive listSettingsRadioGroup + SettingsRadioOption
Short segmented optionsSettingsChipGroup
Sub-cluster with a quiet L3 title inside a sectionSettingsControlGroup
Two-column area on wide panesSettingsTwoColumn
Helper text on demand (hover + tap)info prop or SettingsInfoHint

Do not introduce raw <Tooltip>-based info icons, direct Remixicon components, hardcoded user-facing strings, or one-off color/button systems. New icons: reference a Remix icon name in code, then run bun run icons:generate to add it to the sprite.

Show full SKILL.md (337 more words)Show less

Description Policy (info hints)

  • Explanatory prose goes behind the info icon via the info prop by default.
  • An info hint is one or two short sentences that add what the label or summary does not say. It names no list of every action and carries no caveat that stopped being true (for example "applies after OpenCode restarts" for tools that now apply live).
  • When labels alone cannot explain the differences, consequences, or conditions needed to choose a setting, use a title, a visible description, then checkbox or radio controls. Option lists whose labels already read as complete choices (large-text paste modes, send shortcut) keep the explanation behind info even when it carries an exception. Having multiple options or a group title alone does not require a description; see references/controls.md for composition.
  • Stays visible: security/data-loss warnings, destructive consequences, required syntax/placeholder lists the user reads while typing, dynamic status, empty states, validation errors, active-flow wizard instructions.
  • Mixed text: keep the warning sentence visible, move the explanation to info.

Save Feedback

SettingsPageLayout showSaveStatus renders the shared quiet indicator: success is silent, "Saving…" appears only past ~500 ms, failures show "Save failed". Anything persisted through updateDesktopSettings reports automatically; page-specific APIs must call reportSettingsSaveState from @/lib/persistence. Never add per-page save badges or success toasts for ordinary setting writes.

Settings Search Contract

Every stable Settings control addition or move must consider search in the same change:

  • explicit registry item in packages/ui/src/lib/settings/search.ts when searchable;
  • matching data-settings-item anchor (primitives accept settingsItem);
  • localized title/description keys;
  • availability matching actual render conditions;
  • when a control moves to another page, update the item's page too.

Dynamic entity rows normally are not indexed. Load references/search.md for exact rules.

Completion Criteria

  • Built from shared primitives; no ad-hoc page/section/row markup.
  • Description placement follows the policy above; warnings/syntax/status remain visible.
  • Container-query (@xl:/@3xl:) responsiveness — no viewport breakpoints in pane content.
  • Controls use the standard size and width caps; no stretched full-width inputs.
  • Localized visible and accessibility text everywhere.
  • Search registry, anchor, page, localization, and availability agree.
  • Nearby Settings precedent and relevant tests remain consistent.

© openchamber, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in .agents/skills/settings-ui-patterns of openchamber/openchamber.

  • SKILL.md
  • references/controls.md
  • references/layout.md
  • references/search.md

Open the folder on GitHubat commit eabe419

Compare with similar skills

Settings UI Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Settings UI Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Settings UI Patterns this skillopenchamber/openchamber11k—~1.5kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from openchamber/openchamber

All 20 skills in this repo

  • Theme System

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber UI components, styling, colors, buttons, visual states, themes, or icons.

    11k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • UI API Decoupling

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber shared UI data access, OpenCode SDK calls, RuntimeAPIs, runtime fetch/auth/URLs, authenticated browser assets, bridges/proxies, runtime…

    11k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Drag To Reorder

    openchamber/openchamber

    A skill your agent uses when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.

    11k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Locale UI Patterns

    openchamber/openchamber

    A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…

    11k GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Performance Engineering

    openchamber/openchamber

    A skill your agent uses when implementing or reviewing code on interaction, render, event, polling, synchronization, list-processing, store-selector, cache, indexing, or high-volume data paths; when…

    11k GitHub stars~4.9k tokensUpdated today
    Auto-check passed

  • Serve Sim

    openchamber/openchamber

    A skill your agent uses when working with the OpenChamber iOS Simulator app without opening Xcode - boot/install/launch the Capacitor iOS app, start a browser stream, tap/type/gesture/rotate…

    11k GitHub stars~619 tokensUpdated today
    Auto-check passed

Categories

Questions about Settings UI Patterns

What does Settings UI Patterns do?

A skill your agent uses when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior. Settings UI Patterns is an agent skill from openchamber/openchamber. Use when creating or modifying OpenChamber Settings pages, dialogs, controls, configuration surfaces, responsive Settings layouts, or Settings search behavior.

When should I use Settings UI Patterns?

Settings UI Patterns fits situations like: modifying OpenChamber Settings pages; configuration surfaces; responsive Settings layouts; settings search behavior.

How do I install Settings UI Patterns in Claude Code?

Run `npx skills add openchamber/openchamber --skill settings-ui-patterns -a claude-code`. Or copy the skill folder (.agents/skills/settings-ui-patterns in openchamber/openchamber) into .claude/skills/settings-ui-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Settings UI Patterns in Codex?

Run `npx skills add openchamber/openchamber --skill settings-ui-patterns -a codex`. Or copy the skill folder (.agents/skills/settings-ui-patterns in openchamber/openchamber) into .agents/skills/settings-ui-patterns in your project. Codex loads it when a task matches its description.

Can I use Settings UI Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add openchamber/openchamber --skill settings-ui-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/settings-ui-patterns, .gemini/skills/settings-ui-patterns, .github/skills/settings-ui-patterns and .opencode/skills/settings-ui-patterns in your project.

What does Settings UI Patterns need to run?

Going by SKILL.md and its folder, Settings UI Patterns needs the command-line tools its instructions call (bun).

Does Settings UI Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Settings UI Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Settings UI Patterns use?

Settings UI Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Settings UI Patterns use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9k tokens, read only when the agent opens those files.

What are the alternatives to Settings UI Patterns?

Skills that share tags, products or a category with Settings UI Patterns: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Settings UI Patterns?

openchamber (a GitHub organization) maintains it in openchamber/openchamber, which has 11,259 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 8, 2026.

Source: openchamber/openchamber on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.