ui

Provides Flutter UI development best practices for widget composition and performance.

4|2|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/lazygophers/ccplugin --skill ui-lazygophers
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/lazygophers/ccplugin/tree/main/plugins/languages/flutter/skills/ui
Command: npx skills add https://github.com/lazygophers/ccplugin --skill ui-lazygophers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common challenges in Flutter UI development by providing guidelines on widget composition, optimization, and performance best practices to ensure efficient and maintainable user interfaces.

Core Features & Use Cases

  • Widget Design Principles: Enforces single responsibility and promotes the use of const widgets for performance.
  • Performance Optimization: Guides on virtualizing long lists and efficient resource management.
  • Responsive Design: Provides strategies for adapting UIs to different screen sizes.
  • Use Case: When building a complex dashboard in Flutter, this Skill will help ensure that individual components are well-structured, performant, and adapt gracefully to various screen resolutions, leading to a smoother user experience.

Quick Start

Apply the Flutter UI development best practices to optimize the performance of the attached UserProfileScreen.dart file.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I optimize Flutter UI performance for complex widget trees?

Optimize Flutter UI performance by enforcing single responsibility principles, using const widgets, and applying build optimization strategies to ensure efficient and maintainable user interfaces across mobile and web applications.

What is the best way to structure Flutter widgets for maintainability?

The best way to structure Flutter widgets for maintainability is adhering to single responsibility principles during widget composition, ensuring individual components remain well-structured and highly performant within complex dashboards.

How do I implement responsive design patterns in Flutter?

Implement responsive design patterns in Flutter by applying provided adaptation strategies that ensure user interfaces adapt gracefully to different screen sizes and resolutions for a smoother mobile and web user experience.

Why does my Flutter app lag when scrolling long lists?

Your Flutter app lags when scrolling long lists because they are not virtualized. Apply list virtualization and efficient resource management best practices to optimize scrolling performance and reduce UI jank.

Can I use these Flutter UI best practices for web application development?

Yes, you can use these Flutter UI best practices for web application development. They specifically address mobile and web environments requiring efficient, maintainable user interfaces with responsive design and resource management.