with one click
ui-ux-design
// User experience design, usability testing, information architecture, accessibility (WCAG 2.1 AA), mobile-first design for political transparency platforms
// User experience design, usability testing, information architecture, accessibility (WCAG 2.1 AA), mobile-first design for political transparency platforms
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | ui-ux-design |
| description | User experience design, usability testing, information architecture, accessibility (WCAG 2.1 AA), mobile-first design for political transparency platforms |
| license | Apache-2.0 |
Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.
Comprehensive user experience and interface design guidance for Riksdagsmonitor, ensuring intuitive, accessible, and engaging experiences for diverse user groups across all 14 language versions.
Demographics: 35, Svenska Dagbladet, Stockholm Goals:
Pain Points:
Design Priorities:
Demographics: 42, Uppsala University, researcher Goals:
Pain Points:
Design Priorities:
Demographics: 28, Gothenburg, first-time voter Goals:
Pain Points:
Design Priorities:
Demographics: 45, multinational corporation, lobbyist Goals:
Pain Points:
Design Priorities:
Riksdagsmonitor (Home)
โ
โโโ ๐ Dashboards
โ โโโ Voting Discipline
โ โโโ Committee Effectiveness
โ โโโ Coalition Alignment
โ โโโ Party Comparison
โ โโโ Election Forecasting
โ โโโ Risk Assessment
โ โโโ Ministry Performance
โ
โโโ ๐ฅ MPs (Ledamรถter)
โ โโโ Search/Filter
โ โโโ Individual Profiles
โ โโโ Comparison Tool
โ
โโโ ๐ณ๏ธ Votes (Voteringar)
โ โโโ Recent Votes
โ โโโ Historical Trends
โ โโโ Party Positions
โ
โโโ ๐ Committees (Utskott)
โ โโโ Committee Overview
โ โโโ Effectiveness Metrics
โ โโโ Member Lists
โ
โโโ ๐ฐ News & Analysis
โ โโโ Latest Updates
โ โโโ Weekly Reports
โ โโโ Quarterly Reviews
โ
โโโ ๐ About
โ โโโ Methodology
โ โโโ Data Sources
โ โโโ Privacy Policy
โ โโโ Contact
โ
โโโ ๐ Resources
โโโ API Documentation
โโโ Glossary
โโโ User Guide
<nav class="primary-nav" aria-label="Main navigation">
<ul>
<li><a href="#dashboards">Dashboards</a></li>
<li><a href="#mps">MPs</a></li>
<li><a href="#votes">Votes</a></li>
<li><a href="#committees">Committees</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
/* Primary Colors */
--primary-cyan: #00d9ff; /* Data points, links */
--primary-magenta: #ff006e; /* Alerts, critical items */
--primary-yellow: #ffbe0b; /* Highlights, warnings */
/* Background Colors */
--dark-bg: #0a0e27; /* Main background */
--mid-bg: #1a1e3d; /* Cards, panels */
--light-bg: #2a2e4d; /* Hover states */
/* Text Colors */
--light-text: #e0e0e0; /* Body text */
--mid-text: #a0a0a0; /* Secondary text */
--dark-text: #606060; /* Disabled text */
/* Semantic Colors */
--success: #00ff88; /* Positive trends */
--warning: #ffbe0b; /* Caution items */
--error: #ff006e; /* Errors, high risk */
--info: #00d9ff; /* Information, tooltips */
/* Font Families */
--font-primary: 'Inter', sans-serif; /* Body, UI */
--font-heading: 'Orbitron', sans-serif; /* Headings, emphasis */
--font-mono: 'Fira Code', monospace; /* Code, data */
/* Font Sizes (Fluid Typography) */
--font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */
--font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); /* 14-16px */
--font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16-18px */
--font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20-24px */
--font-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24-32px */
--font-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem); /* 32-48px */
/* Line Heights */
--leading-tight: 1.25; /* Headings */
--leading-normal: 1.5; /* Body text */
--leading-relaxed: 1.75; /* Long-form content */
/* Spacing Scale (4px base) */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
<div class="dashboard-card">
<header class="card-header">
<h3 class="card-title">Voting Discipline</h3>
<button class="card-action" aria-label="More options">โฎ</button>
</header>
<div class="card-body">
<canvas id="votingDisciplineChart"></canvas>
</div>
<footer class="card-footer">
<span class="card-meta">Updated: 2026-02-11</span>
<a href="#details" class="card-link">View details โ</a>
</footer>
</div>
<table class="data-table" role="table">
<thead>
<tr>
<th scope="col" role="columnheader">
MP Name
<button aria-label="Sort by name">โ</button>
</th>
<th scope="col" role="columnheader">Party</th>
<th scope="col" role="columnheader">Risk Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna Svensson</td>
<td>S</td>
<td><span class="badge badge-high">7.2</span></td>
</tr>
</tbody>
</table>
<div class="filter-panel">
<div class="search-box">
<label for="search" class="sr-only">Search MPs</label>
<input
type="search"
id="search"
placeholder="Search by name, party, committee"
aria-describedby="search-help"
>
</div>
<fieldset class="filter-group">
<legend>Filter by Party</legend>
<label>
<input type="checkbox" name="party" value="S">
<span>Socialdemokraterna (S)</span>
</label>
<!-- Repeat for other parties -->
</fieldset>
</div>
<!-- Skeleton Loader -->
<div class="skeleton-card" aria-busy="true" aria-label="Loading content">
<div class="skeleton-header"></div>
<div class="skeleton-body">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</div>
</div>
<!-- Spinner (fallback) -->
<div class="spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
/* Mobile First Approach */
/* Extra Small: 320px - 479px (default, no media query) */
/* Small Phones */
/* Small: 480px - 767px */
@media (min-width: 30em) { /* 480px */
/* Larger phones, portrait tablets */
}
/* Medium: 768px - 1023px */
@media (min-width: 48em) { /* 768px */
/* Tablets, landscape */
}
/* Large: 1024px - 1279px */
@media (min-width: 64em) { /* 1024px */
/* Small laptops, desktops */
}
/* Extra Large: 1280px - 1919px */
@media (min-width: 80em) { /* 1280px */
/* Desktops, large screens */
}
/* XXL: 1920px+ */
@media (min-width: 120em) { /* 1920px */
/* Very large screens */
}
<html lang="en"> for each language versionTask Success Rate:
Target: >80% users complete primary tasks
Measured: Can users find MP profile, view voting record, filter by party?
Time on Task:
Target: <2 minutes for common tasks
Measured: How long to find specific information?
Error Rate:
Target: <5% errors per task
Measured: Clicks on wrong elements, navigation mistakes
System Usability Scale (SUS):
Target: >68 (above average)
Measured: 10-question standardized survey
Net Promoter Score (NPS):
Target: >30 (good for B2B SaaS)
Measured: "How likely to recommend 0-10?"
inline-start not left)/* RTL-Aware Styles */
[dir="rtl"] .element {
direction: rtl;
text-align: right;
}
/* Logical Properties (works for both LTR/RTL) */
.element {
margin-inline-start: 1rem; /* Not margin-left */
padding-inline-end: 0.5rem; /* Not padding-right */
}
Largest Contentful Paint (LCP):
Target: <2.5s
Strategies:
- Optimize images (WebP, lazy loading)
- Minimize CSS blocking
- CDN for static assets
First Input Delay (FID):
Target: <100ms
Strategies:
- Minimize JavaScript execution
- Code splitting, defer non-critical JS
- Use web workers for heavy computation
Cumulative Layout Shift (CLS):
Target: <0.1
Strategies:
- Set explicit width/height for images
- Reserve space for dynamic content
- Avoid injecting content above fold
<!-- Responsive Images -->
<picture>
<source srcset="dashboard-mobile.webp" media="(max-width: 767px)" type="image/webp">
<source srcset="dashboard-tablet.webp" media="(max-width: 1023px)" type="image/webp">
<source srcset="dashboard-desktop.webp" type="image/webp">
<img src="dashboard-desktop.jpg" alt="Voting discipline dashboard" loading="lazy">
</picture>
Last Updated: 2026-02-11
Maintained by: Hack23 AB