ui-plugin-guidelines

Identify UI library compatibility with the canard/schema-form plugin.

1|Updated Nov 13, 2024

Search Tags:#accessibility #compatibility #guidelines #project-structure #renderer #schema-form #ui-plugin

Ready to run

npx skills add https://github.com/vincent-kk/albatrion --skill ui-plugin-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-plugin-guidelines
Source: https://github.com/vincent-kk/albatrion/tree/main/.claude/skills/ui-plugin-guidelines
Command: npx skills add https://github.com/vincent-kk/albatrion --skill ui-plugin-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

이 스킬은 UI 라이브러리와 canard/schema-form 플러그인 간의 호환성 문제를 체계적으로 해결하기 위한 가이드를 제공합니다. 다양한 UI 컴포넌트와 렌더러 간의 매핑을 검증하고, 프로젝트 구조 설계 및 접근성 요구사항에 대한 실무 가이드를 제공합니다.

Core Features & Use Cases

호환성 매핑과 우선순위 정의: 각 UI 라이브러리의 컴포넌트 매핑을 표준화하고 직접/커스텀/Fallback 등급으로 분류합니다.
렌더러 컴포넌트 가이드: FormGroup, FormLabel, FormInput, FormError 등 렌더러의 계약과 구현 패턴을 제시합니다.
프로젝트 구조 설계: 권장 디렉토리 구조, 파일 네이밍 규칙, import/export 패턴을 제공합니다.
접근성 체크리스트: ARIA 속성 및 키보드 네비게이션 가이드를 포함한 WCAG 친화성 구현 지침을 다룹니다.

Quick Start

다음 명령으로 즉시 시작 지침을 얻을 수 있습니다: AI에게 UI-플러그인 가이드를 위한 호환성 매트릭스와 프로젝트 구조 초안을 생성해 달라는 간단한 명령을 제공합니다.

Frequently Asked Questions about ui-plugin-guidelines

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

FAQPage Schema

How do I integrate MUI or Ant Design with a schema-form renderer?▼

Schema-form renderer compatibility categorizes UI component mappings into direct, custom, and fallback tiers. This classification standardizes how libraries like MUI or Ant Design interact with renderer contracts to ensure consistent integration.

What is the recommended project structure for a schema-form UI plugin?▼

The recommended project structure for a schema-form UI plugin defines specific directory layouts, file naming rules, and import/export patterns. This structure ensures reliable plugin implementation and maintainable renderer component architecture.

How do I ensure accessibility compliance when building schema-form renderers?▼

To ensure accessibility compliance in schema-form renderers, implement an accessibility checklist covering ARIA attributes and keyboard navigation. This guarantees WCAG-friendly interactions across all mapped UI components.

Does Chakra UI or Mantine work with the canard/schema-form plugin?▼

Chakra UI and Mantine are supported by the canard/schema-form plugin. The plugin provides compatibility matrices that define their component mapping grades and specific configuration steps for reliable renderer integration.

What frontmatter requirements are needed for UI plugin implementation?▼

UI plugin implementation requires concrete frontmatter definitions and component interfaces. These specifications establish the necessary configuration steps and contracts to enable automated checks and reliable plugin functionality.

What are the limitations of using fallback mappings for Headless UI components?▼

Fallback mappings for Headless UI components indicate a lack of direct compatibility with schema-form renderer contracts. This means custom implementations are required to bridge gaps and maintain full functionality and accessibility.