skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

interface-design

Plan UI systems and define UX flows for software interfaces.

Updated Apr 14, 2026
Search Tags:#accessibility#ui-ux#user-flows#design-system#responsive-design#aesthetic-direction#component-hierarchy
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill interface-design-brunoamsilva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/interface-design
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill interface-design-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps product teams and designers make deliberate UI/UX decisions before implementation to reduce rework, align stakeholders, and create cohesive visual systems and flows that meet user goals.

Core Features & Use Cases

  • Aesthetic Direction: Define tone, color world, typography, and differentiation to give the product a coherent visual identity.
  • User Flows & Edge Cases: Map entry → action → result flows, list edge cases, and specify validation and recovery paths for complex interactions.
  • Component Hierarchy & State: Outline component responsibilities, state requirements, and where state should be colocated to simplify implementation.
  • Use Case: Plan a checkout flow by committing to an aesthetic direction, mapping steps and edge cases, creating a component hierarchy, and specifying loading, empty, and error states before engineering begins.

Quick Start

Ask the skill to define an aesthetic direction, map the primary user flow with edge cases, and produce a component hierarchy with required state for the feature.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I plan UI systems and define UX flows for a new software feature?▼

To plan UI systems and UX flows, define a clear aesthetic direction, map the primary user journey from entry to result, outline component hierarchy, and specify validation, accessibility, and responsive behavior checkpoints before implementation begins.

What is the best way to map user flows and handle edge cases during interface design?▼

Mapping user flows requires detailing the entry, action, and result sequence, while handling edge cases involves explicitly listing validation, recovery paths, loading, empty, and error states to ensure robust product interaction design.

How do you define component hierarchy and state requirements for a product interface?▼

Defining component hierarchy involves outlining individual component responsibilities and specifying where state should be colocated, which simplifies implementation by clarifying state requirements and structural relationships across the software interface.

Does planning a UI system require specifying accessibility and responsive behavior beforehand?▼

Yes, planning a UI system requires specifying accessibility considerations and responsive behavior specifications upfront to create cohesive visual systems that meet user goals across different devices and interaction contexts.

Can I use this approach to align stakeholders and reduce rework before engineering begins?▼

Yes, making deliberate UI and UX decisions before implementation aligns stakeholders on aesthetic direction and component hierarchy, reducing rework by establishing cohesive visual systems and validated user flows early.

Related Skills

Explore More Design & Creative Skills→
wukangcheng2944wukangcheng2944

shape

Conduct a structured interview to gather context and produce a design brief.

Community
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
fixpoint-labsfixpoint-labs
2

fsd:prototype

Prototype FSD blocks, patterns, capabilities, and UI variants for testing.

Official
Advanced