Give your AI assistant deep knowledge of the Blode UI registry, install flow, visual system, and component conventions.
Skills give AI assistants like Claude Code project-aware context about Blode UI. When installed, your assistant knows how to install from the @blode registry, follow the canonical blode.co/ui setup flow, and generate code that matches Blode UI conventions and visual direction.
For example, you can ask your AI assistant to:
"Install Blode UI and add the button component."
"Build a settings form that feels consistent with Blode UI."
"Create a profile dialog using Blode UI patterns and icons."
"Make this pricing section feel like Blode UI."
"Show me the right @blode command for this component."
"Help me update a Blode component without overwriting my local edits."
The skill keeps your assistant anchored in the Blode UI defaults: the @blode namespace, the hosted registry at blode.co/ui, and the product's design and composition patterns.
This repository ships one public skill: blode-ui.
Install
npx skills add mblode/blode-ui
This installs the blode-ui skill from this repository. Once installed, your AI assistant can load it automatically when you are working with Blode UI.
It prefers the namespace flow for quick starts and only falls back to raw registry URLs for manual or low-level workflows.
Registry Workflows
The skill helps your assistant search, view, add, and update Blode registry items with the right commands and safer update workflows such as --dry-run and --diff.
It knows add overwrites a component you have customised rather than merging, so it reaches for --diff before re-adding one.
Component Rules
The skill includes Blode-specific rules for:
component composition and accessibility
field and form patterns
semantic styling and Tailwind v4-friendly usage
Base UI versus Radix API differences
blode-icons-react conventions
How It Works
The skill activates when your task is clearly about Blode UI, @blode, or blode.co/ui.
It loads only the focused references needed for the task: install flow, registry workflows, or design-system guidance.
It applies the Blode defaults before generating commands, examples, or code.
It uses the bundled rules to keep examples aligned with the registry's composition and styling patterns.
When To Use It
Install this skill if you want your AI assistant to be better at:
onboarding a project to Blode UI
adding and updating @blode components
shaping UI so it feels visually consistent with Blode UI
writing Blode-consistent examples and forms
diagnosing a Blode component that installed but rendered unstyled