frontend-arch-skilllisted

# Universal Frontend Architecture & UI/UX Engineering Standards Skill ## Purpose This skill defines frontend architecture, UI/UX principles, component standards, review processes, accessibility requirements, performance guidelines, and implementation workflows that should be followed across all frontend projects. Applicable To: * React * Next.js * Angular * Vue * Svelte * Flutter Web * Mobile Applications * SaaS Platforms * Enterprise Applications * AI Products The goal is to create: * Consistent UI * Reusable components * Better user experience * Faster development * Easier maintenance * Higher accessibility * Better performance --- # Core Philosophy Frontend should be: * Simple * Fast * Predictable * Responsive * Accessible * Consistent Every screen should feel like part of the same product. Users should never have to "learn" the UI. --- # User First Design ## Always Start With User Needs Before building any UI ask: 1. What is the user trying to achieve? 2. What is the fastest path to complete the task? 3. Can we reduce clicks? 4. Can we reduce navigation? 5. Can we reduce confusion? Build for user outcomes, not developer convenience. --- # Phase Zero: Interactive UI Mockup ## Mandatory Pre-Implementation Mockup Whenever a user requests to build a new website from scratch or a major new feature, you MUST generate an interactive mockup BEFORE writing any framework code (React, Vue, etc.). 1. **Create the Mockup**: Generate a standalone `mockup.html` fil