skills.rest
ZHLX2005
ZHLX2005COMMUNITY
Explore all skills by this author →
GitHub

styles-skill

Guides Flutter UI style implementation through an indexed catalog of reference solutions.

3|1|Updated Apr 14, 2026
Search Tags:#flutter#dart#ui styling#material 3#bottom navigation#sliverappbar#widget implementation
One-click install
npx skills add https://github.com/ZHLX2005/sl --skill styles-skill-zhlx2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styles-skill
Source: https://github.com/ZHLX2005/sl/tree/main/skills/styles-skill
Command: npx skills add https://github.com/ZHLX2005/sl --skill styles-skill-zhlx2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter developers often struggle to pick the right widget composition for a visual style and repeatedly rediscover the same rendering pitfalls (hairline seams, clipped masks, broken sliver transforms). This Skill provides a progressive-disclosure index of proven Flutter style solutions so each pattern is implemented once, correctly. ## Core Features & Use Cases - Style Category Index: A central table mapping style categories (Top App Bar / Banner Header, Bottom Bars) to concrete sub-solutions, loaded on demand. - Ready-to-Apply Solution Files: Each reference file contains a step-by-step implementation guide with copyable Dart code plus a real pitfalls section (e.g., stretchable banner with rounded mask, floating pill bottom navigation with a QQ bounce curve). - Extensible Workflow: A standard process for adding new style schemes (Card, Button, Modal, etc.) as new reference files registered in the index. - Use Case: Given a Figma mockup of a stretchable banner header with a rounded corner transitioning into a list, look up the banner-stretch-rounded-mask solution and follow its steps to achieve a seam-free result without re-debugging sliver paint behavior. ## Quick Start Ask the assistant to implement a stretchable banner header with rounded corners in Flutter using the styles-skill index.

Frequently Asked Questions about styles-skill

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

FAQPage Schema
How do I implement a stretchable banner header with rounded corners in Flutter?▼

Use a SliverAppBar with stretch enabled and place a rounded mask in the outer flexibleSpace Stack with clipBehavior set to Clip.none. The mask extends 12 px below the AppBar edge to hide hairline seams during overscroll stretching.

How to build a floating pill bottom navigation bar in Flutter?▼

Use a fixed-width 328 px Card with full pill border radius, an AnimatedBuilder-driven capsule indicator, and a Row of tab icons stacked in that order. A custom exponential-decay cosine curve produces a single-overshoot bounce when switching tabs.

Why does Transform.translate not work inside a SliverToBoxAdapter?▼

RenderSliverToBoxAdapter resets the child paint offset to the sliver geometry paintOrigin during paint, swallowing box-level transforms. To move a widget across a sliver boundary, reposition the widget itself on the other side of the boundary instead.

Why is there a hairline seam between my SliverAppBar and list?▼

The seam comes from anti-aliasing: the mask bottom edge and body top edge each cover about 50 percent of the same pixel row, leaving a semi-transparent line. Fix it by overlapping the mask 12 px downward and translating the list body 12 px upward.

When should I not use this Flutter style guide?▼

Do not use it for business logic, networking, state management, routing, animation physics details, crash debugging, or performance tuning. Those concerns belong to dedicated workflow, debugging, or performance skills.

Related Skills

Explore More Software Engineering Skills→
Sir-chawakornSir-chawakorn
33

screenshot-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate
drsapaevdrsapaev
2

aif-verify

Verify completed code implementation against a project plan.

Community
Advanced
Camilo8902Camilo8902

dark-mode-implementer

Implement dark and light mode theming with CSS variables, Tailwind CSS, and React context.

Community
Advanced
VeryGoodOpenSourceVeryGoodOpenSource
162

ui-package

Scaffolds and maintains Flutter UI packages with ThemeExtension tokens, barrel exports, and widget tests.

Official
Intermediate