skills.rest
Muath2000
Muath2000COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design accessible, responsive frontend interfaces with design tokens and WCAG 2.2 AA compliance.

Updated Feb 22, 2026
Search Tags:#accessibility#design system#component library#frontend development#ui design#ux
One-click install
npx skills add https://github.com/Muath2000/TradeStation --skill frontend-design-muath2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Muath2000/TradeStation/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Muath2000/TradeStation --skill frontend-design-muath2000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating unique, high-quality, and accessible user interfaces for SaaS platforms, moving beyond generic AI aesthetics.

Core Features & Use Cases

  • Design System Governance: Ensures all UI elements adhere to a defined design token system.
  • Accessibility Compliance: Guarantees adherence to WCAG 2.2 AA standards.
  • Responsive & Themed Design: Creates interfaces that work across all devices and support dark mode.
  • Use Case: Design a new dashboard for a B2B analytics platform, ensuring it's visually distinct, accessible to all users, and maintains brand consistency across light and dark themes.

Quick Start

Design a responsive dashboard layout with a sidebar and main content area using a modern, clean aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a responsive dashboard layout that meets WCAG 2.2 AA accessibility standards?▼

To design an accessible SaaS dashboard, this frontend design Skill architects responsive interfaces using design tokens and governance patterns that guarantee WCAG 2.2 AA compliance across all components.

What's the best way to build a component library for a B2B SaaS platform?▼

Building a component library for SaaS platforms requires establishing a design token system that governs UI elements. This Skill architects production-grade component libraries that maintain visual consistency and brand identity.

How do I create UI themes for dark mode without generic AI aesthetics?▼

Creating distinct dark mode UI themes involves architecting themed design systems with tokens that avoid generic AI aesthetics. This Skill crafts unique visual languages supporting both light and dark themes for SaaS platforms.

Can I use design tokens to govern a frontend design system across different devices?▼

Yes, design tokens can govern frontend design systems across devices by defining responsive patterns. This Skill creates token-based architectures ensuring visual consistency and accessibility across all screen sizes.

What is frontend design system governance and when do I need it for UI development?▼

Frontend design system governance is the enforcement of design token rules to maintain UI consistency. You need it when architecting production-grade SaaS interfaces to ensure accessibility, performance, and brand compliance.

Does this approach to frontend development work for creating distinctive UX for analytics platforms?▼

Yes, this approach works for analytics platforms by architecting distinctive, accessible user interfaces. It creates unique visual languages for B2B SaaS dashboards, moving beyond generic AI aesthetics while maintaining accessibility.

Related Skills

Explore More Design & Creative Skills→
ouakarouakar

ui-designer

Define UI design systems and UX specifications bridging BRD and frontend implementation.

Community
Advanced
gepetojjgepetojj
1

shadcn-ui-expert

Guide React/Next.js developers in selecting and integrating shadcn/ui components.

Community
Advanced
efekrbasefekrbas
41

tailwind-design-system

Design Tailwind CSS design systems with semantic tokens and accessible variants.

Community
Advanced
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic