skills.rest
Gatsbyhateyou
GatsbyhateyouCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Facilitate collaborative UI style changes via screenshots and ASCII diagrams.

Updated Feb 17, 2026
Search Tags:#design#ui#collaboration#layout#frontend#style guide
One-click install
npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill ui-design-gatsbyhateyou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/Gatsbyhateyou/gatsby-website/tree/main/.cursor/skills/ui-design
Command: npx skills add https://github.com/Gatsbyhateyou/gatsby-website --skill ui-design-gatsbyhateyou

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the process of making UI style modifications by providing a clear, collaborative workflow that minimizes misinterpretations and rework.

Core Features & Use Cases

  • Visual Problem Identification: Uses screenshots and ASCII diagrams to pinpoint UI issues.
  • Solution Proposal: Offers multiple, clearly defined design options for user selection.
  • Iterative Refinement: Handles small adjustments efficiently after the main change is implemented.
  • Use Case: A user wants to change the padding and color of a button. This Skill will help them visually confirm the current state, propose different padding/color combinations, and then implement the chosen one.

Quick Start

Use the ui-design skill to adjust the spacing of the main navigation bar.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I collaborate on UI style changes without misinterpreting the requested adjustments?▼

Collaborating on UI style changes requires a structured visual feedback loop. This approach uses screenshots and ASCII diagrams to pinpoint layout and spacing issues, ensuring precise adjustments and minimizing rework.

What is the best way to visually propose layout modifications for a web application?▼

The best way to propose layout modifications is by presenting clearly defined design options visually. Using screenshots and ASCII art helps illustrate proposed changes to spacing and color, allowing users to select the most suitable option.

Can I use ASCII art to define current UI states before applying frontend style adjustments?▼

Yes, you can use ASCII art to define current UI states before applying frontend style adjustments. This visual communication method accurately maps existing layouts, enabling clear identification of spacing and padding issues.

How do I implement iterative UI refinements after a main style change is applied?▼

Iterative UI refinements are handled efficiently by proposing small, clearly defined adjustments after the main style change is implemented. This process ensures precise tweaks to elements like button color and spacing are applied correctly.

Do I need to provide screenshots to adjust web design spacing and color properties?▼

Yes, providing screenshots is necessary to adjust web design spacing and color properties. Clear visual communication via screenshots establishes the current state and confirms proposed modifications before implementation.

Related Skills

Explore More Design & Creative Skills→
codingSamsscodingSamss
11

peekaboo

Capture and analyze macOS UI screenshots to debug layout and style issues.

Community
Basic
Tresillo2017Tresillo2017
4

arrange

Analyze and adjust spacing, hierarchy, and grid structure in UI components.

Community
Advanced
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
AlterLab-IEUAlterLab-IEU
23

game-art-director

Codify a living Art Bible with style pillars, reference boards, asset pipeline rules, and collaboration protocols for game visual identity.

Community
Advanced