agentsclimarketplace
Sign in

Saas ui ux designer skill typography flex

Skill dhananjaym182/ai-ui-design-skills/skills/saas-ui-ux-designer-skill-typography-flex

Typography-first SaaS UI/UX workflow for internal product screens and components. Use when designing or refactoring dashboards, settings pages, editors, builders, tables, or modals where typography hierarchy, flex/grid layout, spacing rhythm, and premium neutral surfaces need to be the main organizing system. Also use when a UI feels cramped, visually noisy, misaligned, or inconsistent.From its SKILL.md

Install
npx -y skills add dhananjaym182/ai-ui-design-skills --skill saas-ui-ux-designer-skill-typography-flex

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

  • 15 stars15 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.

SKILL.md

2.1 KB, as published. Nobody here has run it

SaaS UI UX Designer Skill Typography Flex

Overview

Use this skill to design calm, premium SaaS UI where typography and flex/grid layout carry the hierarchy. Favor readable product structure over decorative styling.

Workflow

  1. Define the screen purpose, main action, and primary vs secondary zones.
  2. Start with layout first:
    • flex vs grid
    • sticky vs flowing regions
    • main vs supporting panels
    • desktop vs mobile stacking
  3. Establish typography hierarchy before decoration.
  4. Apply neutral surfaces, restrained accent use, and consistent card rhythm.
  5. Check states, spacing, and responsiveness.
  6. Read references/typography-flex.md for the detailed rules when needed.

Defaults

  • Typography drives hierarchy
  • Flex/grid drives structure
  • Neutral surfaces with restrained accent
  • One clear primary action per zone
  • Reusable patterns over one-off layouts
  • Settings and builder pages should feel product-grade, not admin-raw

Use This Skill To

  • redesign SaaS settings pages
  • improve dashboard or editor layout rhythm
  • fix misalignment, cramped cards, or noisy spacing
  • choose between stacked, split, and sticky panel layouts
  • make internal product UI feel premium and production-ready

References

Read references/typography-flex.md for:

  • typography hierarchy rules
  • flex and grid layout recipes
  • section and card composition
  • settings page structure
  • common UI anti-patterns

Constraints

  • Prefer existing product tokens and components when present.
  • Keep output responsive and production-ready.
  • Avoid decorative clutter, loud color, and concept-art styling.

Keep looking

Skills are one crate of 627,801. 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.