skills.rest
borderux
borderuxOFFICIAL
Explore all skills by this author →
WebsiteGitHub

recursica-skill-panels-modals

Applies house rules for choosing between panels, modals, and pages in enterprise web applications.

1|Updated May 29, 2026
Search Tags:#design rules#modal#dialog#drawer#panel#enterprise ui#responsive behavior
One-click install
npx skills add https://github.com/borderux/recursica-knowledge --skill recursica-skill-panels-modals-borderux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recursica-skill-panels-modals
Source: https://github.com/borderux/recursica-knowledge/tree/main/skills/design-rules/recursica-skill-panels-modals
Command: npx skills add https://github.com/borderux/recursica-knowledge --skill recursica-skill-panels-modals-borderux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether a task belongs in a panel, a modal, or a dedicated page is a recurring design judgment that teams often get wrong — stacking modals, shading panels, or cramming scrolling content into narrow surfaces. This Skill encodes the Recursica house rules so every surface decision follows the same consistent logic. ## Core Features & Use Cases - Surface selection rules: A decision table based on mode and context dependence determines whether work belongs in a modal, panel, or page. - Geometry and behavior constraints: Rules covering edge anchoring, one side at a time, no horizontal scrolling, no nested panels, and no stacked modals. - Responsive and focus behavior: Panels become pages below the tablet breakpoint, modals trap focus while panels do not, and unsaved-change prompts protect dirty forms. - Use Case: When adding an edit form for a table row, use this Skill to confirm it belongs in a modal or panel rather than inline, and to verify dismissal, stacking, and breakpoint behavior. ## Quick Start Ask the AI to review whether a new editing workflow should be a panel, modal, or page using the Recursica panels and modals rules.

Frequently Asked Questions about recursica-skill-panels-modals

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

FAQPage Schema
How do I decide between a panel, modal, or page in a web app?▼

Choose by mode and context dependence. Use a modal when the user must interact or decide before continuing, a panel when the work depends on the page beside it, and a page when the work needs no page context or induces scrolling.

What is the difference between a panel and a modal?▼

A modal is a mode: it obscures the page and blocks interaction with the rest of the application. A panel is semi-modal and non-exclusive, so the user can still see and work with the page behind it, and it must never have a scrim or overlay.

Can I stack modals or nest panels inside each other?▼

Never stack a modal on another modal; a reused confirmation may only replace the open modal. Panels may stack over one another on the same side, but a panel must never contain another panel, and more than two stacked panels requires approval.

Should a drawer have an overlay or scrim behind it?▼

No. A drawer is a panel, and a panel must never draw a shader, scrim, or tint behind it. Libraries like Mantine and MUI add overlays by default, and the house rule overrides that default.

What happens to panels and modals on mobile or small screens?▼

Below the tablet breakpoint every panel opens as a page, and work-bearing modals become pages too. Confirmation modals stay modals at every width, and platform-native surfaces like the iOS sheet are forbidden.

When should closing a panel prompt about unsaved changes?▼

Prompt only when the user entered data into a form and never saved it, using a confirmation modal. Do not prompt on every close, since interrupting the user for an untouched panel is unwarranted.

Related Skills

Explore More Design & Creative Skills→
KRISHNA0RKRISHNA0R
25

ux-flow

Plan and analyze UX flows with ASCII diagrams and screen inventories.

Community
Intermediate
AradotsoAradotso
3

interface-design-system

Enforce consistent UI patterns via tokenized rules in system.md.

Official
Intermediate
RoleModelRoleModel
6

form-auto-save

Automatically save form input changes with a configurable debounce delay.

Official
Intermediate
coco-decoco-de

coui-hover-card

Create hover-triggered information cards with CoUI components in Flutter and Web applications.

Official
Basic