Skip to main content
affpapa.org
RU EN
skill CX Codex

ui-design-patterns — Claude Code skill: UI patterns guide

A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. Useful when you design components or audit an existing UI.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code
Open on GitHub

What ui-design-patterns does

The skill covers repeatable interface solutions: tabs, accordions, breadcrumbs, pagination, forms, data display and feedback. Each pattern comes with when-to-use notes, anatomy and best practices. Markup examples carry ARIA attributes such as role="tablist", aria-expanded and aria-current="page".

There is also a section on design systems and atomic design, from atoms up to pages. Treat it as a reference rather than a code generator: the agent leans on it when picking a pattern or checking an interface against established practice.

One thing to watch. The tabs section names an ideal number of sections, and the accordion section gives a transition duration. Those are suggestions from the text, not hard limits, so expect to revisit them for your own case.

What it helps with

  • pick a navigation pattern for a multi-level section structure
  • build a form with validation and clear feedback
  • add ARIA attributes to tabs and accordions
  • audit an existing interface for accessibility
  • sort components into atomic design levels

Example prompts for the agent

  • Pick a navigation pattern for a catalog with three levels of nesting
  • Check my form for accessibility and tell me what's missing
  • Build an accordion for the FAQ section with proper ARIA attributes

How to install ui-design-patterns

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code

2Manually: put the files in place

~/.claude/skills/ui-design-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ui-design-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ui-design-patterns

How do I install ui-design-patterns in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code. The skill file lands at ~/.claude/skills/ui-design-patterns/SKILL.md.

What does ui-design-patterns do?

It gives the agent a reference on interface patterns: navigation, forms, data display, feedback and accessibility. The agent consults it while designing components or reviewing an existing UI.

Which platforms can run this skill?

Besides Claude, there are install paths for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. GitHub Copilot uses a different command: gh skill install manutej/luxor-claude-marketplace ui-design-patterns.

Similar skills

Everything for Design →
variant jakubkrehel This skill builds distinct versions of one UI component and puts them on the page where it will live. Use it to compare design directions before choosing one. CX Codex +1 14,600installs designing-user-experience osmontero A skill for designing how an interface behaves: flows, forms, empty, loading and error states. Useful when the UI looks done but falls apart on real data. CX Codex +1 458installs emil-design-eng emilkowalski This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review. CX Codex +1 388,200installs interaction-patterns-components hueyexe Guides the agent through picking and critiquing UI interaction patterns and reusable components: navigation, tables, modals, forms, states. CX Codex +1 539installs form-design Owl-Listener Designs forms end to end, covering field order, grouping, validation, and accessibility. Useful when building anything from single inputs to multi-step flows. CX Codex +1 1,900installs design-system-creation aj-geddes A skill that lays out a design system: tokens, components, docs and governance. Useful once you have more than one interface or team. CX Codex +1 537installs

From the same set31

postgresql-database-engineering Guides database design, index selection, and query optimization in PostgreSQL. Useful when tuning slow queries, setting up table partitioning, or configuring replication. CX Codex +1 1,800installs jest-react-testing A skill for testing React components and hooks with Jest and React Testing Library: config, mocks, async patterns. CX Codex +1 1,200installs ux-principles Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork. CX Codex +1 836installs frontend-architecture A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components. CX Codex +1 722installs alembic A skill that walks your agent through Alembic migrations on SQLAlchemy projects, from alembic init to production rollout and rollback. CX Codex +1 644installs wireframing A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design. CX Codex +1 566installs expressjs-development A skill that feeds your coding agent Express.js patterns: routing, middleware, request and response handling, error handling. CX Codex +1 555installs mobile-design A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens. CX Codex +1 545installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor