New: 97,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

Mcaf UI UX

by managedcode in managedcode/Storage

Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration.

MITAuto-check passedFrontend & Design

Install Mcaf UI UX

skills CLI
$ npx skills add managedcode/Storage --skill mcaf-ui-ux -a claude-code

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

GitHub CLI
$ gh skill install managedcode/Storage mcaf-ui-ux --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/managedcode/Storage.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/mcaf-ui-ux .claude/skills/mcaf-ui-ux && 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
mcaf-ui-ux
GitHub stars
138
Token cost
~888 tokens
SKILL.md length
410 words
Files
3 (incl. references)
Skills in repo
41
Repo updated
First seen
Licence
MIT

At a glance

Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration.

  • Works in 3 steps: Read the nearest AGENTS.md and confirm… → Run this skill's Workflow through the… → Return the Required Result Format with…
  • Bootstrapping a UI project
  • SKILL.md covers Trigger On, Value, Do Not Use For and Inputs, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Mcaf UI UX is an agent skill from managedcode/Storage. Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration. Use when bootstrapping a UI project, choosing front-end stack, or tightening design and accessibility practices.

Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/recommended-technologies.md` and `references/ui-ux.md`). Compatibility notes: Requires repository access when UI docs, component guidance, or design system rules live in the repo.

It sits in Frontend & Design, covering UI design, Design systems and Accessibility. The repository describes itself as: Storage library provides a universal interface for accessing and manipulating data in different cloud blob storage providers. The licence is MIT.

When your agent uses it

  • Bootstrapping a UI project
  • Choosing front-end stack
  • Tightening design and accessibility practices

Example prompts

  • “/mcaf-ui-ux”

Requirements

  • Compatibility (from SKILL.md): Requires repository access when UI docs, component guidance, or design system rules live in the repo.

Workflow steps

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

  1. Read the nearest AGENTS.md and confirm scope and constraints.
  2. Run this skill's Workflow through the Ralph Loop until outcomes are acceptable.
  3. Return the Required Result Format with concrete artifacts and verification evidence.

What it can do on your machine

Read from SKILL.md and the folder at commit 5d32121. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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.

  • Compatibility

    Requires repository access when UI docs, component guidance, or design system rules live in the repo.

    From compatibility in the SKILL.md frontmatter.

Context cost

Mcaf UI UX loads about 888 tokens when it runs, and up to ~1.1k if it reads all its reference files. Until then it costs about 66 tokens; SKILL.md has 410 words of instructions outside code blocks.

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

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 managedcode/Storage at commit 5d32121, republished under its MIT licence (© managedcode). 410 words, ~888 tokens.

Download SKILL.mdSave it as .claude/skills/mcaf-ui-ux/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
mcaf-ui-ux
description
Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration. Use when bootstrapping a UI project, choosing front-end stack, or tightening design and accessibility practices.
compatibility
Requires repository access when UI docs, component guidance, or design system rules live in the repo.

MCAF: UI/UX

Trigger On

  • bootstrapping a UI project
  • choosing front-end stack or design-system direction
  • tightening accessibility or design-to-development collaboration

Value

  • produce a concrete project delta: code, docs, config, tests, CI, or review artifact
  • reduce ambiguity through explicit planning, verification, and final validation skills
  • leave reusable project context so future tasks are faster and safer

Do Not Use For

  • pure backend or infrastructure work
  • vague visual taste debates with no delivery consequence

Inputs

  • user outcomes, device targets, and accessibility needs
  • design-system constraints and design handoff inputs
  • current front-end stack and delivery constraints

Quick Start

  1. Read the nearest AGENTS.md and confirm scope and constraints.
  2. Run this skill's Workflow through the Ralph Loop until outcomes are acceptable.
  3. Return the Required Result Format with concrete artifacts and verification evidence.

Workflow

  1. Start from user outcomes and accessibility needs, not framework preference.
  2. Tie design choices to implementation and delivery constraints.
  3. Pull only the references that match the active UI decision.

Deliver

  • better UI/UX delivery guidance
  • clearer front-end technology and accessibility decisions
  • design-system-aware development notes

Validate

  • accessibility is treated as a first-class requirement
  • technology choices serve the product and team constraints
  • design handoff guidance is actionable for engineers
Show full SKILL.md (213 more words)Show less

Ralph Loop

Use the Ralph Loop for every task, including docs, architecture, testing, and tooling work.

  1. Plan first (mandatory):
    • analyze current state
    • define target outcome, constraints, and risks
    • write a detailed execution plan
    • list final validation skills to run at the end, with order and reason
  2. Execute one planned step and produce a concrete delta.
  3. Review the result and capture findings with actionable next fixes.
  4. Apply fixes in small batches and rerun the relevant checks or review steps.
  5. Update the plan after each iteration.
  6. Repeat until outcomes are acceptable or only explicit exceptions remain.
  7. If a dependency is missing, bootstrap it or return status: not_applicable with explicit reason and fallback path.
Required Result Format
  • status: complete | clean | improved | configured | not_applicable | blocked
  • plan: concise plan and current iteration step
  • actions_taken: concrete changes made
  • validation_skills: final skills run, or skipped with reasons
  • verification: commands, checks, or review evidence summary
  • remaining: top unresolved items or none

For setup-only requests with no execution, return status: configured and exact next commands.

Load References

  • read references/ui-ux.md first
  • open references/recommended-technologies.md when the active question is front-end stack or tech selection

Example Requests

  • "Choose the right frontend direction for this product."
  • "Tighten accessibility and design handoff rules."
  • "Document UI engineering guidance for this repo."

© managedcode, 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 .codex/skills/mcaf-ui-ux of managedcode/Storage.

  • SKILL.md
  • references/recommended-technologies.md
  • references/ui-ux.md

Open the folder on GitHubat commit 5d32121

Compare with similar skills

Mcaf UI UX 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.

Mcaf UI UX compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mcaf UI UX this skillmanagedcode/Storage138—~888Automated safety check: PassMIT
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill130—~3kAutomated safety check: PassMIT
UI Component Spec Designerplugin87/ux-ui-agent-skills1.5k—~2.8kAutomated safety check: PassMIT
Typeui Fundamentalsbergside/typeui2k—~861Automated safety check: PassMIT
Better Designmarvkr/better-design252—~1.2kAutomated safety check: PassMIT

Similar skills

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • 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.

    130 GitHub stars~3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • UI Component Spec Designer

    plugin87/ux-ui-agent-skills

    Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.

    1.5k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Typeui Fundamentals

    bergside/typeui

    Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.

    2k GitHub stars~861 tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Better Design

    marvkr/better-design

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

    252 GitHub stars~1.2k tokensUpdated 15 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

More from managedcode/Storage

All 41 skills in this repo

  • Mcaf Adr Writing

    managedcode/Storage

    Create or update an ADR under docs/ADR/ for architectural decisions, dependency changes, data-model changes, or cross-cutting policy shifts.

    138 GitHub stars~951 tokensUpdated today
    Auto-check passed

  • Mcaf Agile Delivery

    managedcode/Storage

    Shape delivery workflow around backlog quality, roles, ceremonies, and engineering feedback.

    138 GitHub stars~883 tokensUpdated today
    Auto-check passed

  • Mcaf Architecture Overview

    managedcode/Storage

    Create or update docs/Architecture.md as the global architecture map for a solution.

    138 GitHub stars~950 tokensUpdated today
    Auto-check passed

  • Mcaf CI CD

    managedcode/Storage

    Design or refine CI/CD workflows, quality gates, release flow, and safe AI-assisted pipeline authoring.

    138 GitHub stars~981 tokensUpdated today
    Auto-check passed

  • Mcaf Code Review

    managedcode/Storage

    Prepare for, perform, or tighten code review workflow: PR scope, review checklist, reviewer expectations, and merge hygiene.

    138 GitHub stars~957 tokensUpdated today
    Auto-check passed

  • Mcaf Devex

    managedcode/Storage

    Improve developer experience for multi-component solutions: onboarding, F5 contract, cross-platform tasks, local inner loop, and reproducible setup.

    138 GitHub stars~911 tokensUpdated today
    Auto-check passed

Categories

Questions about Mcaf UI UX

What does Mcaf UI UX do?

Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration. Mcaf UI UX is an agent skill from managedcode/Storage. Use UI/UX engineering guidance for design systems, accessibility, front-end technology selection, and design-to-development collaboration.

When should I use Mcaf UI UX?

Mcaf UI UX fits situations like: bootstrapping a UI project; choosing front-end stack; tightening design and accessibility practices.

How do I install Mcaf UI UX in Claude Code?

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

How do I install Mcaf UI UX in Codex?

Run `npx skills add managedcode/Storage --skill mcaf-ui-ux -a codex`. Or copy the skill folder (.codex/skills/mcaf-ui-ux in managedcode/Storage) into .agents/skills/mcaf-ui-ux in your project. Codex loads it when a task matches its description.

Can I use Mcaf UI UX 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 managedcode/Storage --skill mcaf-ui-ux -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mcaf-ui-ux, .gemini/skills/mcaf-ui-ux, .github/skills/mcaf-ui-ux and .opencode/skills/mcaf-ui-ux in your project.

What does Mcaf UI UX need to run?

SKILL.md names no scripts, command-line tools or credentials: Mcaf UI UX is instructions for the agent only. Compatibility (from SKILL.md): Requires repository access when UI docs, component guidance, or design system rules live in the repo..

Does Mcaf UI UX access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mcaf UI UX 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 Mcaf UI UX use?

Mcaf UI UX 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 Mcaf UI UX use?

About 888 tokens (SKILL.md is roughly 3.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 247 tokens, read only when the agent opens those files.

What are the alternatives to Mcaf UI UX?

Skills that share tags, products or a category with Mcaf UI UX: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 130 stars), UI Component Spec Designer (plugin87/ux-ui-agent-skills, 1.5k stars) and Typeui Fundamentals (bergside/typeui, 2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mcaf UI UX?

managedcode (a GitHub organization) maintains it in managedcode/Storage, which has 138 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on October 7, 2026.

Source: managedcode/Storage on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.