Skills ui-design

📦

ui-design

Name: ui-design
Author: yunshu0909

Content revision r1 Safe ⚙️ External commands

Guide UI Refinement with Screenshot Workflow

UI changes often fail when layout issues are vague. This skill guides Claude, Codex, and Claude Code through screenshots, ASCII proposals, focused edits, and small refinements.

Supports: Claude Codex Code(CC)

🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "ui-design" from https://skillstore.io/skills/yunshu0909-ui-design.md and its manifest at https://skillstore.io/api/skills/yunshu0909-ui-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/yunshu0909-ui-design.md Signed manifest GET /api/skills/yunshu0909-ui-design/manifest Signed lockfile GET /api/skills/yunshu0909-ui-design/lockfile

Test it

Using "ui-design". The refresh button feels disconnected from the search box.

Expected outcome:

The assistant describes the current layout, then offers two ASCII alternatives that place search and refresh controls together or near the title.

Using "ui-design". Option A is close, but the spacing is too tight.

Expected outcome:

The assistant treats this as a micro-adjustment and changes only the spacing around the selected controls.

Using "ui-design". Can you make this page feel cleaner?

Expected outcome:

The assistant asks which area feels wrong and requests a screenshot before suggesting a broad redesign.

Security Audit

Safe

v4 • 7/8/2026 Open versioned report

Static command findings are false positives caused by Markdown code fences around ASCII UI diagrams. The high-entropy heuristic is also a false positive because SKILL.md is readable Markdown with Chinese text, emoji, and box-drawing characters.

Files scanned

110

Lines analyzed

Review items

False positives ignored

Risk Factors

⚙️ External commands (3)

SKILL.md:24-31 SKILL.md:31-41 SKILL.md:41-53

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/yunshu0909-ui-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/yunshu0909-ui-design/security.svg)](https://skillstore.io/skills/yunshu0909-ui-design?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/yunshu0909-ui-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/yunshu0909-ui-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/yunshu0909-ui-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

yunshu0909. (2026). ui-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/yunshu0909-ui-design/audits/4

BibTeX citation

@techreport{yunshu0909-yunshu0909-ui-design-2026,
  author = {yunshu0909},
  title = {ui-design security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/yunshu0909-ui-design/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "yunshu0909"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/yunshu0909-ui-design/audits/4"
identifiers:
  - type: other
    value: "skillstore:yunshu0909-ui-design:audit:4"
    description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

tencentcloudbase Recommended

tencentcloudbase-ui-design

Skillstore Score 80

Evidence Confidence Medium

Skillstore usage 11

Updated

2026-08-21

yunshu0909 Current

yunshu0909-ui-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 53

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Refine dashboard spacing

A frontend developer can align cards, controls, and headers after confirming the current layout.

Compare layout alternatives

A product designer can review two or three ASCII options before selecting a direction.

Handle small visual feedback

A product manager can request exact color, border, or spacing tweaks without reopening broad design choices.

Try These Prompts

Identify the UI issue

Use this skill to review the attached UI screenshot. First read the related files, then describe the current layout with an ASCII diagram.

Offer layout options

Show two or three layout options for the selected area. Include an ASCII diagram and one short reason for each option.

Implement the selected option

Apply option B only. Keep the edit focused on the selected layout change and avoid unrelated refactors.

Refine after review

Adjust only the spacing and border strength from the latest screenshot. Make the smallest change that addresses the feedback.

Best Practices

Provide a screenshot with the target area clearly marked.
Confirm the current ASCII layout before selecting a design option.
Keep each implementation focused on one visual change.

Avoid

Starting code changes before the current UI is confirmed.
Offering only one layout option for a meaningful design choice.
Combining a small style request with unrelated refactoring.

Frequently Asked Questions

What does this skill help with?

It helps structure UI style changes for layout, spacing, color, and component arrangement.

Does it generate final visual assets?

No. It guides design discussion and code edits, but it does not create standalone design files.

Why does it ask for screenshots?

Screenshots reduce ambiguity and help the assistant identify the exact area that needs work.

Can it handle quick tweaks?

Yes. After a design direction is chosen, small changes can be applied directly.

Does it support Claude Code and Codex?

Yes. The report lists support for Claude, Codex, and Claude Code.

Is this skill safe to use?

The reviewed file is documentation only. Static command warnings were Markdown fence false positives.

Developer Details

Author

yunshu0909

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/yunshu0909/yunshu_skillshub/tree/master/ui-design

Ref

64ca8af0f54a325752f08bd54e52151061ea659a

Maintenance freshness

7/20/2026

Usage

48 downloads · 134 views

File structure

📄 SKILL.md