skills.rest
open-circle
open-circleOFFICIAL
Explore all skills by this author →
Website𝕏@opencircle_devGitHub

repo-website-integration-guide-create

Creates Formisch integration guides for UI component libraries on the documentation website.

1.2k|33|Updated Apr 5, 2025
Search Tags:#mdx#form validation#Documentation#Component Library# accessibility#formisch#integration guide
One-click install
npx skills add https://github.com/open-circle/formisch --skill repo-website-integration-guide-create
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: repo-website-integration-guide-create
Source: https://github.com/open-circle/formisch/tree/main/.agents/skills/repo-website-integration-guide-create
Command: npx skills add https://github.com/open-circle/formisch --skill repo-website-integration-guide-create

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing documentation that wires Formisch form fields to third-party UI component libraries (shadcn/ui, Mantine, Chakra UI) is error-prone: component APIs differ per library, accessibility wiring is easy to get wrong, and unverified snippets break for readers. This Skill enforces a verified, consistent structure for every integration guide on the Formisch website.

Core Features & Use Cases

  • Standardized guide structure: Defines the exact MDX file location, menu registration, section order, canonical login schema, and cross-linking rules for every integration guide.
  • Field contract mapping: Provides per-framework tables (React, Vue, Svelte, Qwik, Solid, Preact, Angular, React Native) mapping Formisch field props, setters, and lifecycle handlers to component-library equivalents.
  • Mandatory verification workflow: Requires installing the target library, typechecking and production-building every example, and browser-testing labels, errors, focus, and submission before publishing.
  • Use Case: A maintainer wants to document how to use Formisch with Chakra UI in React. The Skill dictates the route, the wiring patterns for native-forwarding versus controlled components, accessibility requirements, and the verification checklist to follow.

Quick Start

Create a Formisch integration guide for the shadcn/ui component library in the React docs following the required structure and verification steps.

Frequently Asked Questions about repo-website-integration-guide-create

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

FAQPage Schema
How do I add a Formisch integration guide for a UI component library?▼

Create an MDX file at website/src/routes/(docs)/{framework}/guides/(integration-guides)/{library-slug}/index.mdx, register it in menu.md under the Integration guides heading, and follow the fixed section order from installation through the component reference and next steps.

How do I connect Formisch fields to controlled components like checkboxes or sliders?▼

Map field.input to the component's value or checked prop, route the component's value callback to the framework's programmatic setter, and forward name, ref, onFocus, and onBlur so touch, blur validation, and focus() keep working.

Does Formisch work with React Native component libraries?▼

Yes, but the integration differs: there is no Form component, field.props only contains ref, onFocus, onBlur, and onChangeText, and custom controls expose focus through useImperativeHandle. Import everything from @formisch/react-native to avoid a second reactive graph.

Why must integration guide examples be verified in a browser before publishing?▼

Component props and event signatures must not be written from memory, so each guide requires installing the library, typechecking and production-building the examples, and browser-testing labels, error association, focus, touch validation, and submission.

What accessibility requirements apply to Formisch integration guide examples?▼

Every labeled control needs a page-unique DOM ID with htmlFor or aria-labelledby, groups need legends tied to the actual radiogroup, and invalid controls need aria-invalid plus aria-errormessage or aria-describedby referencing a stable error ID.

Related Skills

Explore More Software Engineering Skills→
kittnekittne

markdown

Enforce consistent Markdown formatting and structure across documentation.

Community
Intermediate
wikimediawikimedia
7

codex-components

Catalog Codex Vue components and link to their reference documentation.

Official
Intermediate
awfixers-stuffawfixers-stuff

preflight

Automate preflight checks for formatting, GN, presubmit, build, and tests.

Official
Intermediate
avibebuilderavibebuilder
113

docs-seeker

Fetch authoritative, version-aware documentation for libraries and APIs.

Official
Advanced