skills.rest
coco-de
coco-deOFFICIAL
Explore all skills by this author →
GitHub

coui-resizable

Create resizable split panel layouts in Flutter and Web applications with CoUI components.

Updated Aug 27, 2026
Search Tags:#ui#layout#flutter#web#panels#resizable
One-click install
npx skills add https://github.com/coco-de/skills --skill coui-resizable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coui-resizable
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-resizable
Command: npx skills add https://github.com/coco-de/skills --skill coui-resizable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of user interfaces with resizable panels and draggable dividers, allowing for flexible and dynamic layouts in Flutter and Web applications.

Core Features & Use Cases

  • Resizable Panels: Implement split views that users can adjust by dragging dividers.
  • Directional Layouts: Supports both horizontal and vertical panel arrangements.
  • Constraints: Define minimum and maximum sizes for panels to maintain usability.
  • Use Case: Create an IDE-like interface with a sidebar, code editor, and terminal, where each section's size can be adjusted by the user.

Quick Start

Activate the coui-resizable skill to create a horizontal split panel layout with initial sizes of 30% and 70%.

Frequently Asked Questions about coui-resizable

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

FAQPage Schema
How do I create resizable split panels in a Flutter web app?▼

You can create resizable split panels in a Flutter web app by using this Skill to implement draggable dividers. It supports horizontal and vertical orientations with configurable size constraints for dynamic UI adjustments.

What is the best way to build an IDE-like interface with adjustable sections?▼

The best way to build an IDE-like interface is using resizable panel layouts for sidebars, editors, and terminals. This Skill enables dynamic adjustments via draggable dividers, allowing users to customize their workspace layout.

Can I set minimum and maximum size limits for resizable UI panels?▼

Yes, you can set minimum and maximum size limits for resizable UI panels. This Skill allows you to define size constraints to maintain usability and prevent panels from becoming too large or small during drag adjustments.

Does the coui-resizable Skill support both horizontal and vertical split views?▼

Yes, the coui-resizable Skill supports both horizontal and vertical directional layouts. This allows you to arrange split views side-by-side or stacked, accommodating complex content arrangements within your application.

How do I configure initial sizes for split panel layouts?▼

You can configure initial sizes for split panel layouts by defining percentage proportions upon activation. For example, you can initialize a horizontal split panel layout with starting sizes of 30% and 70% for the respective views.

Are there resize callbacks for tracking panel size changes in web dashboards?▼

Yes, this Skill supports resize callbacks for tracking panel size changes in web dashboards. These callbacks facilitate dynamic UI adjustments, allowing your application to respond interactively as users drag dividers to resize panels.

Related Skills

Explore More Design & Creative Skills→
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-orientation-flip

Detect layout and state defects from portrait-to-landscape screen rotation.

Community
Advanced
maxjuniorbrmaxjuniorbr
2

responsive-design

Implement responsive layouts with CSS Grid and container queries.

Community
Advanced
AgentSystemLabsAgentSystemLabs
121

audit-responsive

Audits a named route or component for responsive-design breakage and applies safe mechanical fixes.

Official
Intermediate