display-widgets

Provide reusable Flutter UI components for iOS-native style displays.

19|2|Updated Apr 29, 2023
One-click install
npx skills add https://github.com/sampaio-tech/iOS-design-system --skill display-widgets
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: display-widgets
Source: https://github.com/sampaio-tech/iOS-design-system/tree/main/.claude/skills/display-widgets
Command: npx skills add https://github.com/sampaio-tech/iOS-design-system --skill display-widgets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides pre-built, customizable UI components that adhere to iOS Human Interface Guidelines, simplifying the creation of visually appealing and consistent interfaces in Flutter applications.

Core Features & Use Cases

  • Versatile Display Widgets: Includes components for icons, tags, titles, descriptions, dividers, and markdown rendering.
  • Theme Adaptation: Widgets automatically adapt to light and dark modes, ensuring a native look and feel.
  • Use Case: Quickly build a settings screen with clear section titles, descriptive text, and interactive tags for filtering options, all while maintaining a consistent iOS aesthetic.

Quick Start

Use the display-widgets skill to render a markdown document with the provided text content.

Frequently Asked Questions about display-widgets

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

FAQPage Schema
How do I render markdown content with interactive links in a Flutter app?

To render markdown content in Flutter, this Skill provides reusable UI components that parse markdown text and handle interactive links automatically. Widgets support custom styling while maintaining an iOS-native aesthetic, enabling consistent text rendering across light and dark modes.

What's the best way to build iOS-style settings screens with tags and dividers in Flutter?

Building iOS-style settings screens in Flutter is simplified with pre-built display widgets for tags, titles, descriptions, and dividers. These components adhere to iOS Human Interface Guidelines, offering customizable styling and theme adaptation for consistent native interfaces.

Do these Flutter UI components automatically adapt to iOS dark mode?

Yes, these Flutter UI components automatically adapt to iOS dark mode. The display widgets are theme-aware, ensuring a native look and feel by adjusting styles dynamically between light and dark modes without requiring manual styling overrides.

Can I customize the styling of iOS display widgets like icons and tags?

Yes, you can customize the styling of iOS display widgets including icons and tags. The components support custom styling options, allowing you to adjust appearance while preserving the baseline iOS-native aesthetic and Human Interface Guidelines compliance.

Why use pre-built display widgets instead of standard Flutter UI components for iOS design?

Pre-built display widgets eliminate the overhead of manually matching iOS Human Interface Guidelines. They provide ready-to-use icons, tags, titles, dividers, and markdown rendering that ensure visual consistency and reduce development time for iOS-native Flutter interfaces.

Are there any external dependencies required to use these Flutter display widgets?

No external dependencies are required to use these Flutter display widgets. The Skill operates independently with no listed dependencies, providing a self-contained suite of iOS-style UI components for icons, tags, markdown rendering, and dividers.