← Mobilalkalmazás-alapok · projekttervezési csomag adatlapja
Nézd meg, miben segít
Mobilos felületi komponensek
Világos hierarchiával, valódi tartalommal és teljes állapotokkal tervez újrahasználható mobilkomponenst méreteken és témákon át.
mobile-ui-components
Ezt a skillt használó ügynökök
Mikor hasznos?
Akkor használd, ha képernyőszél, hosszú szöveg vagy sötét mód megtöri a felületet.
Miben segít neked?
- Valós felhasználói információ köré rendezi a tartalmat és hangsúlyt.
- Biztonságos képernyőtérhez, telefonhoz és táblagéphez igazítja az elrendezést.
- Következetes betöltési, tiltott, hibás és témaváltozatot ad.
Például ezt kérheted
Tervezz közös fiókkártyát hosszú névvel, hiányzó fotóval, sötét móddal és nagy rendszerszöveggel. Hiányzó portré mellett hosszú fordított szerepkört mutass maximális támogatott szövegmérettel. A kártya tördelődjön, név és fő művelet levágása nélkül.
Részletes dokumentáció
Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.
Összecsukás
Mobile UI & Component Systems
Build cohesive mobile screens from a clear visual hierarchy, semantic tokens and reusable components that hold up with real content across screen sizes and themes.
1. Visual hierarchy and real content
- Establish a clear three-level hierarchy on every screen: primary focal point (key metric, content or primary CTA), secondary supporting context, and tertiary metadata.
- Design with realistic, representative content—including long localized strings, multi-line titles, missing avatars, zero values and large numbers—never idealized one-word placeholders.
- Keep card and list row density balanced: group related fields cleanly, limit each row to 3–4 data points, and use consistent spacing, alignment and typography tokens from the shared design system.
2. Safe areas, viewports and adaptive layout
- Respect OS safe areas on every screen: top status bar, notch / Dynamic Island, Android camera cutouts, bottom home indicator and gesture bar, and keyboard insets.
- Pin sticky bottom action bars above the safe-area inset and above the software keyboard when inputs are focused, with a subtle divider or elevation so scrolling content does not bleed into the action bar.
- Define how screens adapt from compact phones (
320–375ptwide) to large phones, landscape orientation and tablets/foldables (reflowing single-column lists into master-detail or responsive grids where appropriate).
3. Reusable component states and dark mode
- Specify every reusable mobile component (buttons, list items, inputs, chips, banners, sheets, dialogs) across its interactive and data states:
default,pressed,focused,disabled,loading,errorandselected. - Use semantic color and surface tokens so light mode, dark mode and elevated surfaces (modals, sheets, sticky bars) maintain clear separation and legibility without hardcoded hex values.
Before you finish
- Visual hierarchy highlights the primary task and holds up with long, realistic content.
- Safe areas, sticky bars, keyboard insets and compact-to-large screen widths are specified.
- Components reuse shared design tokens and define all interactive states in light and dark mode.
Csomagban lévő fájlok 1
SKILL.md