app-design-system

What problem does it solve?

This Skill prevents mismatched “marketing site” design systems by helping you design a consistent, scalable system for interactive applications with real states, dense data, and app navigation.

Core Features & Use Cases

• Navigation architecture for apps: Choose patterns such as sidebar + top bar, bottom tabs, or command palette flows based on your app type and user needs.
• Application state system: Define loading, empty, error, partial, and success patterns so every component behaves consistently.
• Form system specification: Create input patterns and validation rules (on blur, on submit, inline errors, and accessible error summaries) for complex forms.
• Notification hierarchy: Set severity-based rules (info, success, warning, error, critical) with queueing and correct UI choices per context.
• Platform adaptations: Align interaction and UI rules across Web, iOS, Android, and PWA so the same UX principles hold everywhere.

Quick Start

Tell the AI: “Create an application design system for a compact, real-time SaaS web app with a sidebar and Cmd+K, including full loading/empty/error/partial/success state specs, accessible form patterns, and a toast/banner/modal notification hierarchy.”