fifty-kit

Enforce FDL v2 design and MVVM+Actions architecture in Flutter projects.

10|Updated Oct 25, 2025
One-click install
npx skills add https://github.com/fiftynotai/igris-ai --skill fifty-kit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fifty-kit
Source: https://github.com/fiftynotai/igris-ai/tree/main/.claude/skills/fifty-kit
Command: npx skills add https://github.com/fiftynotai/igris-ai --skill fifty-kit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces consistent application of the Fifty Design Language v2 and the MVVM+Actions architecture so teams avoid visual drift, duplicated theming, and architectural anti-patterns when building Flutter features and engine packages.

Core Features & Use Cases

  • Design system enforcement: Use FiftyTokens, FiftyTheme, and FiftyUI primitives for colors, spacing, typography, radii, and components so visual updates propagate across packages.
  • Architecture & scaffolding: Follow MVVM+Actions conventions, GetX bindings order, ApiResponse state pattern, and the mvvm_actions template for predictable module structure and testability.
  • Gaming and engine guidance: Integrate skill_tree and achievement_engine packages to consume FDL primitives rather than defining independent themes.
  • Review checklist & conventions: Provides mandatory read order (pubspec, public exports), motion rules (no fades/spinners), promotion workflow, testing standards, and code-review checklists for production-quality modules.

Quick Start

Use the fifty-kit skill to scaffold a new modules/{feature} MVVM+Actions module that uses FDL tokens and registers services, viewmodels, and actions in the correct order.

Frequently Asked Questions about fifty-kit

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

FAQPage Schema
How do I enforce consistent FDL v2 design tokens across a Flutter monorepo?

To enforce FDL v2 design tokens in a Flutter monorepo, apply FiftyColors, FiftySpacing, and FiftyTypography primitives across all packages so visual updates propagate without duplicated theming.

What is the MVVM+Actions architecture pattern for Flutter feature modules?

The MVVM+Actions architecture for Flutter separates views, viewmodels, and actions into predictable structures using the mvvm_actions template, registering GetX bindings in a specific order for testability.

How do I scaffold a new Flutter module with GetX bindings and design system tokens?

Scaffold a new Flutter module using the mvvm_actions template to generate feature directories, automatically wiring GetX bindings order and consuming FiftyTokens for colors, spacing, and typography.

Can I use custom theme classes and loading spinners inside a fifty_flutter_kit project?

Custom theme classes, fades, and spinners are explicitly avoided inside fifty_flutter_kit projects; teams must consume FiftyTheme and FiftyUI primitives instead to maintain visual consistency.

How do gaming engine packages integrate with a Flutter design system?

Gaming engine packages like skill_tree and achievement_engine integrate with the Flutter design system by directly consuming FDL primitives and FiftyTokens rather than defining independent theme classes.

What conventions should I follow when reviewing Flutter code in an FDL v2 project?

Flutter code reviews in FDL v2 projects require checking pubspec and public API reads, verifying GetX bindings order, enforcing motion rules, and applying provided checklists for production-quality modules.