Registers the commercial-ui-ux skill for DSH: task-aware commercial UI/UX/GUI design, review, repair, and implementation (SaaS, dashboards, admin panels, forms, tables, design systems) with a reference-doc system and quality gates.
Install
# from GitHub (first run asks for allowBuilds approval — follow the hint, retry)
dsh plugin --profile web add github:zjsthmjialin/commercial-ui-ux-codex-skill
Any plugin you install runs third-party code with your own permissions — it can read your files, use your credentials, and reach the network, and tool approvals don’t sandbox it. GitHub-sourced plugins also run build scripts at install time. Only install sources you trust, and pin a commit (github:owner/repo#sha).
README
commercial-ui-ux is a Codex skill for designing, reviewing, repairing, and implementing commercial product interfaces.
It helps Codex work from user tasks, business flows, interaction risk, existing design systems, accessibility, and verification gates instead of treating UI work as a color-palette or component-styling exercise.
Contact author: zjsthm@gmail.com
Author website: zjsthm.pro
At A Glance
| Item | Status |
|---|---|
| Skill name | commercial-ui-ux |
| Current version | 0.1.0-rc.1 |
| Release status | Public release candidate, not a final non-RC release |
| Main use | Commercial UI/UX/GUI design, review, repair, and implementation |
| Best fit | SaaS tools, dashboards, admin panels, workflows, forms, tables, mobile business screens |
| Not for | Logo design, pure illustration, decorative skins, compliance judgment, deceptive UI |
What This Skill Improves
Commercial UI work often fails when the prompt only asks for something to look more polished. This skill pushes Codex to answer the questions that matter first:
- Who is using the interface, and what job are they trying to complete?
- What information, states, and safeguards are required for the workflow to be usable?
- What should be preserved from the existing product or design system?
- Where are loading, empty, error, disabled, permission, approval, rollback, and recovery states needed?
- How can the result be checked rather than merely described as attractive?
The intended result is not just a prettier screen. It is a more task-aware, safer, more maintainable interface proposal or implementation.
Install
Clone this repository into your Codex skills directory and keep the folder name as commercial-ui-ux.
Windows PowerShell
git clone https://github.com/zjsthmjialin/commercial-ui-ux-codex-skill "$env:USERPROFILE\.codex\skills\commercial-ui-ux"
macOS / Linux
git clone https://github.com/zjsthmjialin/commercial-ui-ux-codex-skill ~/.codex/skills/commercial-ui-ux
After installation, restart or refresh Codex, then ask it to use commercial-ui-ux for product interface work.
DeepSeek Harness (plugin)
commercial-ui-ux is also a DeepSeek Harness (DSH) plugin — one command installs the skill:
dsh plugin --profile web add dsh-commercial-ui-ux
Restart DSH Web, then ask your agent to "review this dashboard's usability" or "design a SaaS pricing page" — it loads the skill and follows its workflow.
- npm: https://www.npmjs.com/package/dsh-commercial-ui-ux
- Plugin source lives in the
dsh-commercial-ui-ux/directory of this repository.
Example Request
Use commercial-ui-ux to design a B2B SaaS customer health dashboard.
Task type: new product screen
Target users: customer success managers and sales leads
Platform: responsive web, desktop first
Core task: identify high-risk accounts, understand risk drivers, and assign follow-up work
Existing design system: light theme, 8px radius, compact table density
Visual source: infer from the product context
Must include: account table, health score, filters, loading/empty/error states, protected bulk actions
Avoid: marketing hero sections, decorative gradients, unrelated redesign
How Codex Should Use It
Start with SKILL.md, then read only the references needed for the current task.
| Situation | Read |
|---|---|
| Normal UI design or implementation | docs/01-commercial-ui-ux-rules.md |
| Scope, refusal, or boundary decisions | docs/02-skill-boundaries.md |
| Aesthetic, usability, business, or accessibility trade-offs | docs/03-design-constitution.md |
| Helping a user write a better request | docs/05-usage-guide.md |
| Completion checks before claiming UI work is done | docs/06-quality-gates.md |
| No brand guide or reference image is provided | docs/07-visual-strategy-inference.md |
| Public project overview in Chinese | docs/08-project-overview.zh-CN.md |
| Industry-specific UI patterns are needed | docs/09-industry-taxonomy.md, docs/10-industry-template-library.md |
Maintenance, validation, historical evidence, and generated output are not part of the ordinary runtime read path.
Included In This Public Core
SKILL.mdSKILL.zh-CN.mdREADME.mdREADME.zh-CN.mdCHANGELOG.mdVERSIONdocs/01-commercial-ui-ux-rules.mddocs/02-skill-boundaries.mddocs/03-design-constitution.mddocs/05-usage-guide.mddocs/06-quality-gates.mddocs/07-visual-strategy-inference.mddocs/08-project-overview.zh-CN.mddocs/09-industry-taxonomy.mddocs/10-industry-template-library.md
Not Included
This public installable core intentionally excludes:
- maintainer scripts;
- raw validation rounds;
- generated screenshots;
- historical handoff notes;
- exported evaluation packages;
- local release artifacts;
- plugin metadata;
- final non-RC release materials.
Evidence Status
The current release candidate is supported by the P6 public-release evidence group:
| Evidence group | Baseline | With skill | Delta |
|---|---|---|---|
| P6-H1 task modeling | 76/100 | 98/100 | +22 |
| P6-H2 existing-system repair | 64/100 | 98/100 | +34 |
| P6-H3 risk-state generalization | 68/100 | 98/100 | +30 |
Average delta: about +28.7, above the +25 release-preparation threshold used by this project.
This supports the claim that the skill improves task modeling, existing-product repair, workflow state handling, protected actions, risk recovery, and mobile continuity. It does not prove domain compliance, production readiness, or final design correctness without human review.
Boundaries
This skill is not:
- a logo, poster, or illustration generator;
- a pure color palette or styling catalog;
- a substitute for product, design, accessibility, security, legal, medical, financial, or compliance review;
- a tool for deceptive defaults, hidden costs, fake urgency, or dark patterns.
For existing products, the default behavior is to preserve information architecture, component semantics, routes, states, density, and visual tokens unless the user explicitly asks for a redesign.
Version
Current version: 0.1.0-rc.1
GitHub prerelease: https://github.com/zjsthmjialin/commercial-ui-ux-codex-skill/releases/tag/0.1.0-rc.1
This is a release candidate. No final non-RC public release has been assigned.
Author
- Author:
zjsthm - Contact author:
zjsthm@gmail.com - Author website: zjsthm.pro
- WeChat:
63656299
Links
More in this category
GanyuanRan/Aegis★ 1014
Software-engineering method pack for coding agents, with skills for baseline-first planning, systematic debugging, prompt hygiene, verification before completion, and repair/retirement tracking.
superdesigndev/superdesign-skill★ 417
Design skill for UI and marketing graphics on the Superdesign canvas: reads the repo for context, extracts its design system, then generates and iterates branchable design drafts, flow pages, and reusable components through the Superdesign CLI.
Ikalus1988/MisakaNet★ 387
Failure-recovery memory: search and record failure-recovery lessons from real engineering sessions, with BM25 + semantic RAG retrieval and a lessons knowledge base.
Vladimir-Human/humanizer-ru#dsh★ 100
Cleans AI traces from Russian text: finds chatbot copy-paste artefacts (ChatGPT, Gemini, Grok, Perplexity, DeepSeek) and rewrites the text into natural prose on request; 39 regex markers with an evidence registry, offline, text-only bundle.
dhicoc/dsh-reverse-skill★ 18
Complete reverse-skill pack (85 SKILL.md) as a DeepSeek Harness Cordis plugin: reverse engineering, authorized pentesting and security-research skill router.
zhaiyateng/dsh-design-skills★ 10
Design-aesthetics skill pack (10 styles: dark SaaS, minimal white, neumorphism, brutalism, glassmorphism, Japanese minimal, bento grid, cyberpunk, vaporwave, art deco) with runnable landing-page demos: tokens, component rules, forbidden lists, and acceptance checklists per style.