Home / starchild-ai-agent / official-skills · ui-design/SKILL.md · GitHub

ui-design skillA

ui-design is agent-read markdown (skill) from starchild-ai-agent/official-skills: UI/UX quality gate and build guide for every visual output — landing pages, dashboards, web apps, portfolios, and tools. ui-design remains the main entry point. Integration model: ui-design main trunk + taste-skill overlay. - ui-design owns engineering quality (track selection, component-library strategy, accessibility, responsiveness, theming, performance, preview delivery) - taste-skill is invoked inside the ui-design workflow for style decisions (Brief Inference, Design Dials, Anti-slop hard.

Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.

What the file says

# UI Design Skill

This skill is the **single entry point** for visual work.

Use it for any user-facing HTML/CSS/JS output: landing pages, dashboards, product UI, internal tools, and portfolio pages.

---

## Step 1 — Pick the build track

Choose deliberately before coding:

- **Track A (hand-built)**: static preview, vanilla HTML/CSS/JS, quick custom pages
- **Track B (component library)**: React/Vite/Next project using shadcn/ui, HeroUI, or coss ui

Track decision and component-library strategy are always owned by `ui-design`.

---

## Step 2 — Taste Overlay Contract (mandatory)

Inside ui-design workflow, invoke taste-skill for exactly these 3 style blocks:

1. **Brief Inference**
2. **Design Dials** (layout variance / motion intensity / visual density)
3. **Anti-slop hard rules**

### Boundary

- `ui-design` keeps ownership of engineering quality and delivery.
- `taste-skill` provides style direction and anti-template taste constraints.

This avoids overlap with ui-design’s engineering references (component libraries, a11y, preview, data dashboard implementation).

---

## Step 3 — Runtime order (use this every time)

1. Use `ui-design` to select Track A/B.
…

Read the whole file at its exact version.

How to install

Latest version
mdr add starchild-ai-agent/official-skills/ui-design@v1.2.0
Exact content
mdr add starchild-ai-agent/official-skills/ui-design@sha256:9663c49be9eeaabf

Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_mbyn7edjj33vg32s.svg)](https://markdownregistry.com/a/art_mbyn7edjj33vg32s)

1 badge views in 30 days

Versions

versioncommittedcommitsizeaudit
v1.2.0 latest2026-06-11 cdd8767 4,384 BA view · diff
v1.0.32026-06-04 3e63960 9,790 BB view · diff
v1.0.22026-06-04 0c5bbf2 9,789 BB view · diff
v1.0.12026-06-04 ed9305b 8,431 BB view · diff
v1.0.02026-06-03 516c9fc 8,431 BB view

Audit of the latest version

A  17 of 17 checks passed. Deterministic, no model, same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (4384 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

starchild-ai-agent/official-skills · 28 stars · license none · pushed 2026-09-18 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_mbyn7edjj33vg32s
GET https://markdownregistry.com/api/v1/resolve?ref=starchild-ai-agent/official-skills/ui-design
GET https://markdownregistry.com/api/v1/blob/9663c49be9eeaabf89abbfd72581fa699ffee5551831d6da96b913afed6da46d

Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

More from starchild-ai-agent/official-skills

1inch skill
starchild-ai-agent/official-skills · 1inch/SKILL.md · 1inch DEX aggregator: same-chain EVM swaps, SOL↔EVM cross-chain, limit orders. Use when swapping tokens with best…
v2.3.0 · audit B · 28 stars
PANews skill
starchild-ai-agent/official-skills · PANews/SKILL.md · PANews crypto news: headlines, articles, columns, events, smart money boards. Use when reading PANews coverage or…
v1.0.1 · audit A · 28 stars
shopify skill
starchild-ai-agent/official-skills · Shopify/SKILL.md · Shopify development skills: Admin GraphQL, Storefront, Hydrogen, Liquid, Polaris, Functions, POS, and more. Use when…
v1.0.0 · audit A · 28 stars
shopify-admin skill
starchild-ai-agent/official-skills · Shopify/shopify-admin/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-custom-data skill
starchild-ai-agent/official-skills · Shopify/shopify-custom-data/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-customer skill
starchild-ai-agent/official-skills · Shopify/shopify-customer/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-dev skill
starchild-ai-agent/official-skills · Shopify/shopify-dev/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-functions skill
starchild-ai-agent/official-skills · Shopify/shopify-functions/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-hydrogen skill
starchild-ai-agent/official-skills · Shopify/shopify-hydrogen/SKILL.md
git:20260914.5098bda · audit C · 28 stars
shopify-liquid skill
starchild-ai-agent/official-skills · Shopify/shopify-liquid/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-partner skill
starchild-ai-agent/official-skills · Shopify/shopify-partner/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars
shopify-payments-apps skill
starchild-ai-agent/official-skills · Shopify/shopify-payments-apps/SKILL.md
git:20260606.5f3d89c · audit C · 28 stars

Every file in starchild-ai-agent/official-skills

Other files named ui-design

ui-design skill
ginlix-ai/langalpha · plugins/langalpha_deliverables/skills/ui-design/SKILL.md · Design-quality reference for financial-research visual output: typography, color, composition, and avoiding generic AI…
git:20260915.83337aa · audit A · 1,774 stars
ui-design skill
tencentcloudbase/cloudbase-ai-toolkit · plugin/cloudbase/skills/ui-design/SKILL.md · Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes…
v2.34.6 · audit A · 1,123 stars
ui-design skill
tencentcloudbase/cloudbase-ai-toolkit · connectors/cloudbase-intl/skills/references/ui-design/SKILL.md · Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes…
v2.34.6 · audit A · 1,123 stars
ui-design skill
tencentcloudbase/cloudbase-ai-toolkit · config/source/skills/ui-design/SKILL.md · Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes…
v2.34.4 · audit A · 1,123 stars
ui-design skill
tencentcloudbase/cloudbase-ai-toolkit · config/.claude/skills/ui-design/SKILL.md · Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes…
v2.34.4 · audit A · 1,123 stars
ui-design skill
mblode/agent-skills · skills/ui-design/SKILL.md · Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing…
git:20260923.e7db33d · audit A · 126 stars
ui-design skill
mrpulor-gh/nuphus · plugin/skills/builtin/ui-design/SKILL.md
git:20260821.c0c683c · audit C · 77 stars
ui-design skill
outlinedriven/odin-claude-plugin · plugins/odin-design/skills/ui-design/SKILL.md · Use when directing, building, or auditing React/Next.js Tailwind UI: visual direction, responsive/dark-mode retrofits…
git:20260912.6e06ed3 · audit A · 38 stars

Browse by kind, by grade A, or by owner.