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

Add Sona Component

by Dinil-Thilakarathne in Dinil-Thilakarathne/sona-ui

Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the…

MITAuto-check passedFrontend & Design

Install Add Sona Component

skills CLI
$ npx skills add Dinil-Thilakarathne/sona-ui --skill add-sona-component -a claude-code

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

GitHub CLI
$ gh skill install Dinil-Thilakarathne/sona-ui add-sona-component --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/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/add-sona-component .claude/skills/add-sona-component && 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
add-sona-component
GitHub stars
118
Token cost
~2.2k tokens
SKILL.md length
985 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the…

  • Works in 7 steps: Component source —… → Demo — src/registry/examples//-demo.tsx → Registry entry —… → …
  • Wire up a new component in this repo (sona-ui)
  • SKILL.md covers The canonical reference, Inputs to settle first, The seven hand-authored edits and Then build — regenerate…, plus 2 more sections
  • Calls bun

What it does

Add Sona Component is an agent skill from Dinil-Thilakarathne/sona-ui. Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the registry, and verifying it live. Use this whenever the user wants to add, create, scaffold, register, or "wire up" a new component in this repo (sona-ui), or mentions doing "the steps" / "the pipeline" to bring a component into the library — even if they only hand you the component code or just a name and an idea…

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components. The repository describes itself as: A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster. The licence is MIT.

When your agent uses it

  • Wire up a new component in this repo (sona-ui)
  • Mentions doing the steps / the pipeline to bring a component into the library — even if they only hand you the component code
  • Just a name and an idea
  • It for phrases like add a <name component

Example prompts

  • “wire up”
  • “the steps”
  • “the pipeline”
  • “/add-sona-component”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Component source — src/registry/sonaui//.tsx
  2. Demo — src/registry/examples//-demo.tsx
  3. Registry entry — src/registry/registry.json
  4. Docs — src/content/docs/.mdx
  5. Nav entry — src/config/components.ts
  6. Playground controls — src/registry/playground/index.tsx
  7. Agent metadata — src/registry/agent-metadata.ts

What it can do on your machine

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

    Shell commands in SKILL.md call:

    • bun

    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.

Context cost

Add Sona Component loads about 2.2k tokens when it runs. Until then it costs about 176 tokens; SKILL.md has 985 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~176
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k

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 Dinil-Thilakarathne/sona-ui at commit 9a72ffe, republished under its MIT licence (© Dinil-Thilakarathne). 985 words, ~2,235 tokens.

