| name | ui-ux-front-saas |
| description | Use when: ui ux, design system, figma handoff, wireframes, user flow, dashboard, landing page, angular frontend screen, component styling, responsive, accessibility, dark mode, visual consistency, SaaS B2B cloud |
Skill: ui-ux-front-saas
Use this skill for frontend UI/UX work in InfraFlowSculptor.
This skill transforms product/design intent into implementable Angular UI decisions, while keeping consistency with the existing login page and product goals.
1) Product Context (source of truth)
- Product: InfraFlowSculptor
- Goal: Configure Azure infrastructure as data, then generate Bicep and Azure DevOps pipeline artifacts.
- Target frontend stack: Angular 19 (standalone), Angular Material, Tailwind CSS, SCSS, Axios.
- Backend context: .NET Minimal API with CQRS/DDD.
- Auth: Microsoft Entra ID with roles and permissions.
- Tone: professional, reliable, premium, clear, operationally efficient.
2) Visual Baseline to Reuse (existing login)
Before proposing any new UI direction, read and align with:
- src/Front/src/app/features/login/login.component.html
- src/Front/src/app/features/login/login.component.scss
Extract and preserve the existing visual DNA:
- Split-screen composition for strategic pages (where useful)
- Cloud-inspired gradient direction (deep blue to cyan), premium and technical
- Clear typography hierarchy and strong onboarding copy
- Visible status/error affordances
- Controlled density and clean spacing
Do not introduce random style shifts that clash with the login visual baseline.
3) Personas to Design For
- Cloud/Platform Engineer (power user)
- DevOps Engineer (artifact consumer)
- Tech Lead/Manager (governance and global visibility)
4) UX Objectives (must be visible in the UI)
- Reduce perceived Azure complexity
- Make creation/editing fast and safe
- Make relations explicit: Infrastructure Config -> Resource Groups -> Resources
- Explain validation errors pedagogically
- Reinforce control, security, and traceability
5) Feature Surfaces to Cover
- Auth flow (Entra ID + unauthenticated state)
- Connected dashboard/landing
- Infrastructure Config list (search, sort, filters, status)
- Infrastructure Config detail sections:
- Members & roles (Owner/Contributor/Reader)
- Environments
- Parameter definitions/values
- Naming templates
- Linked resource groups
- CRUD: Resource Group, Key Vault, Redis Cache, Storage Account
- Generate Bicep CTA: loading/success/error + simple history
- Empty states, API error states, destructive confirmations, snackbars
- User profile and visible permissions
6) Design System Requirements
Always design and implement with reusable tokens/components first.
6.1 Tokens
Define and use tokens for:
- Color (semantic + brand + neutral)
- Typography scale
- Spacing scale
- Radius scale
- Elevation/shadow
- Focus states
- Disabled/loading/error/success states
6.2 Components
Ensure reusable component coverage for:
- Buttons
- Inputs
- Selects
- Tables
- Chips/tags
- Tabs
- Cards
- Modals/dialogs
- Drawers
- Breadcrumbs
- Pagination
- Alerts/snackbars
Each component must define variants and states (hover, focus, disabled, error, loading).
7) Accessibility and Responsiveness (non-negotiable)
- WCAG 2.1 AA contrast
- Visible focus style
- Keyboard navigation paths
- Adequate hit areas and touch targets
- Responsive behavior:
- Desktop-first
- Tablet adaptation
- Mobile adaptation
- Support both light mode and dark mode
8) Visual Direction
- Style: Azure-native SaaS (technical, modern, trustworthy, not cold)
- Palette: deep blues + cyan/violet accents, with enterprise neutral fallback
- Typography: highly readable with strong hierarchy
- Iconography: coherent infra/cloud/security semantics
No gratuitous visual effects. Function clarity comes first.
9) Output Contract for Design Tasks
When the task is design-heavy (Figma, screen architecture, UX specs), produce:
- Information architecture (site map)
- At least 5 key user flows
- Low-fi wireframes of key screens
- High-fi mockups ready for dev handoff
- Design system and reusable component library
- Clickable prototype for critical journeys
- Handoff specs:
- Dimensions and spacing
- Tokens
- Component behavior
- Interaction/state annotations
- Responsive rules
Also provide:
- V1 (MVP) scope
- V2 (advanced UX improvements)
10) Output Contract for Angular Implementation Tasks
When coding Angular screens/components:
- Reuse existing shared styles/patterns before creating new ones
- Keep design system consistency across pages
- Implement clear loading/empty/error states
- Keep permission visibility explicit in UI actions and labels
- Use realistic domain data examples:
- InfrastructureConfig
- ResourceGroup
- KeyVault
- RedisCache
- StorageAccount
- Members
- Environments
- Generate Bicep
11) Guardrails
- Do not optimize for flashy visuals over task efficiency
- Do not create one-off components when reusable patterns are possible
- Do not break existing login visual language
- Do not ship inaccessible color/focus combinations
12) Practical Workflow
- Read login HTML/SCSS baseline
- Map task to persona and UX objective
- Use/extend tokens and reusable components first
- Validate states (loading, empty, error, destructive confirmation)
- Validate responsive + keyboard + contrast
- Ship with V1 now, and list V2 improvements separately
