plugin87/ux-ui-agent-skills

apply-aesthetic

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token…

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill apply-aesthetic

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

Skill: Apply Aesthetic

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Choose and apply a design direction without breaking accessibility.

Steps

  1. Brief Inference first (mandatory) — before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference + Variance Mandate). Generating before deciding = slop.
  2. Pick a direction in ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md:
  • An archetype (recipe mapped to our tokens), or
  • A named library system — browse with python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list (or search <term> / show <name>); specs live in ${CLAUDE_SKILL_DIR}/../../../design-systems/library/<name>/DESIGN.md.
  1. Apply the Library Contract (in aesthetic-systems.md): re-point semantic.* tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to ${CLAUDE_SKILL_DIR}/../../../tokens/*.json.
  2. Verify contrast of every mapped color pair (${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / a11y-audit). A brand value that fails must be adjusted — taste never overrides POUR.
  3. Add motion per ${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md; run the pre-flight aesthetic check in design-taste.md.

Output

Updated/overridden semantic tokens + notes on type/space/motion, then render via design-code. Confirm the result passes both the aesthetic check and accessibility.

タスクに関連する項目

同じリポジトリから

関連する Skills

すべての Skills
plugin87
コミュニティ

a11y-audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.

導入数
1
GitHub Stars
2785
更新日
10月20日
plugin87
コミュニティ

brandkit

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.

導入数
1
GitHub Stars
2785
更新日
10月20日
plugin87
コミュニティ

critique

Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

導入数
1
GitHub Stars
2785
更新日
10月20日
plugin87
コミュニティ

data-dashboard

Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal, monitoring view, data console, or any screen whose job is to show many numbers at once. Covers the layout sequence, the SVG geometry, the accessibility contract per chart type, and the contrast traps tha

導入数
1
GitHub Stars
2785
更新日
10月20日