agentsclimarketplace

Ui design

Skill Pesty-Marketing/agent-skills/ui-design

Cross-agent skills (Agent Skills spec) for the Pesty team — install via npx skills add Pesty-Marketing/agent-skills

Install
npx -y skills add Pesty-Marketing/agent-skills --skill ui-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Apply Master UI Design + Practical UI frameworks to build or audit interface designs (components, layouts, typography, color, forms, buttons, navigation, copywriting). Invoke when user says "use ui-design," "audit this UI," "review the design," or asks for help building/improving an interface, component, or screen. General-purpose (not Pesty-specific; use the pesty-design skill for that).

SKILL.md

6.7 KB, as published. Nobody here has run it

UI Design Skill

Mode Detection

Determine mode before doing anything else:

  • Write mode: User wants to CREATE or BUILD an interface, component, or screen.
  • Audit mode: User wants to EVALUATE existing design against these frameworks.

WRITE MODE

Step 1: Establish requirements

Before designing anything, answer these questions:

  1. What is the interface trying to help the user accomplish?
  2. Who is the user? (Consider: poor eyesight, low computer literacy, reduced dexterity, cognitive impairments.)
  3. What screen sizes will this be used on? Start with the smallest.
  4. Are there brand colors or an existing design system?

Step 2: Start small, build up

Per Practical UI's modular design principle: start with the smallest components (buttons, inputs, avatars) and combine them into larger ones.

Read the relevant reference files for the components you are building:

  • Fundamentals: references/fundamentals.md. Covers interaction cost, cognitive load, WCAG, design systems.
  • Color: references/color.md. Covers palette, contrast ratios, system colors, dark mode.
  • Typography: references/typography.md. Covers type scale, line height, body size, alignment.
  • Layout and spacing: references/layout-spacing.md. Covers spacing scale, grouping, white space, grids.
  • Forms and buttons: references/components-forms-buttons.md. Covers labels, validation, button hierarchy, target sizes.
  • Navigation, cards, tables: references/components-navigation-cards-tables.md. Covers navigation patterns, card layouts, table row styles.
  • Copywriting: references/copywriting.md. Covers conciseness, sentence case, front-loading, descriptive links.

Step 3: Apply key non-negotiables

These rules apply to every interface, every time:

  1. WCAG 2.1 AA at minimum: 4.5:1 for text, 3:1 for UI components.
  2. Never use color as the only indicator of meaning: add icons, borders, or underlines.
  3. All interactive elements: at least 48pt by 48pt.
  4. Single column form layout with labels on top.
  5. One primary button per action group.
  6. Sentence case for all interface text.
  7. Minimum 18px body text. Line height at least 1.5.
  8. Left-align body text. Do not center or justify long text.

AUDIT MODE

Read references/scoring.md for the numeric rubric (100 points, 6 categories).

For each failure: state what is broken, cite which rule it violates and where in the reference files it is defined, and suggest the exact fix.

Audit checklist summary

Fundamentals (20 pts)

  • Every detail has a logical reason.
  • WCAG 2.1 AA contrast met everywhere.
  • Color is never the only indicator.
  • Common design patterns followed.
  • 48pt by 48pt minimum target sizes.

Typography (15 pts)

  • Consistent type scale (no more than 4 to 6 sizes).
  • Body text at least 18px.
  • Line height at least 1.5 for body text.
  • Line length 40 to 80 characters.
  • Long body text left-aligned.

Color (15 pts)

  • Predefined palette with consistent action color.
  • Visual hierarchy communicated via saturation and contrast.
  • System colors (red/amber/green) for status with icon backup.
  • Text not pure black or inaccessible light grey.
  • Dark mode: no pure white on pure black.

Layout and hierarchy (20 pts)

  • Clear visual hierarchy (not everything equal prominence).
  • Consistent spacing scale applied.
  • Generous white space (passes The Squint Test).
  • Elements aligned to a consistent edge or grid.
  • Related elements grouped by proximity.

Components (15 pts)

  • At most one primary button per group; hierarchy not color-dependent.
  • Button text is verb-noun format.
  • Form: single column, labels on top.
  • No placeholder text replacing labels.
  • Appropriate controls (radio buttons for up to 10 options, steppers for numbers).

Copywriting (15 pts)

  • Concise (no filler words, sentences under 20 words).
  • Sentence case throughout.
  • Front-loaded text.
  • Descriptive links and button labels.
  • Consistent vocabulary across the interface.

Troubleshooting

User provides a screenshot only: describe what you can observe. Note where you cannot verify contrast ratios without exact color codes and ask for them if the audit depends on it.

User asks about a specific component: read the most relevant reference file. Cite specific rules, not generic advice. If the rule has a number (48pt, 4.5:1, 18px, 1.5 line height), include it.

User pushes back on a rule: explain the rationale. Every rule in these reference files has a reason behind it (usability risk, cognitive load, accessibility, interaction cost). Share that reason, do not just repeat the rule.

User wants to break a rule intentionally: acknowledge the rule, acknowledge the tradeoff, and confirm the user understands what they are giving up (e.g., "using a dropdown here with 12 options increases interaction cost but saves vertical space; confirm that is the acceptable tradeoff").

Key numbers to memorise

These are the most cited specific values across both books:

RuleValueSource
Target size minimum48pt x 48ptPractical UI Ch.1, Ch.8; Master UI Buttons
Button spacing minimum8ptPractical UI Ch.8
Button gap for safety16ptPractical UI Ch.8
Small text contrast (WCAG AA)4.5:1Practical UI Ch.3
Large text / UI elements contrast3:1Practical UI Ch.3
Min body text size18pxPractical UI Ch.5
Min line height (body text)1.5Practical UI Ch.5; Master UI Typography
Heading line height1 to 1.3Master UI Typography
Ideal line length40 to 80 charactersPractical UI Ch.5
Mobile max line length9 words / 50 to 60 charsMaster UI Typography
Paragraph line height multiplier1.5x font sizeMaster UI Typography
Type scale multiplier (Major Third)1.250Practical UI Ch.5
Spacing scale8, 16, 24, 32, 48, 80ptPractical UI Ch.4
Min column padding in tables16px each sideMaster UI Tables
Dropdown threshold6 to 7 optionsMaster UI Selection Controls
Radio button thresholdUp to 10 optionsPractical UI Ch.7
iOS standard title size17pxMaster UI Typography
Hamburger menu element minimum44pxMaster UI Navigation

Maintained by Pesty Marketing · Browse the full skill catalog.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.