skills.rest
Benidrissa
BenidrissaCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Design and review mobile-first UI layouts with Tailwind tokens and FR/EN accessibility rules.

Updated Mar 30, 2026
Search Tags:#accessibility#mobile-first#tailwind#ui-design#design-system#bilingual#education-ux
One-click install
npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill ui-design-benidrissa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/Benidrissa/etutor-digital-ph/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill ui-design-benidrissa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a complete UI design system and review checklist tailored to Sira, a bilingual, mobile-first learning platform, so teams can produce consistent, accessible, and offline-capable interfaces that communicate trust and clarity for learners on low-end devices.

Core Features & Use Cases

  • Design tokens and a green/gold palette mapped to Tailwind for consistent branding and status colors.
  • Typography and spacing guidance optimized for outdoor readability and minimum 16px mobile body text.
  • Mobile-first layout rules (320px baseline), navigation patterns (bottom nav / sidebar), and touch target constraints (≥44×44px).
  • Component and page patterns: course catalog, module/dashboard, lesson viewer, quiz UI, flashcards, AI tutor chat, admin course management, marketplace, billing flows, and expert dashboard.
  • Accessibility, dark mode mapping, offline indicator/banner, and bilingual FR/EN internationalization requirements.
  • Page review checklist and banned patterns to enforce readable, low-bandwidth, battery-friendly learning UX.

Quick Start

Design a mobile-first course catalog mockup for Sira using the green/gold palette, mapping tokens to Tailwind, ensuring 320px readability, 44×44px touch targets, and bilingual FR/EN labels.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I design a mobile-first UI layout for a bilingual learning platform?▼

To design mobile-first UI layouts for a bilingual learning platform, apply 320px baseline grids, ensure minimum 44x44px touch targets, and implement FR/EN internationalization rules for consistent readability.

What are the accessibility requirements for mobile learning interfaces on low-end devices?▼

Accessibility for mobile learning interfaces requires minimum 16px body text for outdoor readability, 44x44px touch targets, dark mode token mapping, and offline indicators to support learners on low-end devices.

How do I map a green and gold color palette to Tailwind design tokens?▼

Mapping a green and gold palette to Tailwind design tokens involves defining semantic status colors and branding variables within your Tailwind configuration to maintain consistent theming and support dark mode.

Can I use this design system for course catalogs, quizzes, and AI tutor chat interfaces?▼

Yes, this UI design system provides specific component and page patterns for course catalogs, quiz UIs, flashcards, AI tutor chat, admin dashboards, marketplace pages, and billing flows tailored for educational platforms.

What navigation patterns work best for 320px mobile-first learning applications?▼

For 320px mobile-first learning applications, bottom navigation bars and sidebars are the recommended patterns to ensure accessible navigation while maintaining readability and meeting minimum touch target constraints.

How do I handle offline indicators and dark mode in a mobile education UI?▼

Handling offline indicators and dark mode in a mobile education UI requires mapping dedicated Tailwind tokens for offline status banners and dark mode palettes to communicate trust and clarity on low-bandwidth devices.

Related Skills

Explore More Design & Creative Skills→
BenidrissaBenidrissa

react-components

Implement React/TypeScript components with Tailwind CSS and shadcn/ui.

Community
Advanced
BenidrissaBenidrissa

nextjs-app-router

Generate Next.js 15 App Router pages and layouts with server and client component patterns.

Community
Advanced
kyamsSRLkyamsSRL

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
PostalocityPostalocity
1

frontend-ui-ux-engineer

Define frontend design standards for visuals, typography, and accessibility.

Official
Intermediate