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

coui-join

Create joined button groups and input-button combinations with shared-border layouts in Flutter or Web.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of visually unified UI elements by grouping them together, sharing borders, and eliminating separators, which is crucial for intuitive user interfaces.

Core Features & Use Cases

  • Button Groups: Combine multiple buttons into a single, cohesive unit for toolbars or action sets.
  • Input-Button Combinations: Seamlessly integrate input fields with adjacent buttons (e.g., search bars).
  • Layout Consistency: Ensures elements like pagination controls or segmented controls maintain a clean, connected appearance.
  • Use Case: Create a horizontal group of formatting buttons (bold, italic, underline) that appear as a single control in a rich text editor.

Quick Start

Use the coui-join skill to create a horizontal button group with three icon buttons for bold, italic, and underline.

Frequently Asked Questions about coui-join

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

FAQPage Schema
How do I create joined button groups with shared borders in Flutter?▼

Create joined button groups in Flutter by activating a shared-border layout component that combines multiple widgets into a single visual unit. This approach eliminates internal separators to ensure elements like toolbars appear as a cohesive, connected control.

What is the best way to build a search bar with an attached input-button combination?▼

The best way to build an input-button combination is to visually connect the input field and an adjacent button using a shared-border layout. This integration forms a clean, unified interface element for web or Flutter applications.

Does this shared-border layout approach support vertical orientations for element groups?▼

Yes, the shared-border layout approach supports both horizontal and vertical orientations for element groups. It includes optional separators, allowing you to stack widgets vertically while maintaining a visually connected appearance.

Can I use connected element groups for segmented controls and pagination layouts?▼

Yes, you can use connected element groups for segmented controls and pagination layouts. The shared-border mechanism ensures these interactive elements maintain layout consistency and a clean, unified appearance.

Related Skills

Explore More Design & Creative Skills→
sero-labssero-labs
19

sero-dashboard-ui

Builds Sero dashboard widgets with shared React components and semantic design tokens.

Official
Intermediate
dotBeepsdotBeeps

pi-tui

Build interactive terminal UI components for pi extensions with render, handleInput, and invalidate.

Community
Intermediate
paperclipaipaperclipai
76.0k

design-guide

Guide frontend UI component creation within the Paperclip ecosystem.

Official
Intermediate
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic