Oiloil Ui Ux Guide

What it does

The Oiloil UI/UX Guide skill assists AI agents in providing style-neutral UI and UX consultations. It functions as a patient interviewer, prioritizing user preferences and constraints before offering suggestions. The skill adapts its approach based on the project's stage of development, from initial design to complex legacy systems, always aiming to understand the user’s goals before making recommendations.

When to use it

• Design System Definition: When establishing or refining a design system (e.g., selecting colors and fonts).
• Component Guidelines: To generate rules for specific UI components like settings pages or dashboards.
• Screen Review: For reviewing existing screen designs, either through direct visual input or pasted screenshots.
• Project Assessment: When needing an initial assessment of a project's current design state and direction.
• Design Direction Exploration: To explore different approaches to UI/UX challenges within a project.

Key capabilities

• Mode-based operation: Offers distinct modes: design (default), guide, and review.
• Project Stage Assessment: Automatically assesses the stage of a project (Blank, Half-finished, Mature, Complex Legacy, Uncertain) to tailor its approach.
• Code Analysis: Analyzes code files like tailwind.config, theme.ts, globals.css, and package.json to understand existing UI frameworks and token usage.
• Prioritized Listening: Focuses on understanding user needs and constraints before offering opinions or recommendations.
• Fact-based Descriptions: Communicates observations about a project's state using factual descriptions rather than subjective assessments.

Example prompts

• "Can you give me some guidance on the design of our settings page?"
• "Please review this screenshot of my dashboard." (followed by pasting an image)
• "Let’s pick colors and fonts for our new application."

Tips & gotchas

• Initial Code Review: The skill prioritizes a brief code review before offering any suggestions. This helps it understand the existing project context.
• Mode Awareness: Be explicit about the desired mode (design, guide, or review) to ensure accurate results. If ambiguous, the skill will default to "design" and announce this mode.
• User Preference is Key: The skill prioritizes user taste and constraints; be prepared to articulate your preferences for best results.