How do I install the Maintaining UI Standards skill?

Run npx skillmds@latest add tomevault-io/maintaining-ui-standards in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Maintaining UI Standards safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Maintaining UI Standards?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Maintaining UI Standards free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Maintaining UI Standards?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Maintaining UI Standards by tomevault-io

Name: Maintaining UI Standards
Author: tomevault-io

Maintaining UI Standards

Maintain consistent UI/UX, enforce design system usage, and ensure accessibility/responsiveness. Use when designing screens, styling components, or reviewing UI implementation. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

UI/UX Standards

When to use this skill

When implementing new UI screens or components.
When applying styles or themes.
When reviewing UI/UX design choices.
When debugging layout or responsiveness issues.

Design System

Single Source of Truth: Always use the defined theme variables for colors, typography, and spacing. Do not hardcode values.
Color Palette:
- Use Primary, Secondary, and Accent colors from the theme.
- Use semantic names like Error, Success, Warning, Info.
Typography:
- Use defined font families and weights.
- Follow the type scale (e.g., Heading1, Body, Caption).
Spacing Scale:
- Stick to the 8px grid system: 4px (0.5x), 8px (1x), 16px (2x), 24px (3x), 32px (4x), 48px (6x).
Border Radius: Use consistent radii for related components (e.g., 4px for buttons, 8px for cards).

Components

Consistency: Use the project's reusable components from /components first. Avoid creating custom one-offs.
Platform Conventions: Respect platform differences where it matters (e.g., navigation styles), but maintain brand unity.
Accessibility (A11y):
- Ensure minimum touch target size (44x44 points).
- Provide accessibilityLabel and accessibilityHint.
- Support dynamic type (scaling fonts).
- ensure sufficient color contrast (WCAG AA).
Dark Mode: All components must support dark mode. Use semantic colors that adapt automatically.

Responsive Design

Mobile First: Design for the smallest screen first, then scale up.
Safe Areas: Always respect notches, status bars, and home indicators (use SafeAreaView).
Layouts: Use Flexbox for layout. Use percentages or flex ratios, rarely fixed pixels for width/height.
Testing: Verify UI on small phones, large phones, and tablets if supported.

User Experience

Feedback:
- Show skeleton loaders or activity indicators during data fetching.
- Display clear, helpful error messages (not "Something went wrong").
- Provide toast notifications for success states.
Interaction:
- Add active states to buttons (opacity change or background darkening).
- Use haptic feedback for significant actions (success, error, impact).
Navigation: Ensure navigation flow is intuitive and follows standard patterns (Stack, Tab, Drawer).

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: maintaining-ui-standardsdescription: Maintain consistent UI/UX, enforce design system usage, and ensure accessibility/responsiveness. Use when designing screens, styling components, or reviewing UI implementation. Use when this capability is needed.---# UI/UX Standards## When to use this skill- When implementing new UI screens or components.- When applying styles or themes.- When reviewing UI/UX design choices.- When debugging layout or responsiveness issues.## Design System- **Single Source of Truth**: Always use the defined theme variables for colors, typography, and spacing. Do not hardcode values.- **Color Palette**: - Use `Primary`, `Secondary`, and `Accent` colors from the theme. - Use semantic names like `Error`, `Success`, `Warning`, `Info`.- **Typography**: - Use defined font families and weights. - Follow the type scale (e.g., `Heading1`, `Body`, `Caption`).- **Spacing Scale**: - Stick to the 8px grid system: `4px` (0.5x), `8px` (1x), `16px` (2x), `24px` (3x), `32px` (4x), `48px` (6x).- **Border Radius**: Use consistent radii for related components (e.g., 4px for buttons, 8px for cards).## Components- **Consistency**: Use the project's reusable components from `/components` first. Avoid creating custom one-offs.- **Platform Conventions**: Respect platform differences where it matters (e.g., navigation styles), but maintain brand unity.- **Accessibility (A11y)**: - Ensure minimum touch target size (44x44 points). - Provide `accessibilityLabel` and `accessibilityHint`. - Support dynamic type (scaling fonts). - ensure sufficient color contrast (WCAG AA).- **Dark Mode**: All components must support dark mode. Use semantic colors that adapt automatically.## Responsive Design- **Mobile First**: Design for the smallest screen first, then scale up.- **Safe Areas**: Always respect notches, status bars, and home indicators (use `SafeAreaView`).- **Layouts**: Use Flexbox for layout. Use percentages or flex ratios, rarely fixed pixels for width/height.- **Testing**: Verify UI on small phones, large phones, and tablets if supported.## User Experience- **Feedback**: - Show skeleton loaders or activity indicators during data fetching. - Display clear, helpful error messages (not "Something went wrong"). - Provide toast notifications for success states.- **Interaction**: - Add active states to buttons (opacity change or background darkening). - Use haptic feedback for significant actions (success, error, impact).- **Navigation**: Ensure navigation flow is intuitive and follows standard patterns (Stack, Tab, Drawer).---> Converted and distributed by [TomeVault](https://tomevault.io/claim/mkas08) — claim your Tome and manage your conversions.

Frequently asked questions