skills.rest
kvn8888
kvn8888COMMUNITY
Explore all skills by this author →
GitHub

openfoodjournal-ui

Define UI/UX design tokens, components, animations, and navigation for SwiftUI apps.

3|Updated Mar 16, 2026
Search Tags:#design system#ux design#ui design#swiftui#component catalog
One-click install
npx skills add https://github.com/kvn8888/OpenFoodJournal --skill openfoodjournal-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openfoodjournal-ui
Source: https://github.com/kvn8888/OpenFoodJournal/tree/main/.agents/skills/openfoodjournal-ui
Command: npx skills add https://github.com/kvn8888/OpenFoodJournal --skill openfoodjournal-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires swiftui, liquid-glass, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a consistent UI/UX design system for the OpenFoodJournal app, ensuring that new views and components adhere to the established design patterns and tokens.

Core Features & Use Cases

  • Design Tokens: Offers a set of predefined design tokens for colors, typography, and spacing.
  • Component Catalog: Includes a catalog of reusable UI components for common patterns.
  • Animation Conventions: Defines conventions for animations and transitions.
  • Navigation Architecture: Outlines the navigation structure and sheet management for the app.
  • Use Case: When developing new views or components for the OpenFoodJournal app, use this Skill to ensure consistency with the existing design system.

Quick Start

To implement a new view, first consult the design system documentation. Then, use the provided components and tokens to build your view, ensuring it adheres to the established patterns.

Frequently Asked Questions about openfoodjournal-ui

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

FAQPage Schema
How do I maintain consistent UI design when building new SwiftUI views?▼

A UI/UX design system maintains consistent SwiftUI views by providing predefined design tokens for colors, typography, and spacing alongside a catalog of reusable components that enforce established visual patterns.

Do I need Liquid Glass to implement this SwiftUI design system?▼

Yes, implementing this SwiftUI design system requires both the SwiftUI framework and Liquid Glass to properly execute its component catalog, animation conventions, and navigation architecture.

What is included in a SwiftUI component catalog for app development?▼

A SwiftUI component catalog includes reusable UI components for common patterns, predefined design tokens for colors and spacing, animation conventions, and navigation architecture guidelines to ensure uniform app development.

How do I use design tokens to standardize SwiftUI app components?▼

Apply predefined design tokens for colors, typography, and spacing directly to your views to standardize SwiftUI app components, ensuring all UI elements match the established design system.

What's the best way to manage navigation architecture in a SwiftUI app?▼

Follow a predefined design system that explicitly outlines the navigation structure and sheet management conventions to manage navigation architecture in a SwiftUI app effectively.

Related Skills

Explore More Design & Creative Skills→
zero3041zero3041
1

liquid-glass-design

Implement Liquid Glass design patterns for iOS 26 in SwiftUI, UIKit, and WidgetKit.

Community
Intermediate
linuxdevellinuxdevel
27

avalonia-pro-max/components

Automate Avalonia UI screen construction from reusable XAML component recipes.

Community
Advanced
sandrasocialsandrasocial
1

delight

Identify and propose moments of joy for UI components with design suggestions and CSS snippets.

Community
Intermediate
logeshv586-codelogeshv586-code

liquid-glass-design

Implement Apple's Liquid Glass design system for iOS 26 apps.

Community
Advanced