All skills
mblode avatar

/ui-design

@e7db33d
by Matthew Blodemblode/agent-skills136 stars
12

Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use ui-verification; for motion use ui-animation.

Use this Skill: https://skilld.dev/gh/mblode/agent-skills/ui-design

This session only. Nothing lands on disk.

guidelinescopywriting.md

≈345 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Copywriting

Covers: headings, taglines, subtitles, descriptions, labels, list items, button text, other UI copy.

  • Headings: periods or none, but stay consistent within a page.
  • Use proper ending punctuation on full sentences and paragraphs.
  • Use a period on standalone descriptive text: taglines, subtitles, tier descriptions like "For professionals and growing teams.", single-line descriptions like "For organizations that need more power and control."
  • Omit periods only on list items (e.g. feature bullets in pricing cards).
  • Never use emojis anywhere: headings, descriptions, buttons, labels, or any text.

UI microcopy

  • Name actions verb + noun ("Delete member", "Deploy project"), never bare "Confirm", "OK", or a lone verb.
  • Write errors as what happened + what to do next: "Build failed. Bundle exceeds 50 MB. Reduce it or raise the limit."
  • Toasts name the specific thing changed, no trailing period, never say "successfully": "Project deleted", not "Successfully deleted the project."
  • Empty states point to the first action: "No deployments yet. Push to your Git repository to create one."
  • In-progress states use the present participle plus a real ellipsis character: "Deploying…", "Saving…", never three periods.
  • Sentence case everywhere: labels, buttons, titles, tabs, body, helper text, and toasts. Final wording belongs to ghostwriter.

Source: SKILL.md on GitHub

No alerts8d5 checks · Risk SAFE
  • Gen Agent Trust Hub8d

    A comprehensive UI design and auditing skill that uses standard developer tools and trusted services like Tailwind CSS and placeholder asset APIs to build and verify React/Next.js interfaces. It includes explicit guardrails to prevent instruction following from analyzed project files.

  • Socket8d

    No alerts

  • Snyk8d

    Risk: LOW · No issues

  • Runlayer6mo

    4/5 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at e7db33d. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 1 hour ago.

Activeupdated last week

README badge

README badge for mblode/agent-skills/ui-design