Toolverse
All skills

webf-native-ui

by openwebf

Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openwebf
Category
Mobile
Views
2

About this skill

Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.

How to use

  1. Zainstaluj pakiet NPM dla swojego frameworka: dla React użyj @openwebf/react-cupertino-ui, dla Vue @openwebf/vue-cupertino-ui. Jeśli pracujesz w Flutter, zainstaluj webf_cupertino_ui.

  2. Zaimportuj komponenty z biblioteki do swojego projektu – dostępne są komponenty do nawigacji (Tab, TabBar, Scaffold), formularzy (TextField, Form Section, Form Row), dialogów (Alert Dialog, Action Sheet), list (List Section, List Tile), kontrolek (Button, Switch, Slider, Segmented Control, Checkbox, Radio) oraz ikon (1000+ SF Symbols).

  3. Zastosuj komponenty w swoim kodzie zamiast budować UI z HTML i CSS – na przykład użyj gotowego TextField zamiast pisać input z stylami, lub Alert Dialog zamiast tworzyć modal od podstaw.

  4. Komponenty automatycznie renderują się jako natywne widgety Flutter, dzięki czemu uzyskujesz natywny wygląd i wydajność na iOS bez dodatkowej konfiguracji.

  5. Skorzystaj z Cupertino color system i SF Symbols dostępnych w bibliotece, aby zachować spójność z designem Apple i wytycznymi Human Interface Guidelines.

  6. Zapoznaj się z pełną dokumentacją na https://openwebf.com/en/ui-components/cupertino, gdzie znajdziesz szczegóły każdego komponentu i przykłady użycia.

Related skills

flutter-expert

by sickn33

Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or

Mobile
54112

senior-architect

by alirezarezvani

Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack

Mobile
184296

slidev

by XIYO

Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.

Mobile
223353

mobile-ios-design

by wshobson

Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

Mobile
107284

openscad

by mitsuhiko

Create and render OpenSCAD 3D models. Generate preview images from multiple angles, extract customizable parameters, validate syntax, and export STL files for 3D printing platforms like MakerWorld.

Mobile
4291

react-native-architecture

by wshobson

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

Mobile
3978