structured-editor

Create and manage section-based documents with typed React components.

3|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/mattwoodco/skills --skill structured-editor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: structured-editor
Source: https://github.com/mattwoodco/skills/tree/main/skills/structured-editor
Command: npx skills add https://github.com/mattwoodco/skills --skill structured-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires add-shadcn, db, auth, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and management of complex documents by breaking them down into organized, editable sections, improving clarity and collaboration.

Core Features & Use Cases

  • Section-based Editing: Documents are composed of distinct, named sections (e.g., Summary, User Stories, Acceptance Criteria).
  • Rich Content: Each section supports specific data structures and inline editing.
  • Collaboration Features: Includes status badges, annotation support, and versioning.
  • Use Case: Develop a detailed project specification document where each requirement, dependency, and acceptance criterion is a clearly defined, editable section.

Quick Start

Use the structured-editor skill to create a new document with a summary and user stories section.

Frequently Asked Questions about structured-editor

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

FAQPage Schema
How do I build section-based documents with collapsible React components in Next.js?

To build section-based documents with collapsible React components in Next.js, you use a structured editor approach that breaks down complex documents into named, typed sections like summaries and user stories for inline editing and status tracking.

What is the best way to manage structured content and annotations for project specifications?

The best way to manage structured content and annotations for project specifications is to use a section-based document editor. This mechanism organizes requirements, dependencies, and acceptance criteria into editable sections with built-in status badges and versioning support.

Does the structured document editor work with Drizzle ORM and shadcn/ui?

Yes, the structured document editor integrates seamlessly with Drizzle ORM and shadcn/ui. This combination provides a robust development experience for managing typed data structures and rendering collapsible UI components within your application.

Can I track status and add annotations to individual sections of a document?

Yes, you can track status and add annotations to individual document sections. The editor includes built-in collaboration features such as status badges, annotation support, and versioning for each distinct, named section within the document.

Do I need a database and authentication setup to use a section-based document editor?

Yes, you need a database and authentication setup to use a section-based document editor. It requires database, authentication, and shadcn/ui dependencies to manage structured data, support collaboration features, and render the typed React components correctly.

How do I create a new document with a summary and user stories section?

You create a new document by defining specific data structures for a summary section and a user stories section. The editor supports various structured section types, allowing you to instantiate typed, collapsible components for inline editing directly in your application.