skills.rest
zabiny
zabinyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hal-navigator-patterns

Provide reusable HAL-pattern components and guidance for Klabis frontend pages.

2|2|Updated Sep 20, 2023
Search Tags:#frontend#react#patterns#navigation#hal-patterns#klabis#hal-forms
One-click install
npx skills add https://github.com/zabiny/klabis --skill hal-navigator-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hal-navigator-patterns
Source: https://github.com/zabiny/klabis/tree/main/.claude/skills/hal-navigator-patterns
Command: npx skills add https://github.com/zabiny/klabis --skill hal-navigator-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Providing a standardized set of frontend patterns and components to build Klabis pages that consume HAL-FORMS data, reducing boilerplate and ensuring consistency across projects.

Core Features & Use Cases

  • Reusable architecture patterns for HAL-based pages (Page Component, HalEmbeddedTable, HalFormButton, MultiStepFormModal, HalSubresourceProvider)
  • Clear guidance on integrating HAL templates, forms, subresources, and navigation using the Klabis frontend toolkit
  • Real-world usage examples showing how to compose components to display HAL data and submit HAL-FORMS templates

Quick Start

Create a Klabis page by combining HalEmbeddedTable for collections with HalFormButton and MultiStepFormModal to drive HAL-FORMS templates.

Frequently Asked Questions about hal-navigator-patterns

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

FAQPage Schema
How do I build React frontend pages that consume HAL-FORMS resources?▼

To build React frontend pages for HAL-FORMS resources, you can use standardized patterns like HalEmbeddedTable for collections and MultiStepFormModal to drive templates. This reduces boilerplate and ensures consistency across projects.

What is the best way to display nested HAL subresources in a web application?▼

Displaying nested HAL subresources is handled by the HalSubresourceProvider pattern. It offers composable components to render embedded data and navigate HAL links without writing custom data-fetching logic.

Can I use standard React components to submit HAL-FORMS templates?▼

Yes, you can submit HAL-FORMS templates using the HalFormButton and MultiStepFormModal components. They provide integration guidance for rendering and submitting forms based on HAL templates.

How do I render tables from HAL collections in a React frontend?▼

You can render tables from HAL collections using the KlabisTable and HalEmbeddedTable components. These patterns standardize the display of HAL resources, including nested subresources and navigation across HAL links.

Do I need specific dependencies to implement HAL navigation patterns in my React app?▼

No external dependencies are required to implement HAL navigation patterns, as the Skill relies on reusable components and integration guidelines. You only need a React environment compatible with the Klabis frontend toolkit.

Why does my HAL frontend require boilerplate code for forms and tables?▼

Your HAL frontend requires boilerplate because it lacks standardized frontend patterns. By adopting reusable components like HalFormButton and HalEmbeddedTable, you eliminate repetitive code and ensure consistent HAL resource handling.

Related Skills

Explore More Software Engineering Skills→
zabinyzabiny
2

klabis-assistant

Guides Klabis users through API-driven workflows for membership, events, and reporting.

Official
Advanced
puzzo-devpuzzo-dev

Frappe UI

Provide Vue 3 components and data-fetching utilities for Frappe apps.

Community
Intermediate
junerverjunerver
103

compose-hooks

Provides React-inspired hooks for managing state and side effects in Jetpack Compose Multiplatform projects.

Community
Intermediate
hashimichehashimiche
29

health

Manage hal-health sidecar lifecycle and publish live status snapshots to HAL Plus.

Community
Intermediate