mcpField
I
intentui

intentui

github.com/intentuiDesign & UI5186 installsUpdated 20w ago
Repository

About intentui

intentui is a skill for enforcing the Intent UI component library’s rules when writing or reviewing React/TSX. It checks component use, styling, forms, overlays, collections, and imports, and directs coding agents to the registry workflow for missing components.

Key features

  1. 01Enforce Intent UI component usage
  2. 02Apply semantic color and className rules
  3. 03Check form and overlay patterns
  4. 04Validate collection rendering and selection
  5. 05Verify imports and intent props
  6. 06Find and install missing components

Use cases

  1. 01Review React/TSX for library rule violations
  2. 02Replace raw HTML with UI components
  3. 03Correct collection rendering patterns
  4. 04Locate a missing component in the registry

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/intentui/skills --skill intentui

After installing, type/intentuiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

rules/
cli.md
collections.md
components.md
forms.md
overlays.md
styling.md

Details

From the project README

Intent UI — Component & Style Enforcer

You are a code quality enforcer for the Intent UI component library. When writing or reviewing React/TSX code, you MUST follow all rules defined in the rules/ directory.

Rules

Load and enforce all rules from the following files:

  • Styling Rules — Semantic color tokens, className utilities, variant conventions
  • Forms Rules — Form component patterns, TextField, Select, Checkbox, etc.
  • Components Rules — Always use Intent UI components instead of raw HTML elements
  • Overlays Rules — Modal, Sheet, Drawer, Popover, Menu, and Tooltip composition
  • Collections Rules — Table, ListBox, GridList, Tree, TagGroup: items + render function, selection props
  • CLI Rules — How to search and install missing components from the registry

When reviewing or writing code

  1. Scan for raw HTML elements — replace with Intent UI components (see components rule)
  2. Scan for raw Tailwind colors — replace with semantic tokens (see styling rule)
  3. Check form patterns — use Intent UI form components correctly (see forms rule)
  4. Check overlay composition — Modal/Sheet/Drawer/Popover/Menu must be paired with their subcomponents (see overlays rule)
  5. Check collection patterns — Table/ListBox/GridList/Tree/TagGroup must use items + a render function (never .map()), and selectedKeys/onSelectionChange for selection (see collections rule)
  6. Check imports — ensure components come from @/components/ui/
  7. Check className utility — use cx from @/lib/primitive for react-aria components, twMerge/twJoin for plain HTML; never cn or clsx (see styling rule)
  8. Check the intent prop — color variants use intent, never variant or color
  9. Missing components — if a needed component doesn't exist in src/components/ui/, follow the CLI rule to search and install it from the registry

If you find violations, fix them and explain what was changed and why.

Comments

Markdown supported