skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

ask-shadcn-settings

Renders schema-driven settings forms for shadcn/ui with commit callbacks and custom field renderers.

74|11|Updated Jul 4, 2024
Search Tags:#typescript#react#tailwind#schema-driven#shadcn#settings form#form renderer
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-shadcn-settings-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-shadcn-settings
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-shadcn-settings
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-shadcn-settings-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building settings pages means wiring up repetitive form controls, persistence callbacks, and pending states by hand. This Skill explains how to use the shadcn-settings package, which renders a complete settings UI from a plain-data field schema while the host app keeps full ownership of where values are stored. ## Core Features & Use Cases - Schema-driven rendering: Declare fields as JSON-serialisable SettingsFieldSchema objects with built-in string, password, textarea, select, and switch types rendered by SettingsList. - Commit semantics and pending states: Text inputs commit on blur while selects and switches commit immediately, with the useCommit hook showing a spinner during async onCommit persistence. - Custom controls and layouts: Register custom field types via the renderers map, choose card/inline/ghost variants, and add deep-link anchors per field. - Use Case: You need an API-key and model-selection settings panel in a React app. Define three field objects, pass getValue and an async onCommit that saves to your backend, and the list renders with labels, links, and save spinners. ## Quick Start Ask the AI to add a settings field or build a settings panel using the shadcn-settings SettingsList component with your field schema and persistence callbacks.

Frequently Asked Questions about ask-shadcn-settings

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

FAQPage Schema
How do I render a settings form from a schema in React?▼

Pass an array of SettingsFieldSchema objects to the SettingsList component from shadcn-settings along with getValue and onCommit callbacks. Each field declares a key, name, type, and optional description, options, and defaults, and the component renders the matching controls.

How do I add a custom field type to shadcn-settings?▼

Pass a renderers map to SettingsList with your component keyed by the custom type name. Your component receives SettingsFieldRenderProps including field, value, onChange, and onCommit; wrap it in the exported FieldShell and use the useCommit hook for pending state.

Why doesn't my text field save in shadcn-settings?▼

Text inputs commit on blur, not on every keystroke, so onCommit only fires when the field loses focus. If you need per-keystroke updates, use the onChange callback, which is the optimistic hook, and reserve onCommit for persistence.

Does shadcn-settings store field values itself?▼

No, shadcn-settings stores nothing; the host application owns persistence through the getValue and onCommit callbacks. Values can live in localStorage, an API, or a config manager, and getValue can return different values per field scope.

Why does the save spinner never clear in my settings form?▼

The spinner clears only when the promise returned by onCommit settles, since useCommit resets in a finally block. If onCommit returns a promise that never resolves or throws outside the awaited call, the pending state persists.

Does shadcn-settings enforce required fields?▼

No, the required property on a field is advisory metadata only and nothing in the package enforces it. Perform validation yourself inside the onCommit callback before persisting values.

Related Skills

Explore More Software Engineering Skills→
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
cameronapakcameronapak
1

bknd-client-setup

Configure the Bknd TypeScript SDK with host URL and localStorage token persistence.

Community
Intermediate
yeohj0710yeohj0710

capacitor-deep-linking

Configure deep links, universal links, and app links in Capacitor apps.

Community
Intermediate
hashabc-comhashabc-com

react-hook-form-zod

Build type-safe React forms with React Hook Form and Zod validation.

Official
Advanced