UI/UX, logos, slides, and image generation (7.3K skills)
Review button sizes and placement using Fitts's Law, which relates movement time to target size and distance. Plan touch areas and pointer controls that are easier to reach and activate, while considering spacing and accidental taps.
Design swipe, drag, long-press, and other touch or pointer interactions with clear hints and feedback. Define activation thresholds, resolve conflicting gestures, and provide button or menu alternatives so essential actions remain accessible.
Write specifications for a reusable interface component, covering its parts, settings, variants, states, and behavior. Give designers and developers shared guidance on accessibility, keyboard interaction, edge cases, and appropriate use.
Create consistent naming rules for components, layers, files, and design tokens—named values used in a design system. Use structured patterns and examples to make names easier to predict, search, and maintain as the system grows.
Turn design results into reports that connect user behavior, product performance, and business value. Organize metrics and qualitative evidence into scorecards, before-and-after cases, or annual summaries, while acknowledging other factors that may have influenced results.
Design and implement mobile screens with Expo and React Native, using real apps as references. Refine platform-standard controls, navigation, themes, and motion, then inspect screenshots and flow recordings in a simulator to find and fix defects.
Research real screens, user journeys, and interface elements from top-grossing mobile apps through Appllama MCP, an agent connection to its design library. Collect visual references and organize findings to guide new screens or improve existing ones.
Build a consistent visual system for an Expo app using shared colors, spacing, text styles, and reusable components. Extend the app’s existing theme and identify hardcoded values or component differences that make screens look inconsistent.
Create, extend, or audit design tokens, reusable settings for colors, typography, spacing, and other visual properties. Organize them into three layers in DTCG JSON, check palette contrast, and validate file structure and references between tokens.
Rebuild interfaces from screenshots or mockups by extracting colors, typography, spacing, and layout rules. Store those choices as reusable design values, create accessible components, and compare rendered screenshots with the reference.
Clarify a screen or component brief before building. Review existing project context, ask only questions that affect the work, and record assumptions, scope, content conditions, and completion criteria in a brief reviewers can check later.
Design and build web pages or app screens from an initial request. The workflow defines audience and visual direction, establishes shared style values, implements mobile layouts, and checks interaction states, responsive behavior, and the rendered result.
Translate a desired visual style into design tokens, shared settings for colors, typography, spacing, and motion. Choose an archetype or one of 138 named design systems, apply its direction, and verify contrast and accessibility.
Build dashboards and trading screens with many metrics, charts, and sortable tables. The skill guides visual hierarchy, SVG graphics drawn without a chart library, numerical consistency, accessibility, dark themes, and layouts that adapt to smaller screens.
Keep Figma designs and code aligned by mapping shared design values to Figma Variables and choosing a sync direction. Check theme mappings and component variants, sizes, and interaction states to identify gaps between design and implementation.
Review an existing screen or product using six weighted quality dimensions and Nielsen’s ten usability principles. Receive an overall score, a prioritized findings table, and concrete recommendations tied to shared design tokens, the named values used for styling.
Manage changes to a design system with version rules, contribution criteria, and deprecation plans. Classify updates by their impact, assess candidates for shared use, and document replacements, migration steps, and release changes.
Apply shared rules when building or reviewing interfaces, including consistent themes, meaningful color settings, mobile layouts, and interactive states. It defines automated checks and visual reviews so completion reports reflect measured results and clearly identify unverified work.
Turn an idea into progressively more detailed prototypes, starting with content and layout before visual design and code. Map user journeys, include error paths, and define usability test tasks and success criteria for each stage.
Build a brand design foundation from a brief, covering color, typography, spacing, and motion. Generate reusable design tokens, named values shared across an interface, plus a single CSS theme with light and dark modes and contrast checks.
Create specifications for UI components such as buttons, inputs, and dialogs. Define structure, variants, sizes, interaction states, accessibility, and design tokens—shared values for colors and dimensions—so implementation follows a consistent reference.
Improve an existing website or app by auditing its design, prioritizing issues, and refining colors, typography, spacing, and interactive states. The workflow preserves existing behavior, unifies page themes, and includes accessibility and functional checks.
Write or review interface text for buttons, errors, empty screens, notifications, and labels. Match tone to the user's situation, explain problems and next steps clearly, and check wording for consistency, inclusion, character limits, and translation readiness.
Connect project design tokens, reusable visual settings, with external design systems. Map settings by their purpose, produce a correspondence table and migration plan, and verify color contrast, interface states, and dark mode across the mapped settings.