design-guide
✓Ensures modern, professional UI design across SwiftUI, Android, and web platforms. Use when building ANY user interface components including buttons, forms, cards, layouts, navigation, or complete screens. Enforces clean minimal design, neutral color palettes with one accent color, 8px grid spacing system, proper typography hierarchy, and clear interactive states. Always reference before creating or modifying UI elements.
Installation
SKILL.md
Comprehensive design system ensuring every UI you build looks modern, professional, and consistent across all platforms (SwiftUI, Android Studio, web applications).
Spacing: 8, 16, 24, 32, 48, 64px Typography: 16px minimum body, max 2 fonts Colors: Neutral base + ONE accent Shadows: Subtle only Border radius: 6-12px most elements Interactive states: Always include hover, active, disabled, focus
Always reference this guide before creating any UI component. Consistency is key to professional design.
Ensures modern, professional UI design across SwiftUI, Android, and web platforms. Use when building ANY user interface components including buttons, forms, cards, layouts, navigation, or complete screens. Enforces clean minimal design, neutral color palettes with one accent color, 8px grid spacing system, proper typography hierarchy, and clear interactive states. Always reference before creating or modifying UI elements. Source: mosif16/codex-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/mosif16/codex-skills --skill design-guide- Source
- mosif16/codex-skills
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is design-guide?
Ensures modern, professional UI design across SwiftUI, Android, and web platforms. Use when building ANY user interface components including buttons, forms, cards, layouts, navigation, or complete screens. Enforces clean minimal design, neutral color palettes with one accent color, 8px grid spacing system, proper typography hierarchy, and clear interactive states. Always reference before creating or modifying UI elements. Source: mosif16/codex-skills.
How do I install design-guide?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/mosif16/codex-skills --skill design-guide Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/mosif16/codex-skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01