skills.rest
heidsoft
heidsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@heidcloudGitHub

frontend-ui-details-fix

Audit frontend UI details for boundaries, tooltips, responsiveness, accessibility, and visual consistency.

57|13|Updated Jul 12, 2025
Search Tags:#ui#frontend#ux#details#accessible-design#tooltip
One-click install
npx skills add https://github.com/heidsoft/itsm --skill frontend-ui-details-fix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-details-fix
Source: https://github.com/heidsoft/itsm/tree/main/itsm-frontend/.trae/skills/frontend-ui-details-fix
Command: npx skills add https://github.com/heidsoft/itsm --skill frontend-ui-details-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI/UX polish process ensures boundary handling, tooltips, settings panels, responsive layouts, accessibility, and visual consistency are addressed, resulting in cohesive and reliable interfaces.

Core Features & Use Cases

  • Boundary alignment and consistent spacing across components
  • Tooltip coverage for truncated text and icon-only controls
  • Accessible, responsive settings panels and layout patterns
  • Practical workflow that guides designers and developers to polish UI details
  • Use Case: when core features work but micro-interactions and visual polish are missing, apply this workflow to harmonize the UI

Quick Start

Run the Frontend UI Details Fix Workflow to audit and apply polish across frontend components.

Frequently Asked Questions about frontend-ui-details-fix

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix UI details like boundary handling and tooltips in my frontend application?▼

To fix UI details in frontend applications, follow a checklist-driven workflow that audits boundary alignment, adds tooltips for truncated text, and ensures visual consistency across components. This process improves usability and reliability.

What is the best way to ensure accessible and responsive settings panels during development?▼

The best way to ensure accessible settings panels is to apply a UI polish workflow that checks responsive layout patterns and accessibility compliance. This harmonizes visual consistency and boundary alignment across components.

When do I need to add tooltips for icon-only controls and truncated text?▼

You need tooltips for icon-only controls and truncated text when core features work but micro-interactions and visual polish are missing. Adding tooltip coverage ensures cohesive interfaces and a flawless user experience.

Can I use a checklist-driven workflow to audit visual consistency across components?▼

Yes, you can use a checklist-driven workflow to audit visual consistency across components. It provides actionable guidance and example snippets to help developers implement boundary handling and UI polish in real projects.

Does UI polish workflow apply to both development and QA phases?▼

Yes, the UI polish workflow applies to both development and QA phases. It guides designers and developers to harmonize UI details, ensuring accessible layouts, proper tooltip coverage, and consistent spacing.

Related Skills

Explore More Design & Creative Skills→
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
tkerseytkersey
66

web-browser

Automate Chrome/Chromium via CDP to navigate, click, fill forms, evaluate JavaScript, and capture screenshots.

Community
Intermediate
MinhDuyDEVMinhDuyDEV

ui-craft-principles

Apply UI craft principles to visual design and interaction details.

Community
Intermediate
Ankurjain1121Ankurjain1121

UI Audit

Audit React UI components for style, accessibility, and UX issues.

Community
Advanced