skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

app-design-system

Design application-specific design systems with navigation, state, form, and notification specifications.

Updated Aug 23, 2026
Search Tags:#design system#application UX#navigation architecture#state management UI#forms and validation#notification hierarchy#cross-platform design
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill app-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-design-system
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/app-design-system
Command: npx skills add https://github.com/andersoncollab/design-agent --skill app-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.”

Frequently Asked Questions about app-design-system

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

FAQPage Schema
How do I design a design system for SaaS and interactive applications instead of a marketing site?▼

To design an application-specific design system, define navigation architecture, application state patterns, form validation, and notification hierarchy for dense UI. This prevents mismatched marketing systems by standardizing interactive states like loading, empty, error, partial, and success for SaaS or dashboards.

What's the best way to standardize loading, empty, and error states across an application UI?▼

Standardize application UI states by defining a comprehensive state management system covering loading, empty, error, partial, and success patterns. This ensures every component behaves consistently across complex interactive products like PWAs and productivity tools.

How do I create accessible form patterns and validation rules for complex web apps?▼

Create accessible form patterns by specifying input behaviors with on blur and on submit validation, inline errors, and accessible error summaries. This form system specification ensures complex forms in interactive applications maintain consistent and accessible validation feedback.

How do I structure a notification hierarchy with toasts, banners, and modals?▼

Structure a notification hierarchy by setting severity-based rules across info, success, warning, error, and critical levels. Implement queueing and select correct UI choices like toasts, banners, or modals per context to maintain consistent alert UX in interactive applications.

Can I use one design system to align UX across Web, iOS, Android, and PWA platforms?▼

Yes, you can align UX across Web, iOS, Android, and PWA by defining platform adaptation guidance within your design system. This ensures the same interaction rules and UI principles hold everywhere while maintaining consistent navigation architecture across cross-platform apps.

When should I choose a sidebar plus top bar over a command palette for app navigation architecture?▼

Choose navigation architecture patterns like sidebar plus top bar, bottom tabs, or command palette flows based on your specific app type and user needs. Matching the navigation pattern to the application complexity ensures scalable UX for dense data and interactive workflows.

Related Skills

Explore More Design & Creative Skills→
buddypiabuddypia

feature-architect

Generate technical specifications and documentation from user stories and requirements.

Community
Advanced
marcosgcr3marcosgcr3

design-system

Generate structured design token systems and brand-compliant HTML slide assets.

Community
Advanced
solitasrohsolitasroh
2

phase-5-design-system

Standardizes UI design tokens and components across Web, iOS, Android, and Flutter projects.

Community
Advanced
xiaobuliukunxiaobuliukun

ui-ux-pro-max

Generate design systems with color, typography, and accessibility guidelines across web and mobile stacks.

Community
Advanced