skills.rest
HermeticOrmus
HermeticOrmusCOMMUNITY
Explore all skills by this author →
Website𝕏@dbodartmGitHub

uiux-guidelines

Provide UI/UX guidelines for SVG icons and emojis in React/Next.js applications.

1|Updated Feb 2, 2026
Search Tags:#ui#best practices#web development#icons#ux#design guidelines
One-click install
npx skills add https://github.com/HermeticOrmus/hermetic-claude --skill uiux-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-guidelines
Source: https://github.com/HermeticOrmus/hermetic-claude/tree/main/claude/skills/uiux-guidelines
Command: npx skills add https://github.com/HermeticOrmus/hermetic-claude --skill uiux-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear guidelines and best practices for UI/UX design, ensuring consistency, professionalism, and accessibility in web applications. It helps developers and designers make informed decisions about visual elements.

Core Features & Use Cases

  • Iconography Standards: Differentiates between icons and emojis, recommending SVG icons for professional use and providing patterns for their implementation.
  • Design Principles: Outlines fundamental UI principles like consistency, hierarchy, feedback, accessibility, and responsiveness.
  • Use Case: A development team is building a new dashboard. They can consult this Skill to understand when to use icons versus emojis, choose appropriate icon sources, and implement them correctly using provided React/Next.js patterns, ensuring a cohesive and professional look.

Quick Start

Provide guidance on using SVG icons versus emojis in a professional web application.

Frequently Asked Questions about uiux-guidelines

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

FAQPage Schema
What are the best practices for using SVG icons versus emojis in professional web applications?▼

To implement UI/UX guidelines for consistency, apply fundamental principles like visual hierarchy, feedback, and accessibility. Ensure responsive design by standardizing interactive elements and using SVG icons uniformly in your React/Next.js components to create a cohesive professional dashboard.

How do I implement SVG icons in a React or Next.js web application?▼

UI/UX design guidelines improve accessibility by outlining specific principles for consistent visual hierarchy, feedback, and responsiveness. Following these standards ensures that professional web applications provide clear interactions and usable experiences for all users.

Can I use these UI/UX design principles for building a new dashboard?▼

Yes, these UI/UX design principles are directly applicable to building a new dashboard. They provide actionable standards for choosing appropriate icon sources, implementing SVG patterns in React/Next.js, and ensuring the overall interface maintains professional consistency and accessibility.

What is the recommended approach for maintaining UI consistency in web development?▼

The recommended approach for UI consistency involves standardizing visual elements with SVG icons rather than emojis and adhering to core design principles like hierarchy and feedback. Following established UI/UX guidelines ensures a cohesive look and reliable responsiveness across the application.

Related Skills

Explore More Design & Creative Skills→
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
petbrainspetbrains
13

frontend-iconify

Search an icon API by concept and download SVGs for React components.

Official
Basic
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
jpoindexterjpoindexter
1

iconography-and-imagery

Guide grid-based icon construction, SVG delivery, and image optimization for UI design.

Community
Advanced