agentsclimarketplace
Sign in

Ui ux design system

Skill dhananjaym182/ai-ui-design-skills/skills/ui-ux-design-system

Premium neutral-first UI/UX design system and frontend workflow for product interfaces. Use when designing or reviewing pages, components, dashboards, settings screens, editors, forms, tables, modals, drawers, or interaction patterns that should feel calm, premium, responsive, system-driven, and production-ready. Also use when making design decisions about hierarchy, tokens, spacing, dark/light parity, component states, and cross-page consistency.From its SKILL.md

Install
npx -y skills add dhananjaym182/ai-ui-design-skills --skill ui-ux-design-system

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.4 KB, as published. Nobody here has run it

UI UX Design System

Overview

Use this skill to design or review product UI with a calm, premium, system-first approach. It is intended for application UI and real workflow surfaces, not decorative concept art.

Workflow

  1. Define the screen purpose, user goal, and single primary action.
  2. Choose the page structure before styling:
    • top bar or context row
    • intro or summary
    • main working area
    • supporting panels
    • secondary details
  3. Apply the design rules from references/design-system-skills.md.
  4. Implement with reusable components, semantic tokens, responsive layout, and real states.
  5. Final-check the screen:
    • hierarchy is obvious
    • accents are restrained
    • cards feel like one family
    • empty, loading, and error states exist
    • mobile layout still works

Defaults

  • Neutral-first surfaces
  • Premium SaaS product tone
  • Dark-first with light-mode parity
  • One clear primary action
  • Reusable components over one-off div soup
  • Semantic colors only for status

Use This Skill To

  • design internal product pages, dashboards, builders, settings, editors, tables, modals, and drawers
  • review UI hierarchy, spacing, tokens, states, and responsiveness
  • refactor noisy or inconsistent UI toward one coherent system
  • decide when to use cards, tabs, chips, alerts, tables, and side panels

References

Read references/design-system-skills.md when you need the full system:

  • design philosophy
  • tokens
  • spacing, radius, shadows, typography
  • desktop, tablet, and mobile layout rules
  • component rules
  • AI product patterns
  • accessibility and responsiveness

Constraints

  • Prefer existing product patterns when working in an established codebase.
  • Do not introduce decorative styles that break the system just to make one screen “special.”
  • Avoid colorful or noisy dashboards unless explicitly requested.
  • Keep output production-ready, not concept art.

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.