Build a headless CodeMirror 6 JSON editor with schema-aware autocompletion.
npx skills add https://github.com/Develonaut/bnto --skill code-editor-expert
Please help me install this Agent Skill. Skill: code-editor-expert Source: https://github.com/Develonaut/bnto/tree/main/.claude/skills/code-editor-expert Command: npx skills add https://github.com/Develonaut/bnto --skill code-editor-expert
Designs a production-grade CodeMirror 6 JSON editor that lets developers build robust, testable in-browser editors with headless capabilities, schema-aware autocomplete, and command-driven workflows.
Instantiate the headless CodeMirror 6 JSON editor with a sample document to begin editing and testing features.
High-intent search queries and answers about installing and using this skill.
You can build a headless CodeMirror 6 JSON editor by instantiating an EditorState without attaching it to a DOM element, enabling testable in-browser editing and Web Worker execution. It leverages extension composition via facets, state fields, and compartments.
Schema-aware autocompletion integrates JSON schema validation directly into the CodeMirror 6 editor state. This provides context-aware suggestions and validation feedback as users type structured JSON documents.
CodeMirror 6 integrates with React using a dedicated hook pattern that wraps the headless EditorState and dynamic extensions. This provides seamless state synchronization and component lifecycle management.
Slash commands are implemented in CodeMirror 6 using a command registry that triggers template insertion upon typing a slash. This workflow integrates with the editor's extension composition to inject predefined snippets dynamically.
The best way to dynamically compose CodeMirror 6 extensions is by using compartments and facets. This architecture allows you to reconfigure individual extensions at runtime without recreating the entire EditorState.
A headless CodeMirror 6 editor explicitly supports DOM-free testability by operating purely on EditorState. This allows frontend teams to run unit tests for JSON editing logic in Node.js or Web Worker environments.
outfitter-devManage Claude configuration files for MCP servers and environment variables.
samymityConvert, extract, OCR, redact, watermark, sign, and fill PDF forms via the Nutrient DWS Processor API.
buildworksaiEnforce React and TypeScript frontend patterns with TanStack Query and Zustand.
yoanbernabeuIntegrates Monaco Editor into Slidev for interactive live coding blocks with TypeScript or JavaScript.
