# Li Lance Android Seraphim Framework Flutter Design System

> Flutter Design System Enforcement

- Skill: `tomevault-io/li-lance-android-seraphim-framework-flutter-design-system` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/li-lance-android-seraphim-framework-flutter-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/li-lance-android-seraphim-framework-flutter-design-system/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/li-lance-android-seraphim-framework-flutter-design-system

---


# Flutter Design System Enforcement

## **Priority: P0 (CRITICAL)**

Zero tolerance for hardcoded design values.

## **Phase 0: Context Discovery (MANDATORY)**

Before any UI refactoring, you MUST identify the project's Theme Archetype:

1. **Check `main.dart`**: Look for `MaterialApp` theme configuration.
2. **Determine Pattern**:
    - **Theme-Driven (Adaptive)**: If you see `VThemeData(...).toThemeData()` or extensive
      `ThemeData` overrides, you MUST use `Theme.of(context).textTheme` or `theme.textTheme` for
      feature code.
    - **Token-Driven (Static)**: Only use static tokens (`VTypography.*`) if there is no global
      theme bridge or if you are defining the theme itself.

## Guidelines

- **Colors**: Use tokens (`VColors.*`, `AppColors.*`), never `Color(0xFF...)` or `Colors.red`.
- **Spacing**: Use tokens (`VSpacing.*`), never magic numbers like `16` or `24`.
- **Typography**: Prioritize `theme.textTheme.*` for adaptive UI. Use `VTypography.*` tokens only
  for theme definitions or non-contextual logic. Never use inline `TextStyle`.
- **Borders**: Use tokens (`VBorders.*`), never raw `BorderRadius.`
- **Components**: Use DLS widgets (`VButton`) over raw Material widgets (`ElevatedButton`) if
  available.

[Detailed Examples](references/usage.md)

## Anti-Patterns

- **No Hex Colors**: `Color(0xFF...)` is strictly forbidden.
- **No Color Enums**: `Colors.blue` is forbidden in UI code.
- **No Magic Spacing**: `SizedBox(height: 10)` is forbidden.
- **No Inline Styles**: `TextStyle(fontSize: 14)` is forbidden.
- **No Raw Widgets**: Don't use `ElevatedButton` when `VButton` exists.

## Related Topics

mobile-ux-core | flutter/widgets | idiomatic-flutter

---
> Source: [li-lance/android-seraphim-framework](https://github.com/li-lance/android-seraphim-framework) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-16 -->