@arqel-dev/fields-advanced (JS)

Load and describe Arqel's eight advanced React inputs for Laravel + Inertia apps.

2|Updated Apr 17, 2026
One-click install
npx skills add https://github.com/arqel-dev/arqel --skill arqel-dev-fields-advanced-js
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: @arqel-dev/fields-advanced (JS)
Source: https://github.com/arqel-dev/arqel/tree/main/packages-js/fields-advanced
Command: npx skills add https://github.com/arqel-dev/arqel --skill arqel-dev-fields-advanced-js

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Arqel's eight advanced React input components are often needed in admin interfaces, but shipping them all upfront bloats bundles and slows initial load times. This Skill bundles those inputs behind lazy loading and provides a unified entry point for AI agents to discover, load, and guide their usage.

Core Features & Use Cases

  • RichTextInput, MarkdownInput, CodeInput, RepeaterInput, BuilderInput, KeyValueInput, TagsInput, WizardInput are exposed as modular, lazily-loaded slots that render rich editing and data-collection widgets.
  • Use cases include building content editors, dynamic page builders, metadata schemas, and multi-step workflows within Laravel + Inertia apps using React.
  • It optimizes performance by loading heavy dependencies only when needed, while preserving type-safety and overridable components.

Quick Start

Install the fields-advanced package and import '@arqel-dev/fields-advanced/register' to enable all eight advanced inputs.

Frequently Asked Questions about @arqel-dev/fields-advanced (JS)

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

FAQPage Schema
How do I lazily load advanced React inputs like rich text editors in a Laravel Inertia app?

To lazily load advanced React inputs in a Laravel Inertia app, import the '@arqel-dev/fields-advanced/register' module to expose eight modular slots including RichTextInput. This enables on-demand loading of heavy form widgets without bloating your initial bundle size.

What is the best way to build a dynamic page builder using React for a Laravel backend?

Building a dynamic page builder using React for a Laravel backend is simplified by using the BuilderInput component. It provides a lazily-loaded slot that renders data-collection widgets, preserving type-safety while allowing host apps to override defaults through a shared FieldRegistry.

Does this advanced React inputs package support custom component overrides?

Yes, the advanced React inputs package supports custom component overrides. It provides stable integration points with a shared FieldRegistry, allowing host applications to override default rendering behavior for widgets like CodeInput and MarkdownInput.

Can I use tags and key-value inputs to manage metadata schemas in React?

You can use TagsInput and KeyValueInput to manage metadata schemas in React. These advanced inputs are exposed as modular, lazily-loaded slots that render data-collection widgets, optimizing performance by loading dependencies only when needed.

Why does shipping all rich text and code editor components upfront slow down my React app?

Shipping all rich text and code editor components upfront bloats bundles and slows initial load times due to heavy dependencies. This package solves the problem by bundling inputs like CodeInput behind lazy loading for on-demand rendering.

How do I set up multi-step workflow inputs in a React render layer?

To set up multi-step workflow inputs in a React render layer, import '@arqel-dev/fields-advanced/register' to enable WizardInput. This exposes a lazily-loaded slot for dynamic form rendering within your application architecture.