skills.rest
yunior123
yunior123COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-bible

Enforces DesignTokens and component usage rules when building Flutter UI for OrignaGTA.

Updated Mar 9, 2026
Search Tags:#theming#design system#design tokens#ui components#flutter#dart#material 3
One-click install
npx skills add https://github.com/yunior123/origna_gta_firebase --skill design-system-bible-yunior123
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-bible
Source: https://github.com/yunior123/origna_gta_firebase/tree/main/.claude/skills/design-system-bible
Command: npx skills add https://github.com/yunior123/origna_gta_firebase --skill design-system-bible-yunior123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter UI code often drifts into inconsistent styling with hardcoded colors, spacing, and radii scattered across screens. This Skill centralizes the OrignaGTA design system rules so every component built or reviewed follows the same tokens, components, and layout patterns. ## Core Features & Use Cases - Design Token Enforcement: Mandates DesignTokens for all colors, spacing, and radii, banning hardcoded values and deprecated withOpacity() calls. - Component Catalog: Maps use cases to the correct widget (ModernButton, ModernCard, ModernTextField, ModernAppBar, ResponsiveLayout) with file paths and code variants. - Semantic Color Guidance: Provides a lookup table pairing UI contexts (payment, shipping, error, premium) with the correct token and icon. - Use Case: When implementing a new checkout screen, consult this Skill to select ModernCard containers, DesignTokens.success for payment indicators, and ResponsiveGridView for the layout instead of inventing ad-hoc styles. ## Quick Start Use the design-system-bible skill to build a new product detail screen following the OrignaGTA design tokens and component catalog.

Frequently Asked Questions about design-system-bible

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

FAQPage Schema
How do I build consistent Flutter UI components with a design system?▼

Reference the component catalog mapping use cases to widgets like ModernButton, ModernCard, and ModernTextField, and source all colors, spacing, and radii from DesignTokens. Never hardcode visual values directly in widget code.

What Flutter widgets should I use for buttons and cards in OrignaGTA?▼

Use ModernButton for primary and secondary CTAs, GlassButton for premium overlaid actions, ModernCard for content containers, and ModernProductCard for product grid items. Each maps to a specific file under widgets/ or utils/.

Can I use withOpacity() for colors in Flutter Material 3 apps?▼

No, this design system bans withOpacity() entirely. Use withValues(alpha:) or Color.fromRGBO instead, and always derive base colors from DesignTokens rather than hardcoded hex values.

How do I choose semantic colors for payment or error states in Flutter?▼

Use the semantic color table: DesignTokens.success for money and payment, DesignTokens.error for failures, DesignTokens.warning for low stock, and DesignTokens.info for shipping. Each context also has a paired Material icon.

When should I use GlassCard versus ModernCard in Flutter layouts?▼

Use ModernCard for standard content containers and GlassCard from glassmorphism.dart for premium feature cards with a frosted-glass effect. Both follow the theme's zero-elevation, radius-16 card style.

Related Skills

Explore More Design & Creative Skills→
sonhaicodersonhaicoder

lme-flutter

Compose Flutter UIs using lme_ui components and tokens.

Community
Advanced
sekiya-satosekiya-sato

wpf-view-workflow

Standardizes creating or updating WPF Views and ViewModels in Cvnet10Wpfclient with menu wiring and validation.

Community
Intermediate
derekrderekr
7

adapt

Adapt design layouts for mobile, tablet, desktop, and print contexts.

Community
Advanced
reason-machinesreason-machines
4

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and assets to generate Flutter code via MCP.

Official
Intermediate