skills.rest
Birdhouse-Labs
Birdhouse-LabsOFFICIAL
Explore all skills by this author →
Website𝕏@birdhouselabsaiGitHub

birdhouse-architecture

Applies SolidJS and Corvu architecture patterns to Birdhouse frontend modal and component layering.

36|5|Updated Feb 27, 2026
Search Tags:#frontend architecture#dialog#solidjs#corvu#reactive patterns#birdhouse#modal layering
One-click install
npx skills add https://github.com/Birdhouse-Labs/birdhouse --skill birdhouse-architecture-birdhouse-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: birdhouse-architecture
Source: https://github.com/Birdhouse-Labs/birdhouse/tree/main/.agents/skills/internal/birdhouse-development/birdhouse-architecture
Command: npx skills add https://github.com/Birdhouse-Labs/birdhouse --skill birdhouse-architecture-birdhouse-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend work in the Birdhouse workspace involves a recursive agent modal stack, nested Corvu dialogs and popovers, and SolidJS reactive ownership rules that are easy to get wrong, causing remounts, broken Escape handling, and z-index layering bugs. ## Core Features & Use Cases - Modal Layering Guidance: Documents the recursive AgentModalStackNode component tree, command palette subdialog nesting, and agent ID snapshotting so dialogs compose correctly. - Corvu Pattern Reference: Captures controlled open state, close-prop configurations, and the solid-dismissible defaultPrevented gate for dialogs and the AgentTypeahead popover. - SolidJS Application Rules: Covers recursive components, document-level listener guards, children-inside-Provider placement, module-level createRoot ownership, and guarded createResource reads. - Use Case: When adding a new agent-scoped dialog to the command palette, load this skill to nest the subdialog inside the target agent modal's JSX tree and snapshot the agent ID, avoiding sibling-dialog Escape bugs. ## Quick Start Load the birdhouse-architecture skill before modifying any modal, popover, or reactive component in the Birdhouse frontend.

Frequently Asked Questions about birdhouse-architecture

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

FAQPage Schema
How do I nest dialogs correctly with Corvu in SolidJS?▼

Render child dialogs inside the parent dialog's JSX subtree rather than as siblings, because Corvu's dismissible-layer model is JSX-based. Sibling dialogs break layer tracking and cause one Escape press to dismiss multiple dialogs.

How do I build a recursive modal stack in SolidJS without remounting?▼

Use a recursive component with a component boundary per level instead of a plain recursive function returning JSX. A plain function remounts every ancestor when a new modal pushes, destroying scroll position and local state.

Why does Escape stop closing my Corvu dialog?▼

solid-dismissible only dismisses on Escape when event.defaultPrevented is false. A document-level keydown listener calling preventDefault() on Escape silently blocks Corvu's dismissal, so avoid preventDefault on Escape in document listeners.

Should I use a Corvu Popover or floating-ui for a typeahead?▼

Use a Corvu Popover with controlled open state, modal={false}, trapFocus={false}, and closeOnOutsidePointer={false}, anchored via Popover.Anchor around the textarea. This keeps the popover mounted when dialogs open above it, preserving finder state.

When should I not read a createResource value directly in SolidJS?▼

Never call resource() without first checking resource.error, because reading a resource in an error state throws. Guard reads in effects and memos with an error check, and use metadata like resource.loading and resource.state freely.

Related Skills

Explore More Software Engineering Skills→
GuicedEEGuicedEE
5

security-best-practices

Load language-specific security rules and generate prioritized remediation steps.

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

popover-api-implementation

Build non-modal overlays with the native Popover API.

Official
Advanced
SjdjdiejdrirhdkjejSjdjdiejdrirhdkjej

anti-duplication

Search endpoints, components, services, and models for existing implementations before writing code.

Community
Advanced
carerecarere
124

react-to-solid

Convert React components to SolidJS using Kobalte/Corvu mappings.

Community
Basic