What problem does it solve? Building UI for the eMSME mobile app requires strict adherence to a detailed design system — specific color tokens, typography rules, navigation patterns, and copy guidelines — and this Skill ensures every generated screen or component follows those rules instead of inventing inconsistent styles. ## Core Features & Use Cases - Design Token Enforcement: Applies the exact color palette (Philippine Blue, Gold, Red), 8px spacing grid, and radius/elevation rules defined for the eGovPH-aligned eMSME app. - Screen & Component Specs: Provides detailed specifications for all screens (Home, Aid, Documents, Scan/Upload, Notifications, eGovAI chat) and components (buttons, status pills, cards, form fields). - Voice & Copy Rules: Enforces bilingual Filipino/English plain-language copy and prohibits jargon like "blockchain" or "Wallet" in user-facing text. - Use Case: When asked to build a loan status card in the mobile app, the Skill ensures it shows outstanding balance as the largest text, uses the correct status chip colors, and avoids generating an out-of-scope repayment flow. ## Quick Start Use the agent-frontend-builder skill to generate a new Aid Matches screen component for the mobile app following the eMSME design system.
