skills.rest
mosif16
mosif16COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-guide

Enforce a consistent 8px-grid design system across SwiftUI, Android, and web UI.

18|Updated Nov 23, 2025
Search Tags:#typography#cross-platform#ui-design#color-palette#design-guide
One-click install
npx skills add https://github.com/mosif16/codex-Skills --skill design-guide-mosif16
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/mosif16/codex-Skills/tree/main/skills/design-guide
Command: npx skills add https://github.com/mosif16/codex-Skills --skill design-guide-mosif16

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures modern, professional UI across SwiftUI, Android, and web platforms by enforcing a cohesive design system, typography, spacing, color usage, and interactive states. This Skill accelerates UI consistency and reduces design debt.

Core Features & Use Cases

  • Bundled Resources: Access reference materials like color palettes and component templates to speed UI implementation.
  • Design Principles: Clean and minimal aesthetics, one accent color, 8px grid, typography hierarchy, accessible interactive states.
  • Cross‑Platform UI: Guides for SwiftUI, Android, and web UI components to maintain a unified look and feel.

Quick Start

Review the bundled references at references/color-palettes.md and references/component-templates.md to begin applying the design system to your UI.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I maintain consistent UI design across SwiftUI, Android, and web platforms?▼

Apply a unified design system enforcing 8px spacing grid, neutral color palette with accent color, typography hierarchy, and interactive states across all platforms. This Skill provides bundled references and guidelines for SwiftUI, Android, and web components to eliminate design inconsistency.

What design principles should I follow for a cross-platform UI system?▼

Cross-platform UI design prioritizes clean, minimal aesthetics with a single accent color, consistent 8px grid spacing, defined typography hierarchy, and accessible interactive states. This Skill enforces these principles to accelerate implementation and reduce design debt across platforms.

Can I use bundled design resources to speed up UI component implementation?▼

Yes. This Skill includes bundled references like color palettes and component templates in the references folder. Review color-palettes.md and component-templates.md to apply pre-defined design patterns and accelerate consistent UI implementation.

How do I reduce design debt and ensure UI consistency in multi-platform projects?▼

Enforce a cohesive design system with explicit rules for spacing, color usage, typography, and interactive states. This Skill applies these constraints across SwiftUI, Android, and web platforms to maintain professional UI consistency and eliminate accumulated design inconsistencies.

Does this design system work with existing SwiftUI, Android, and web projects?▼

Yes. This Skill guides UI composition for buttons, forms, cards, layouts, and full screens across SwiftUI, Android, and web. Apply it when composing any UI elements to maintain consistent modern design without restructuring existing projects.

Related Skills

Explore More Design & Creative Skills→
Adrian-opoAdrian-opo

design-guide

Establish unified UI design standards for SwiftUI, Android, and web interfaces.

Community
Advanced
anavvanzinanavvanzin

agency-ui-designer

Design scalable UI design systems with tokens, components, and WCAG AA accessibility.

Community
Advanced
tyk-labtyk-lab

design-guide

Document a cross-platform UI design system standardizing spacing, color, typography, and components.

Community
Advanced
cometchatcometchat
74

cometchat-native-theming

Configure CometChat React Native theming and localization with provider components.

Official
Advanced