skills.rest
Abrahan-Eagle
Abrahan-EagleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

zonix-ui-design

Reconcile visual design decisions into a cohesive Flutter UI system.

1|1|Updated May 24, 2025
Search Tags:#typography#ui#layout#components#flutter#colors#design-system
One-click install
npx skills add https://github.com/Abrahan-Eagle/zonix-eats-front --skill zonix-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zonix-ui-design
Source: https://github.com/Abrahan-Eagle/zonix-eats-front/tree/main/.agents/skills/zonix-ui-design
Command: npx skills add https://github.com/Abrahan-Eagle/zonix-eats-front --skill zonix-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Zonix Eats UI teams need a cohesive visual language to ensure consistency and speed when building screens, widgets, and components across the app.

Core Features & Use Cases

  • Palette of colors, typography, cards, buttons, and layouts used by all screens.
  • Tokens and guidelines for themes, spacing, and reusable components to accelerate frontend work with a consistent look and feel.
  • Use Case: Design a new screen by applying the zonix-ui-design tokens and components, ensuring brand consistency.

Quick Start

Apply the Zonix UI design tokens and component guidelines to your next screen or widget design.

Frequently Asked Questions about zonix-ui-design

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

FAQPage Schema
How do I maintain UI consistency across Flutter screens and widgets?▼

To maintain UI consistency across Flutter screens, apply a cohesive design system with standardized tokens for typography, colors, and layout. This ensures reusable components share a unified visual language across the app.

What are design tokens and how do they work in a Flutter UI?▼

Design tokens in a Flutter UI are centralized variables for colors, typography, and spacing. They work by defining standard visual properties once, which are then referenced in code to ensure consistent theming across widgets.

How do I apply a design system to a new Flutter feature?▼

Applying a design system to a new Flutter feature involves referencing established design tokens and component guidelines during development. This ensures new screens and widgets match the existing brand visual language.

Can I use this design system for both code and design reviews?▼

Yes, you can use this design system for both code and design reviews. The tokens and component specifications are designed to be referenced during reviews to verify visual consistency and compliance.

Does this visual design system include layout and spacing guidelines?▼

Yes, this visual design system includes layout and spacing guidelines. It provides a comprehensive palette of colors, typography, cards, buttons, and layout configurations to accelerate frontend work.

Related Skills

Explore More Design & Creative Skills→
dus2183-commitsdus2183-commits

flutter-theme-design

Centralize colors, typography, and spacing in Flutter theme files.

Community
Intermediate
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
manuelbrandner85manuelbrandner85

flutter-add-widget-test

Implement Flutter widget tests with WidgetTester for UI rendering and interactions.

Community
Intermediate
amarnath3003amarnath3003
4

Dataset Lab UI Kit - Replication Skill

Recreate a neumorphic Control Console design system with Tailwind CSS and React components.

Community
Advanced