create-setting-item

Name: create-setting-item
Availability: InStock
Author: Graphif

Guide creation of setting items in the Project Graph application.

4.3k|279|Updated Aug 23, 2024

Search Tags:#development #localization #configuration #settings #project graph #feature flag

Ready to run

npx skills add https://github.com/graphif/project-graph --skill create-setting-item

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-setting-item
Source: https://github.com/graphif/project-graph/tree/main/.cursor/skills/create-setting-item
Command: npx skills add https://github.com/graphif/project-graph --skill create-setting-item

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding new configuration options and features to the Project Graph application by guiding users through the necessary code and configuration changes.

Core Features & Use Cases

Guided Schema Definition: Learn how to define new settings using Zod types in Settings.tsx.
Icon Integration: Understand how to associate icons with new settings in SettingsIcons.tsx.
Localization Support: Add translated text for new settings across multiple languages.
Categorization: Organize new settings within the application's settings UI by adding them to relevant groups in settings.tsx.
UI Component Usage: Learn how to use the SettingField component for rendering settings.
Accessing Settings: Understand how to read, write, and watch setting values in your code.
Use Case: A developer needs to add a new feature flag for a beta feature. This skill will guide them through defining the flag in the schema, adding a UI element, localizing its text, and placing it in the correct category within the settings menu.

Quick Start

Follow the steps in this skill to add a new setting item to the Project Graph application.

Frequently Asked Questions about create-setting-item

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

FAQPage Schema

How do I add a new configuration setting to a React application?▼

To add a new configuration setting, you define the schema using Zod types, associate an icon, add localization in YAML files, categorize it in the settings UI, and render it using the SettingField component.

How do I implement localization for new settings in YAML files?▼

You implement localization for new settings by adding translated text entries in YAML files, ensuring the new configuration options are discoverable and properly localized across multiple languages within the application's UI.

What is the process for defining a feature flag schema in Settings.tsx?▼

Defining a feature flag schema in Settings.tsx involves using Zod types to structure the new setting, which validates the configuration data and integrates the feature flag into the Project Graph application's settings system.

How do I categorize and render a new setting in the settings UI?▼

You categorize and render a new setting by adding it to relevant groups in settings.tsx and using the SettingField component to display the configuration option, ensuring it is properly integrated into the application's settings UI.

Can I use Zod types to validate feature flags in Project Graph?▼

Yes, you can use Zod types to validate feature flags in Project Graph by defining the schema in Settings.tsx, which ensures the configuration data is correctly typed and validated before integration into the settings UI.

How do I read and watch setting values in my code after adding them?▼

After adding new settings, you can read, write, and watch setting values in your code to access the configuration data dynamically, ensuring the application responds to configuration changes appropriately.