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

Ready to run

npx skills add https://github.com/Muath2000/TradeStation --skill frontend-design-muath2000

💬 Prompt for ChatGPT / Claude Chat▼

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.