Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Skills

Copy Markdown

Give your agent knowledge to ship correct components, patterns, and migrations.

This skill covers Shark UI components, patterns, and styling. Your assistant uses it to implement those pieces correctly in your project.

You can ask for something concrete:

• “Add a settings dialog with a form and save/cancel buttons.”
• “Add a combobox with search filtering.”
• “Migrate this shadcn dropdown to Shark’s Menu.”
• “Add a Select with grouped options and a placeholder.”

Installation#

pnpmbunnpmyarn

pnpm dlx skills add sharkui-inc/shark-ui

The public directory and leaderboard live at skills.sh.

What you get#

The layout matches other mature UI skills: a compact entry file and deeper material you load only when the task needs it.

Component knowledge#

Your assistant gets a map of the registry: what to import, how parts nest, and where the sharp edges are. Overlays ( Dialog vs Sheet ), menus ( Menu vs Context Menu ), list controls ( Select vs Combobox with collections and filters), Field -driven forms, and Sidebar shells each have a short guide in the skill pack. That material stays aligned with the published component list in this project and the MDX on this site, so “what the skill says” and “what the docs say” stay in sync.

Styling conventions#

Tailwind CSS v4, semantic tokens, and the small habits that keep Shark visually consistent, plus the editorial rules we keep for examples and previews (thumbs, field widths, chart tooltips, sidebar preview framing, and similar detail).

Migration patterns#

When someone pastes radix, base-ui, or shadcn-shaped code, the skill nudges the rewrite toward Shark UI : collection objects for list primitives, and the chart or sidebar patterns we actually ship, not a generic “swap the import path” pass.

CLI and registry#

The same workflow this site documents for adding components (shadcn-style CLI and the public registry JSON hosted here). The skill reminds agents to follow each component’s installation section, dependency list, and registry entry.

Registry examples#

Every serious answer should look at the shipped examples that sit beside each component in source. Those snippets are the library’s own compositions; matching them keeps generated UI aligned with how Shark is maintained, not a one-line stub from a model’s training cut-off.

How it works#

1. Activation: After install, your agent discovers the skill the same way it discovers other Agent Skills.
2. Progressive depth: The SKILL.md file links into the registry index, shared rule files, and per-component notes only when the prompt touches that surface.
3. Pattern enforcement: The assistant follows Shark composition, combobox collection and filtering, chart tooltip wiring where applicable, sidebar preview layout, and the import conventions.
4. Examples before invention: The workflow tells the model to read the MDX for the component and the matching example snippets.

Supported agents#

Any editor or CLI that implements the Agent Skills layout can consume this bundle: Claude Code, Cursor, Codex, Cline, Windsurf, GitHub Copilot, and the rest of the list on skills.sh.

In the repository#

The skill is versioned in the same open-source project as Shark UI. If you want to read or change it, open the project on GitHub.

[

Previous page

Forms ](/docs/forms)[

Next page

RTL ](/docs/rtl)

On This Page

InstallationWhat you getComponent knowledgeStyling conventionsMigration patternsCLI and registryRegistry examplesHow it worksSupported agentsIn the repository