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

coui-drawer

Create and manage drawer components for CoUI Flutter and Web applications.

Updated Aug 27, 2026
Search Tags:#Flutter#overlay#drawer#bottom sheet#UI component#CoUI#Web
One-click install
npx skills add https://github.com/coco-de/skills --skill coui-drawer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coui-drawer
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-drawer
Command: npx skills add https://github.com/coco-de/skills --skill coui-drawer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of side drawers, bottom sheets, and sliding overlay panels in CoUI applications, providing a consistent and user-friendly way to present secondary content or navigation.

Core Features & Use Cases

  • Versatile Panel Creation: Supports drawers from all four edges (left, right, top, bottom) for various UI patterns.
  • Cross-Platform Consistency: Offers distinct yet conceptually similar implementations for both Flutter and Web.
  • Use Case: Implement a mobile app's settings menu that slides in from the right, or a web app's bottom sheet for user confirmations.

Quick Start

Use the coui-drawer skill to display a left-aligned drawer with navigation links.

Frequently Asked Questions about coui-drawer

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

FAQPage Schema
How do I create a sliding drawer menu in Flutter and Web applications?▼

To create a sliding drawer menu in Flutter and Web applications, use this Skill to build and manage drawer components with customizable edge positions, animations, and backdrop effects.

Can I build bottom sheets that slide from different screen edges?▼

Yes, you can build bottom sheets and versatile overlay panels from all four screen edges—left, right, top, and bottom—to implement navigation menus or settings panels.

What is the best way to manage overlay panel positions and animations in CoUI?▼

The best way to manage overlay panel positions and animations in CoUI is by using this Skill, which facilitates customizable sliding effects and integrates seamlessly with existing UI elements.

Do I need additional dependencies to implement bottom sheets in CoUI?▼

No additional dependencies are required to implement bottom sheets and drawers in CoUI, as this Skill operates independently to manage overlay panels for both Flutter and Web platforms.

How does cross-platform UI consistency work for drawers in Flutter and Web?▼

Cross-platform UI consistency for drawers is achieved through distinct yet conceptually similar implementations for both Flutter and Web, ensuring a unified user experience across platforms.

When should I use an overlay drawer instead of standard navigation in my app?▼

Use an overlay drawer instead of standard navigation when you need to present secondary content, settings panels, or user confirmations in a sliding panel without leaving the current screen context.

Related Skills

Explore More Design & Creative Skills→
bear2ubear2u
905

flutter-init

Automate Flutter project setup with Clean Architecture and Riverpod.

Community
Intermediate
thedaviddiasthedaviddias
228

Tabs

Implements tabbed interfaces with ARIA keyboard navigation and responsive design for organizing content into switchable views.

Community
Intermediate
skycruzerskycruzer

Design Guide

Apply consistent UI design guidelines across SwiftUI, Android, and web interfaces.

Community
Basic
MADTeacherMADTeacher
104

flutter-navigation

Configures Navigator and go_router patterns for Flutter mobile and web apps.

Community
Intermediate