skills.rest
MinhDuyDEV
MinhDuyDEVCOMMUNITY
Explore all skills by this author →
𝕏@MinhDuyDEVGitHub

ui-craft-principles

Apply UI craft principles to visual design and interaction details.

Updated Jun 18, 2026
Search Tags:#accessibility#frontend#components#design systems#animation#ui design#visual polish
One-click install
npx skills add https://github.com/MinhDuyDEV/mdpi --skill ui-craft-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-craft-principles
Source: https://github.com/MinhDuyDEV/mdpi/tree/main/.pi/skills/ui-craft-principles
Command: npx skills add https://github.com/MinhDuyDEV/mdpi --skill ui-craft-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams eliminate subtle interface quality issues that make polished products feel unfinished, improving visual consistency, usability, and perceived quality.

Core Features & Use Cases

  • UI Polish Guidelines: Applies practical principles for spacing, alignment, radii, shadows, animation, typography, and responsive behavior.
  • Interaction Quality Checks: Reviews controls, loading states, focus handling, motion behavior, and accessibility considerations before release.
  • Use Case: Use this Skill when reviewing a component library or refining a production interface that looks functional but needs a more professional finish.

Quick Start

Ask the UI craft principles skill to review my interface and identify visual polish improvements before shipping.

Frequently Asked Questions about ui-craft-principles

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

FAQPage Schema
How do I polish frontend components before shipping a production interface?▼

To polish frontend components, apply systematic UI craft principles to alignment, spacing, shadows, and typography to eliminate subtle visual inconsistencies and improve perceived interface quality.

What UI craft principles improve visual consistency in a design system?▼

UI craft principles for visual consistency involve standardizing component radii, shadows, animation behavior, and typography, ensuring that interface elements adhere to unified spacing and alignment standards.

How do I check interaction quality and accessibility for user-facing product releases?▼

Check interaction quality and accessibility by reviewing loading states, focus handling, motion behavior, and control responsiveness, ensuring frontend interfaces meet visual consistency standards before release.

Does this UI polish approach work for responsive frontend design targets?▼

Yes, this UI polish approach applies to responsive frontend design targets by systematically reviewing alignment, spacing, and interaction behavior across different viewports to maintain visual consistency.

When should I use a UI craft review for component refinement?▼

Use a UI craft review for component refinement when a production interface looks functional but needs a professional finish, addressing subtle quality issues in animation behavior and visual polish.

What is the best way to review a component library for visual polish?▼

The best way to review a component library for visual polish is to evaluate interaction quality, focus handling, and accessibility, applying systematic principles to spacing, typography, and animation behavior.

Related Skills

Explore More Design & Creative Skills→
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced
isiouisiou

frontend-design

Design distinctive frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
mohamedgshoaibmohamedgshoaib
5

emil-design-eng

Encode design engineering principles for CSS transitions and spring animations.

Community
Advanced
sgcarstrendssgcarstrends
21

security-audit

Audit codebases for OWASP Top 10 vulnerabilities and generate prioritized remediation reports.

Official
Advanced