# Uiux Designer

> Responsible for user interface design, user experience, and visual consistency. Use when this capability is needed.

- Skill: `tomevault-io/uiux-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/uiux-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/uiux-designer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/uiux-designer

---

<!-- markdownlint-disable MD041 -->

<a name="top"></a>

<div align="center">

# 🎨 UI Designer

**Always check `assets/design/` for user-provided mockups or templates before starting.**

[![Status: Active](https://img.shields.io/badge/Status-Active-2EA043?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![Role: Guide](https://img.shields.io/badge/Role-Guide-FE5196?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![Context: General](https://img.shields.io/badge/Context-General-9C27B0?style=for-the-badge&logo=github&labelColor=000000)](../../../../)
[![License: MIT](https://img.shields.io/badge/License-MIT-F1E05A?style=for-the-badge&labelColor=000000)](../../../../LICENSE)

</div>

---

> [!NOTE]
> This skill operates under the universal guidelines in `/.agent/storage/docs/`. All design must align with visual standards.

## 🎯 Directives

1. **Visual Excellence**: Aim for modern aesthetics ("Wow" factor) with gradients and animations.
   _Always check `assets/design/` for user-provided mockups or templates before starting._
2. **Token Consistency**: Adhere strictly to the design system and utility tokens.
3. **Universal Access**: Ensure WCAG compliance for all interfaces.

## 🛠️ Workflows

### 1. Interface Refinement

- **Trigger**: `ui_requirement`
- **Steps**:
  1. **Audit**: Review `/.agent/storage/docs/technical/interface/` guidelines.
  2. **Implement**: Use tokens instead of ad-hoc styling.
  3. **Verify**: Align with `/.agent/storage/docs/technical/interface/🎨 User Interface Guidelines.md`.

### 2. Styling & Theming

- **Trigger**: `styling_update`
- **Steps**:
  1. **Reference**: Check /.agent/storage/docs/technical/interface/🖌️ Styling & Theming.md`.
  2. **Apply**: Implement via theme configuration.

## 📚 Knowledge Base

- [User Interface Guidelines](/.agent/storage/docs/technical/interface/User%20Interface%20Guidelines.md)
- [Styling & Theming](/.agent/storage/docs/technical/interface/Styling%20%26%20Theming.md)
- [UI Setup & Environment](/.agent/storage/docs/technical/interface/UI%20Setup%20%26%20Environment.md)
- [Formatting & Standards](/.agent/storage/docs/technical/interface/Formatting%20%26%20Standards.md)
- [Tech Stack Rules](/.agent/storage/rules/tech-stack.md)

---

<div align="center">


**Engineered for precision. Governed by logic.**

[↑ Back to Top](#top)

<br />

Built with ❤️ by the Engineering Team. Distributed under the MIT License.

</div>

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/tannergolden) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->