词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code ndf-ui-style-system-runner skill for interface principles

Turn product context and audience needs into guidance for layout, components, color, typography, and accessibility.

中文

Install in Claude Code

A local Claude Code project using NDF rules and matching skills from the same pinned GitHub revision. The maintainer reviews the advisory output.

  1. Review `.claude/skills/ndf-ui-style-system-runner/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/ndf-ui-style-system-runner/` in your project and save the reviewed file as `.claude/skills/ndf-ui-style-system-runner/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/ndf-ui-style-system-runner` in the slash menu.

Example task

Invoke /ndf-ui-style-system-runner and write style guidance from these fictional route card notes.
project `Route Cards` | audience=volunteers using a touch display
screens=route list and route detail | states `selected` and `unavailable`
constraint `existing monochrome palette` | requirement distinguish states without relying on color alone

What to check

Keep `existing monochrome palette`. Distinguish `selected` and `unavailable` with labels and component states. Give layout guidance for the list and detail and describe touch accessibility.

Original SKILL.md on GitHub · Updated

Frequently asked question

Does the style guidance choose a framework?

It describes UI principles, states, and trade-offs. The maintainer chooses the implementation framework.

Related skills from this repository