Menu
Build or change Folio SimpleForm inputs and extensions: app/inputs classes, SimpleForm::Inputs overrides, register_stimulus wiring, input_controls, custom_html, standalone input JS/Sass assets, and rendered HTML tests.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Folio and host-app testing conventions. Use when adding, changing, debugging, or reviewing tests, test helpers, factories/fixtures, mocks, stubs, ViewComponent tests, JavaScript behavior tests, integration/system coverage, or files under test/ and packs/*/test.
Folio “HTML over wire” JSON APIs: controllers use render_component_json so the response body is JSON with a string "data" key holding rendered ViewComponent HTML; JavaScript uses Folio.Api.apiGet/apiPost and response.data, not pure domain JSON for client-side rendering. Use when adding or changing render_component_json, console/API endpoints that return component fragments, or consumers of response.data as HTML.
JavaScript conventions for Folio: ES6+, StandardJS linting, DOM APIs, Folio.Api fetch wrappers, debounce/throttle, flash events, and when to use Stimulus. Use when writing or editing .js files, adding behavior to components, or when the user asks about JavaScript patterns in Folio.
Folio optional pack boundary and namespace rules. Use when editing files in optional pack directories, adding pack controllers/components/models/lib code, wiring routes to pack code, or moving reusable behavior between a host app, the Folio engine, and an optional pack, including Packwerk verification.
Slim template formatting and best practices for Folio components and views. Use when writing or editing .slim templates, reviewing Slim formatting, or when the user asks about Slim conventions, multi-line attributes, or template structure in Folio.
Folio Stimulus conventions: controller registration, StimulusHelper data attributes, values/targets/actions, and controller file placement. Use when adding JavaScript behavior to a Folio component, wiring data-controller / data-action / data-target, using StimulusHelper in Slim, or writing a new Stimulus controller in Folio or a host app.
| name | folio-simple-form-inputs |
| description | Build or change Folio SimpleForm inputs and extensions: app/inputs classes, SimpleForm::Inputs overrides, register_stimulus wiring, input_controls, custom_html, standalone input JS/Sass assets, and rendered HTML tests. |
Use this when adding or changing SimpleForm input classes, input overrides, or field-level extensions.
app/inputs/*_input.rb class for a new as: input.SimpleForm::Inputs::* overrides or prepends only for cross-cutting
behavior on existing inputs.register_stimulus(..., wrapper: true) when behavior needs the whole
.form-group; it marks the input as the controller input target.stimulus_data, stimulus_action, or
stimulus_target for Stimulus actions, targets, params, values, classes,
and outlets. Include Folio::StimulusHelper in SimpleForm override modules
and pass controller: explicitly when register_stimulus has not set helper
context.options[:custom_html]; append instead of overwriting
when decorating an existing input.input_controls or custom_html, render ViewComponents instead of building
HTML fragments inside the override.f.input :folio_embed_data, as: :embed as the canonical embed UI.
EmbedInput owns the preview and hidden-field JSON serialization. Follow
.skills/folio-embed-data/SKILL.md for its
model and migration guidance.app/assets/javascripts/folio/input/* and
app/assets/stylesheets/folio/input/*, then are required/imported by the
input manifests.f-ai-input and elements like f-ai-input__controls.input_controls, and
custom_html selectors explicit in tests.bundle exec rubocop --autocorrect-all <file_path>.npx standard --fix <file_path>.bundle exec slim-lint <file_path>.