vittrade-ui-checklists

Translates external UI checklists into Flutter-safe guidance for VitTrade screens.

Updated May 19, 2026
One-click install
npx skills add https://github.com/LonelyTraderBay/vittrade-flutter --skill vittrade-ui-checklists-lonelytraderbay
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vittrade-ui-checklists
Source: https://github.com/LonelyTraderBay/vittrade-flutter/tree/main/.agents/skills/vittrade-ui-checklists
Command: npx skills add https://github.com/LonelyTraderBay/vittrade-flutter --skill vittrade-ui-checklists-lonelytraderbay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? External UI checklists often assume web stacks like React, Tailwind, or Radix, which conflict with VitTrade's Flutter architecture, design tokens, and financial-safety rules. This Skill filters and translates those checklists so UI work stays consistent with project standards. ## Core Features & Use Cases - Allowlisted checklist retrieval: Pulls pinned, read-only external checklists for accessibility, motion performance, and baseline UI polish via the ui-skills CLI. - Flutter translation table: Maps web concepts like aria-labels, focus management, and responsive breakpoints to Flutter widgets, Semantics, and VitTrade theme tokens. - Boundary enforcement: Preserves shared Vit* components, dark phone-first layouts, and the separation between Arena points and Prediction Markets trading language. - Use Case: When polishing a trading screen's loading and error states, retrieve the baseline-ui checklist, translate its rules into VitCard and VitCtaButton usage, and verify with flutter analyze and focused tests. ## Quick Start Ask the agent to review a Flutter screen's accessibility and motion using the vittrade-ui-checklists skill before editing presentation code.

Frequently Asked Questions about vittrade-ui-checklists

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

FAQPage Schema
How do I apply external UI checklists to a Flutter app?

Retrieve one allowlisted checklist with the pinned ui-skills CLI command, then translate each rule into Flutter equivalents using the provided mapping table. Drop any rule that conflicts with project architecture, design tokens, or financial-safety requirements.

How do I improve Flutter accessibility for icon-only buttons?

Use IconButton.tooltip, Semantics with a label, or a meaningful semanticLabel so screen readers announce the control. The fixing-accessibility checklist covers labels, focus, dialogs, and validation, translated to Flutter widgets.

Can I use Tailwind or React UI advice in this Flutter project?

No. Tailwind, CSS, Radix, shadcn, and DOM-based rules are ignored unless the task explicitly targets a web artifact. All guidance is translated to VitTrade theme tokens and shared Vit widgets instead.

What Flutter widgets should I use before building custom scaffolds?

Prefer shared primitives such as VitAppShell, VitPageLayout, VitPageContent, VitHeader, VitCard, VitCtaButton, VitInput, and VitTabBar. Local scaffolds are only appropriate when no shared component covers the need.

What happens if the network is unavailable for checklist retrieval?

The skill includes built-in translation rules and a delivery checklist, so work continues offline. External checklists are advisory only; project docs and Flutter source remain authoritative.