New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Design

by AnastasiyaW in AnastasiyaW/codex-claude-code-config

Unify product UI design, frontend implementation, and verification.

MITAuto-check passedFrontend & Design

Install UI Design

skills CLI
$ npx skills add AnastasiyaW/codex-claude-code-config --skill ui-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install AnastasiyaW/codex-claude-code-config ui-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend/ui-design .claude/skills/ui-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-design
GitHub stars
154
Token cost
~2.4k tokens
SKILL.md length
1,190 words
Files
3 (incl. references)
Skills in repo
50
Repo updated
First seen
Licence
MIT

At a glance

Unify product UI design, frontend implementation, and verification.

  • Works in 5 steps: Read ../ui-ux-pro-max/SKILL.md for a new… → Read ../frontend-design/SKILL.md while… → Read ../motion-framer/SKILL.md only when… → …
  • Asked to design
  • SKILL.md covers Editable visual blocks, Select the smallest supporting…, Work in one loop and Decision boundaries, plus 4 more sections
  • Calls python

What it does

UI Design is an agent skill from AnastasiyaW/codex-claude-code-config. Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product surface. Combine visual decisions with implementation. Do not use for backend-only work, generic architecture, standalone artwork or slide decks, or browser-test-only requests.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/editable-visual-assets.md`).

It sits in Frontend & Design, covering UI design, Infographics and Responsive design. The repository describes itself as: Claude Code, Codex, and multi-agent configuration system: principles, hooks, skills, and workflow patterns for AI-assisted development. The licence is MIT.

When your agent uses it

  • Asked to design
  • Mobile interface
  • Responsive layout
  • Interface animation

Example prompts

  • “/ui-design”

Requirements

  • Python 3

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read ../ui-ux-pro-max/SKILL.md for a new surface, substantial redesign, or
  2. Read ../frontend-design/SKILL.md while changing an HTML, browser, or UXP
  3. Read ../motion-framer/SKILL.md only when the changed surface is React/JS
  4. For a running surface, use the inspection tool that matches the surface
  5. For native Qt/QML, keep existing Qt Quick Controls and theme components as

What it can do on your machine

Read from SKILL.md and the folder at commit 67709af. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • w3.org
    • doc.qt.io
    • developer.mozilla.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Design loads about 2.4k tokens when it runs, and up to ~4.2k if it reads all its reference files. Until then it costs about 125 tokens; SKILL.md has 1,190 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~125
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from AnastasiyaW/codex-claude-code-config at commit 67709af, republished under its MIT licence (© AnastasiyaW). 1,190 words, ~2,407 tokens.

Download SKILL.mdSave it as .claude/skills/ui-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
ui-design
description
Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product surface. Combine visual decisions with implementation. Do not use for backend-only work, generic architecture, standalone artwork or slide decks, or browser-test-only requests.

UI Design

Use one product-surface loop. Preserve existing brand tokens and component conventions as the authority; do not replace them with a generic style guide.

This is the shared entry point for interface design. Supporting skills below are implementation details, not alternative design workflows. Read the shared contract once; a link back from a supporting skill is not a recursive reload.

Editable visual blocks

For an illustrated hero, promotional banner, product infographic, or a supplied visual to rebuild as editable UI, read Editable visual assets. Keep text, controls, data, and layout native to the product; generate only the imagery that the requested composition needs. A screenshot is a preview, not editable source or interaction proof. Ordinary forms and small CSS fixes skip this mode. Standalone posters and PowerPoint conversion are separate deliverables, not mandatory stages of UI work.

Select the smallest supporting skill set

  1. Read ../ui-ux-pro-max/SKILL.md for a new surface, substantial redesign, or a visual/UX decision that needs evidence. Use its local search scripts with a short, specific query. Treat a zero-result search as zero evidence; do not invent a recommendation. Do not persist a generated design-system file unless the task explicitly asks for it.
  2. Read ../frontend-design/SKILL.md while changing an HTML, browser, or UXP frontend. Keep the implementation native to the detected stack and existing component system. Do not apply its browser CSS/ARIA recipes to a native Qt/QML surface.
  3. Read ../motion-framer/SKILL.md only when the changed surface is React/JS and the project already uses motion/framer-motion, or the user has explicitly authorized adding it. Otherwise use the platform's native primitives; never add the package merely to animate a control.
  4. For a running surface, use the inspection tool that matches the surface: browser screenshot, interaction, accessibility-tree, and visual-diff tools are for browser/UXP/HTML. For native Qt/QML, use available native desktop and accessibility inspection instead. Never require a browser tool to prove a native application.
  5. For native Qt/QML, keep existing Qt Quick Controls and theme components as the authority. When custom controls or focus behavior change, consult the Qt Quick input-focus and accessibility guidance; verify native accessible semantics and keyboard behavior rather than substituting ARIA or CSS rules.

Do not load all four by default. A focused CSS fix normally needs only the implementation guidance and a focused proof.

Work in one loop

  1. Inspect the target surface, real stack, existing tokens/components, changed user flow, supported widths, and any current visual evidence.
  2. State a compact design contract before editing: primary user action, information hierarchy, reuse/new tokens, keyboard/contrast behavior, and platform-appropriate sizing and motion behavior. Browser breakpoints and prefers-reduced-motion are conditional, not universal desktop requirements. For a tiny local fix, keep this contract proportional to that fix.
  3. Implement the visual and interaction changes together. Prefer semantic structure, stable component boundaries, and design tokens over one-off pixel overrides. Do not add animation that obscures feedback, delays an action, or ignores reduced-motion preferences.
  4. Verify the changed flow at the narrowest real boundary: project checks first, then live behavior appropriate to the target when runnable and the risk warrants it. Use browser/UXP screenshot and accessibility-tree evidence for web surfaces; use native Qt/QML keyboard and accessibility inspection for desktop surfaces. Check the affected platform sizing, keyboard path, visible focus, contrast, overflow, and motion behavior rather than declaring a page "polished" from source code alone. A source read or screenshot without an identified running build is never runtime PASS.

Decision boundaries

  • Keep an established design system unless the task is explicitly a redesign.
  • Keep UI Pro Max as retrieval evidence, not as an authority over the product's brand, accessibility contract, or existing UX research.
  • Treat motion as progressive enhancement. The same action and information must remain clear with reduced motion and without animation support.
  • Do not broaden a UI request into unrelated product copy, backend, analytics, or global restyling without evidence that the requested flow requires it.
Show full SKILL.md (546 more words)Show less

Interaction-specific proof

Apply only the slice that the changed surface contains; this is not a demand to add a modal, custom validation, or extra animation to an otherwise simple UI. Browser-specific ARIA, CSS, and WCAG-pixel checks do not prove a native QML implementation; source inspection alone does not prove any runtime behavior.

  • Native Qt/QML custom control: verify actual Tab/focus-scope traversal, visible focus, documented keyboard activation, and Qt Quick accessible role/name/state with a native accessibility inspector where available. Keep a runtime receipt tied to the build identity.

  • Native Qt/QML modal/dialog: verify initial focus, keyboard operation, modal containment when applicable, and focus return to the invoking control after close.

  • Native Qt/QML form/error: verify keyboard reachability and that error/status text is exposed through the native accessibility path; do not infer it from a property declaration.

  • End-to-end retouch workflow: verify the real user path (for example, import, adjust, apply/save) in the running native app before calling the surface usable; code or a static screenshot is only source/visual evidence.

  • Modal dialog: verify that opening moves focus into the dialog, Tab and Shift+Tab stay in its sequence, Escape closes it when the product supports dismissal, and closing restores focus to the invoking control (or a documented logical successor). Do not claim aria-modal unless the background is actually inert. WAI-ARIA APG modal-dialog pattern

  • HTML/UXP form error: verify a detected invalid field is identified and its error is described in text. An inline message, summary, alert, or native validation can be appropriate only when the real browser/assistive-technology behavior supports the chosen path; color alone is not an error description. WCAG 2.2 SC 3.3.1

  • HTML/UXP dense pointer controls: for adjacent compact controls, assess the WCAG 2.5.8 boundary: a 24 by 24 CSS-pixel target or its spacing/equivalent/inline exception. Do not blindly enlarge an inline link or an essential dense control. WCAG 2.2 SC 2.5.8

  • Web motion: when motion changes, exercise the reduced-motion branch rather than assuming that a static source review proves it. prefers-reduced-motion communicates the user's request to reduce, remove, or replace non-essential motion. MDN reference

  • Native motion: verify the product's documented OS/app motion accommodation if it exists. Do not invent a CSS media-query requirement for QML.

Local UI Pro Max validation boundary

The vendored ui-ux-pro-max folder is a distributed skill, not its complete upstream repository. Its local acceptance checks are the data validation and a real, scoped retrieval query, for example:

powershell
python skills/frontend/ui-ux-pro-max/scripts/validate_data.py
python skills/frontend/ui-ux-pro-max/scripts/search.py "keyboard focus modal" --domain ux

Do not run or report test_catalog_refresh.py or test_relevance_evaluator.py as local PASS criteria: each imports an upstream-root script absent from the distributed skill. Preserve that boundary as NOT_RUN_UPSTREAM_DEPENDENCY, not as a failure repaired with stubs or as a passing test.

Gotchas

  • A fixed-canvas poster can look excellent while being unsuitable for a responsive interface. Do not import its absolute-pixel, single-file layout policy into a product.
  • A selectable raster layer is not editable text, a working control, or a data-bound chart. Name the actual editability boundary.

Troubleshooting

  • The agent found only frontend-design: follow its shared-entry link here once, then load only the reference needed for the changed surface.
  • A copy change requires regenerating the hero: extract the copy into native text and keep the illustration separate; verify wrapping and contrast.
  • The render is correct but an action cannot be used: inspect the running control, focus, and hit area. More screenshot polishing does not fix it.

© AnastasiyaW, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/frontend/ui-design of AnastasiyaW/codex-claude-code-config.

  • SKILL.md
  • agents/openai.yaml
  • references/editable-visual-assets.md

Open the folder on GitHubat commit 67709af

Compare with similar skills

UI Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Design this skillAnastasiyaW/codex-claude-code-config154—~2.4kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill138—~3kAutomated safety check: PassMIT
Better Designmarvkr/better-design254—~1.2kAutomated safety check: PassMIT
UI Design Systemtry-works/role-model117—~5kAutomated safety check: PassMIT
UI UX Pro MaxOhh-889/skyroc7956 repos~14kAutomated safety check: PassMIT
UI UX Design SystemHack23/cia239—~1.9kAutomated safety check: PassApache-2.0

Similar skills

  • Material Design 3 UI/UX Guide

    skydashnet/material-design-3-ui-skill

    Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.

    138 GitHub stars~3k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Better Design

    marvkr/better-design

    Build, improve, and review production interfaces with the Better Design MCP.

    254 GitHub stars~1.2k tokensUpdated 18 days ago
    Frontend & DesignAuto-check passed

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    117 GitHub stars~5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence for web, mobile, and desktop. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 6 repos~14k tokens
    Frontend & DesignAuto-check passed

  • UI UX Design System

    Hack23/cia

    Design system management, Vaadin component library patterns, consistent UI/UX, accessibility integration

    239 GitHub stars~1.9k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Aidd UI

    paralleldrive/aidd

    Design beautiful and friendly user interfaces and experiences.

    384 GitHub stars~242 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

More from AnastasiyaW/codex-claude-code-config

All 50 skills in this repo

  • Bug Reproducer

    AnastasiyaW/codex-claude-code-config

    Find likely software bugs in a codebase, rank concrete bug candidates, and prove or reject them with focused regression tests before proposing a fix.

    154 GitHub stars~4.1k tokensUpdated today
    Auto-check passed

  • Motion Framer

    AnastasiyaW/codex-claude-code-config

    A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

    154 GitHub starsUsed in 1 repo~5.2k tokens
    Auto-check passed

  • Proof Verify

    AnastasiyaW/codex-claude-code-config

    Plan-based verification - freeze acceptance criteria before building, then verify after with an independent fresh-context agent (the builder must not verify their own work).

    154 GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • Workflow Orchestration

    AnastasiyaW/codex-claude-code-config

    Написание и запуск Claude Code dynamic workflows (JS-оркестратор субагентов).

    154 GitHub stars~3.8k tokensUpdated today
    Auto-check passed

  • Notebooklm Grounded Research

    AnastasiyaW/codex-claude-code-config

    A skill your agent uses when: NotebookLM, notebooklm MCP, large documentation sets, courses, books, papers, or citation-backed research are mentioned.

    154 GitHub stars~2.4k tokensUpdated today
    Auto-check: warnings

  • Deepseek Provider Contract

    AnastasiyaW/codex-claude-code-config

    Validate a proposed DeepSeek API integration before any key or project context is sent: check thinking-mode tool-call history, strict-schema assumptions, bounded output, and provider data boundaries.

    154 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Categories

Questions about UI Design

What does UI Design do?

Unify product UI design, frontend implementation, and verification. UI Design is an agent skill from AnastasiyaW/codex-claude-code-config. Unify product UI design, frontend implementation, and verification.

When should I use UI Design?

UI Design fits situations like: asked to design; mobile interface; responsive layout; interface animation.

How do I install UI Design in Claude Code?

Run `npx skills add AnastasiyaW/codex-claude-code-config --skill ui-design -a claude-code`. Or copy the skill folder (skills/frontend/ui-design in AnastasiyaW/codex-claude-code-config) into .claude/skills/ui-design in your project. Claude Code loads it when a task matches its description.

How do I install UI Design in Codex?

Run `npx skills add AnastasiyaW/codex-claude-code-config --skill ui-design -a codex`. Or copy the skill folder (skills/frontend/ui-design in AnastasiyaW/codex-claude-code-config) into .agents/skills/ui-design in your project. Codex loads it when a task matches its description.

Can I use UI Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AnastasiyaW/codex-claude-code-config --skill ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-design, .gemini/skills/ui-design, .github/skills/ui-design and .opencode/skills/ui-design in your project.

What does UI Design need to run?

Going by SKILL.md and its folder, UI Design needs the command-line tools its instructions call (python). Our summary lists: Python 3.

Does UI Design access the network?

SKILL.md names 3 domains. As links in the text: w3.org, doc.qt.io and developer.mozilla.org. This is read from the text; nothing was executed.

Is UI Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Design use?

UI Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Design use?

About 2.4k tokens (SKILL.md is roughly 9.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.

What are the alternatives to UI Design?

Skills that share tags, products or a category with UI Design: Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 138 stars), Better Design (marvkr/better-design, 254 stars), UI Design System (try-works/role-model, 117 stars) and UI UX Pro Max (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Design?

AnastasiyaW (a GitHub user) maintains it in AnastasiyaW/codex-claude-code-config, which has 154 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 9, 2026.

Source: AnastasiyaW/codex-claude-code-config on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.