Download SKILL.mdSave it as .claude/skills/add-sona-component/SKILL.md (or your agent's skills folder).
name
add-sona-component
description
Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the registry, and verifying it live. Use this whenever the user wants to add, create, scaffold, register, or "wire up" a new component in this repo (sona-ui), or mentions doing "the steps" / "the pipeline" to bring a component into the library — even if they only hand you the component code or just a name and an idea. Trigger it for phrases like "add a <name> component", "new component", "integrate this into the registry", "scaffold a component", or "set up the docs/playground for X".

Add a component to Sona UI

This skill captures the complete pipeline for landing a new component in this library so nothing is forgotten. The library is a shadcn-style registry: source components live in src/registry/, are described in a hand-authored registry JSON, surfaced in docs (MDX) and a live playground, and then compiled by a build script into generated artifacts that the app and the shadcn CLI consume.

The golden rule: you hand-author seven things, then run the build commands that regenerate everything else. Editing a generated file directly is wasted work — the next build overwrites it.

The canonical reference

spotlight-card is the cleanest existing example of every step done correctly. Before writing anything, read these to match the house style exactly:

  • src/registry/sonaui/spotlight-card/spotlight-card.tsx
  • src/registry/examples/spotlight-card/spotlight-card-demo.tsx
  • src/content/docs/spotlight-card.mdx
  • the spotlight-card entries in src/registry/registry.json, src/registry/agent-metadata.ts, src/config/components.ts, and src/registry/playground/index.tsx

Mirror its structure for the new component rather than inventing a layout.

Inputs to settle first

Pin these down before editing (ask the user only for what you can't infer):

  • Slug: kebab-case, used everywhere as the key (spotlight-card). Directory names, registry name, doc filename, and every registry key must match it.
  • Display title: Title Case (Spotlight Card).
  • Category: which nav group in components.ts (Components, Text, Effects, …). The user's pipeline note calls for an Effects category — use it if the component is a visual effect, otherwise pick the fitting existing one.
  • Props: name, type, default, one-line description for each — these flow into the generated prop table, so get them right at the source.
  • npm dependencies: runtime packages the component imports (e.g. motion).

The seven hand-authored edits

Do these in order. Match formatting, the cn import, "use client", and the export default convention from the reference.

1. Component source — src/registry/sonaui/<slug>/<slug>.tsx

The real component. Export an interface named <Pascal>Props and JSDoc every prop — the @default tag and the /** … */ description are parsed verbatim by the prop-types build into the docs table. A missing JSDoc comment means a blank cell in the published props table, so treat the comments as user-facing. Include @default on every optional prop. If the component needs extra files (CSS module, sub-component), add them in the same folder — the build picks up every file in the directory.

2. Demo — src/registry/examples/<slug>/<slug>-demo.tsx

The default, prop-less example shown in the docs Preview. File name <slug>-demo.tsx maps to the default variant. For extra variants, add <slug>-<variant>.tsx in the same folder (the build keys them by the suffix after the component name; see parseFileName in scripts/build-registry.ts).

3. Registry entry — src/registry/registry.json

This is the hand-authored source of truth (a JSON array), NOT the root registry.json or public/r/* — those are generated. Add an object with a real title, a real description (a sentence about what it does, not "Component for <slug>"), the file path(s) under files, and dependencies listing the npm packages from step 1. Follow the exact shape of the spotlight-card entry.

4. Docs — src/content/docs/<slug>.mdx

Copy the spotlight-card MDX skeleton: frontmatter (title, slug, tags), an intro, a ## Features list, then the standard MDX component blocks in this order — <ComponentPreview component="<slug>" name="default" />, ## Playground + <ComponentPlayground component="<slug>" />, ## Installation + <ComponentInstallation component="<slug>" />, ## Usage + <ComponentUsage component="<slug>" />, ## Props + <PropTable component="<slug>" />. The prop table is derived — don't hand-write prop rows in the MDX.

5. Nav entry — src/config/components.ts

Add one object to componentNavigationLinks: name (Title), slug, href: "/docs/<slug>", and type set to the chosen category. If the category is new (e.g. first Effects entry didn't exist yet) just use the string — the nav groups by type automatically.

Show full SKILL.md (420 more words)Show less
6. Playground controls — src/registry/playground/index.tsx

Import the component at the top, then add one entry to playgroundRegistry keyed by slug: a controls array (slider / text / toggle / select — see the Control union at the top of the file) for the props worth exposing, and a render that instantiates the real component with the live values cast to their types. This file is intentionally hand-authored and decoupled from the generated example registry.

7. Agent metadata — src/registry/agent-metadata.ts

Add a "<slug>" entry to the agentResourceMetadata object with useWhen, avoidWhen, capabilities, accessibility, motion (purpose + reducedMotion), and a related array of sibling slugs. Mirror the spotlight-card entry's shape. Without it, bun run check:agent-resources rejects the publish — every registry:ui item must have a matching entry.

Then build — regenerate everything else

bash
bun run build:registry
bun run build:agent-resources
bun run check:registry
bun run check:agent-resources

build:registry runs three scripts in sequence and regenerates:

  • src/registry/index.ts (the example registry + code strings)
  • root registry.json and public/r/*.json (shadcn CLI registry)
  • src/registry/prop-types.ts (the props table data, parsed from your JSDoc)

build:agent-resources regenerates public/agent/catalog.json, the per-component detail JSON at public/agent/components/<slug>.json, and public/llms.txt / public/llms-full.txt from the agent-metadata.ts entry added in step 7.

All of these are generated — never edit them by hand. If a prop is missing or a description is wrong in the output, fix the JSDoc in step 1 (or the metadata in step 7) and rebuild. Do not treat the component as published until both check:registry and check:agent-resources pass.

After building, sanity-check that the new slug appears in src/registry/prop-types.ts with all expected props, and that public/r/<slug>.json and public/agent/components/<slug>.json were created.

Finally — verify live in the preview

The component isn't "done" until you've seen it work. Use the preview tools (not a manual hand-off):

  1. Start the dev server (preview_start) if one isn't running.
  2. Navigate to /docs/<slug> and preview_snapshot to confirm the page renders with Preview, Playground, Installation, Usage, and the Props table populated.
  3. Exercise the actual interaction (hover, drag, type into a playground control) with preview_click / preview_fill / preview_eval, then re-snapshot or preview_screenshot to prove the effect and the playground controls work.
  4. Check preview_console_logs for errors.

Report what you verified with a screenshot or snapshot, and call out anything the user still needs to decide (e.g. extra variants, copy tweaks).

Quick checklist

  • src/registry/sonaui/<slug>/<slug>.tsx — component + JSDoc'd <Pascal>Props
  • src/registry/examples/<slug>/<slug>-demo.tsx — default demo (+ variants)
  • src/registry/registry.json — entry with real title/description/dependencies
  • src/content/docs/<slug>.mdx — Preview · Playground · Installation · Usage · PropTable
  • src/config/components.ts — nav entry under the right category
  • src/registry/playground/index.tsx — import + controls/render entry
  • src/registry/agent-metadata.ts — <slug> entry with useWhen/avoidWhen/capabilities/accessibility/motion
  • bun run build:registry — regenerates index.ts, public/r/*.json, prop-types.ts
  • bun run build:agent-resources — regenerates public/agent/, public/llms.txt
  • bun run check:registry and bun run check:agent-resources — both pass
  • Verified live in preview (DOM + interaction)

© Dinil-Thilakarathne, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/add-sona-component of Dinil-Thilakarathne/sona-ui.

Open the folder on GitHubat commit 9a72ffe

Compare with similar skills

Add Sona Component 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.

Add Sona Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add Sona Component this skillDinil-Thilakarathne/sona-ui118—~2.2kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Core Component Library PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.2kAutomated safety check: PassNone
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Core Component Library Patterns

    ChrisWiles/claude-code-showcase

    Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.

    6.1k GitHub starsUsed in 8 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    168 GitHub starsUsed in 11 repos~3.1k tokens
    Frontend & DesignAuto-check passed

More from Dinil-Thilakarathne/sona-ui

All 10 skills in this repo

  • Oklch Skill

    Dinil-Thilakarathne/sona-ui

    OKLCH color space for web projects. An agent skill from Dinil-Thilakarathne/sona-ui.

    118 GitHub starsUsed in 1 repo~1.2k tokens
    Auto-check passed

  • Sona UI

    Dinil-Thilakarathne/sona-ui

    Discover and integrate Sona UI registry components. An agent skill from Dinil-Thilakarathne/sona-ui.

    118 GitHub stars~1.1k tokensUpdated 4 days ago
    Auto-check passed

  • Smooth Shadow Ring

    Dinil-Thilakarathne/sona-ui

    A skill your agent uses when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed.

    118 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Component Anatomy

    Dinil-Thilakarathne/sona-ui

    Create a source-backed Inspection Board around an existing Sona UI component for social demonstrations and later documentation experiments.

    118 GitHub stars~1.9k tokensUpdated 4 days ago
    Auto-check passed

  • Design Motion Principles

    Dinil-Thilakarathne/sona-ui

    Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.

    118 GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed

  • Promote Portfolio Component

    Dinil-Thilakarathne/sona-ui

    Promote a finished Craft, experimental UI, or reusable React component from the user's portfolio into the Sona UI library through an approval-gated two-phase workflow.

    118 GitHub stars~2.2k tokensUpdated 4 days ago
    Auto-check passed

Categories

Questions about Add Sona Component

What does Add Sona Component do?

Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the…. Add Sona Component is an agent skill from Dinil-Thilakarathne/sona-ui. Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the registry, and verifying it live.

When should I use Add Sona Component?

Add Sona Component fits situations like: wire up a new component in this repo (sona-ui); mentions doing the steps / the pipeline to bring a component into the library — even if they only hand you the component code; just a name and an idea; it for phrases like add a <name component.

How do I install Add Sona Component in Claude Code?

Run `npx skills add Dinil-Thilakarathne/sona-ui --skill add-sona-component -a claude-code`. Or copy the skill folder (.agents/skills/add-sona-component in Dinil-Thilakarathne/sona-ui) into .claude/skills/add-sona-component in your project. Claude Code loads it when a task matches its description.

How do I install Add Sona Component in Codex?

Run `npx skills add Dinil-Thilakarathne/sona-ui --skill add-sona-component -a codex`. Or copy the skill folder (.agents/skills/add-sona-component in Dinil-Thilakarathne/sona-ui) into .agents/skills/add-sona-component in your project. Codex loads it when a task matches its description.

Can I use Add Sona Component 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 Dinil-Thilakarathne/sona-ui --skill add-sona-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-sona-component, .gemini/skills/add-sona-component, .github/skills/add-sona-component and .opencode/skills/add-sona-component in your project.

What does Add Sona Component need to run?

Going by SKILL.md and its folder, Add Sona Component needs the command-line tools its instructions call (bun).

Does Add Sona Component 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 Add Sona Component 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 Add Sona Component use?

Add Sona Component 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 Add Sona Component use?

About 2.2k tokens (SKILL.md is roughly 8.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add Sona Component?

Skills that share tags, products or a category with Add Sona Component: Web Artifacts Builder (anthropics/skills, 180k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Core Component Library Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add Sona Component?

Dinil-Thilakarathne (a GitHub user) maintains it in Dinil-Thilakarathne/sona-ui, which has 118 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.

Source: Dinil-Thilakarathne/sona-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.