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

UI Component

by hiroppy in hiroppy/mf-dashboard

A skill your agent uses when creating new UI components under apps/web/src/components/

MITAuto-check passedFrontend & Design

Install UI Component

skills CLI
$ npx skills add hiroppy/mf-dashboard --skill ui-component -a claude-code

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

GitHub CLI
$ gh skill install hiroppy/mf-dashboard ui-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/hiroppy/mf-dashboard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-component .claude/skills/ui-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
ui-component
GitHub stars
418
Token cost
~832 tokens
SKILL.md length
139 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when creating new UI components under apps/web/src/components/

  • Works in 2 steps: Pure UI Components (components/charts/… → Data-Fetching Components…
  • Creating new UI components under apps/web/src/components/
  • SKILL.md covers Checklist (MUST complete all), Component Types, File Locations and Storybook Template, plus 1 more section
  • Calls pnpm

What it does

UI Component is an agent skill from hiroppy/mf-dashboard. Use when creating new UI components under apps/web/src/components/

Its SKILL.md is about 830 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. It works with Storybook. The repository describes itself as: マネーフォワードMeを自動化、保有資産の可視化を行います. The licence is MIT.

When your agent uses it

  • Creating new UI components under apps/web/src/components/

Example prompts

  • “/ui-component”

Workflow steps

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

  1. Pure UI Components (components/charts/ or components/ui/)
  2. Data-Fetching Components (components/info/)

What it can do on your machine

Read from SKILL.md and the folder at commit 48ab522. 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:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    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

UI Component loads about 832 tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 139 words of instructions outside code blocks.

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

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 hiroppy/mf-dashboard at commit 48ab522, republished under its MIT licence (© hiroppy). 139 words, ~832 tokens.

Download SKILL.mdSave it as .claude/skills/ui-component/SKILL.md (or your agent's skills folder).
name
ui-component
description
Use when creating new UI components under apps/web/src/components/

UI Component Creation Skill

Checklist (MUST complete all)

  • Create component file
  • Create *.stories.tsx for Storybook
  • Use semantic colors for monetary values (see AGENTS.md)
  • Verify Storybook: pnpm --filter @mf-dashboard/web test:storybook

Component Types

1. Pure UI Components (components/charts/ or components/ui/)

Data-agnostic, reusable components. Receive all data via props.

typescript
// components/charts/my-chart.tsx
"use client";

interface MyChartProps {
  data: Array<{ label: string; value: number }>;
  // ... props only, no data fetching
}

export function MyChart({ data }: MyChartProps) {
  return (/* pure rendering */);
}
2. Data-Fetching Components (components/info/)
FilePurpose
foo.tsxServer Component - fetches data via lib/queries
foo.client.tsxClient Component - handles interactivity (ONLY if needed)
foo.stories.tsxStorybook - uses mock data

IMPORTANT: Only create .client.tsx when interactivity is required (useState, useEffect, event handlers, etc.). If the component only displays data, keep it as a Server Component.

Server Component Only (no interactivity)
typescript
// components/info/my-info.tsx
import { getMyData } from "../../lib/queries";

export function MyInfo() {
  const data = getMyData();
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Info</CardTitle>
      </CardHeader>
      <CardContent>{/* render data */}</CardContent>
    </Card>
  );
}
With Client Component (interactivity required)
typescript
// components/info/my-info.tsx
import { getMyData } from "../../lib/queries";
import { MyInfoClient } from "./my-info.client";

export function MyInfo() {
  const data = getMyData();
  return <MyInfoClient data={data} />;
}
typescript
// components/info/my-info.client.tsx
"use client";

interface MyInfoClientProps {
  data: MyData;
}

export function MyInfoClient({ data }: MyInfoClientProps) {
  const [state, setState] = useState(/* ... */);
  return (/* interactive UI */);
}

File Locations

  • Pure charts: apps/web/src/components/charts/
  • UI primitives: apps/web/src/components/ui/
  • Data-fetching: apps/web/src/components/info/
  • Queries: apps/web/src/lib/queries.ts

Storybook Template

typescript
// components/info/my-info.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { MyInfoClient } from "./my-info.client";

const meta = {
  component: MyInfoClient,
} satisfies Meta<typeof MyInfoClient>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    data: {
      // mock data here
    },
  },
};

Semantic Colors (MUST use)

PurposeClass
Income amounttext-income
Expense amounttext-expense
Positive balancetext-balance-positive
Negative balancetext-balance-negative

© hiroppy, 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/ui-component of hiroppy/mf-dashboard.

Open the folder on GitHubat commit 48ab522

Compare with similar skills

UI 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.

UI Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Component this skillhiroppy/mf-dashboard418—~832Automated safety check: PassMIT
Gimi IllustrationGiMi-Xiaomi/gimi-illustration-skill701—~1.7kAutomated safety check: PassMIT
Phoenix FrontendArize-ai/phoenix12k—~709Automated safety check: PassCustom licence
Storybook Checkrstackjs/storybook-rsbuild156—~2.5kAutomated safety check: PassMIT
Phoenix StorybookArize-ai/phoenix12k—~1.9kAutomated safety check: PassCustom licence
Run Umbraco UIumbraco/Umbraco.UI152—~1.2kAutomated safety check: PassMIT

Similar skills

  • Gimi Illustration

    GiMi-Xiaomi/gimi-illustration-skill

    Multi-style illustrations from Chinese article text (配图 / illustration): quirky sketch, warm storybook, product proposal; OR custom IP enrollment (自定义 IP / 录入 IP / 上传形象 / 新建 IP).

    701 GitHub stars~1.7k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Phoenix Frontend

    Arize-ai/phoenix

    Frontend development guidelines for the Phoenix AI observability platform.

    12k GitHub stars~709 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Storybook Check

    rstackjs/storybook-rsbuild

    Audit ported storybook-rsbuild source files against the CURRENT upstream Storybook source, grouped by the local package that owns each port, independent of commit history.

    156 GitHub stars~2.5k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • Phoenix Storybook

    Arize-ai/phoenix

    Conventions for creating, modifying, and reviewing production-faithful Storybook stories in the Phoenix frontend (js/app/stories, js/app/.storybook).

    12k GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Run Umbraco UI

    umbraco/Umbraco.UI

    Build, run, and drive the Umbraco.UI (UUI) web-component library via its Storybook.

    152 GitHub stars~1.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Wonder Blocks

    Khan/wonder-blocks

    Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.

    163 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from hiroppy/mf-dashboard

  • Drizzle Erd

    hiroppy/mf-dashboard

    A skill your agent uses when needing to visualize database schema, generate ERD diagrams from Drizzle ORM schemas, or understand table relationships

    418 GitHub stars~627 tokensUpdated today
    Auto-check passed

  • Crawler Scraper

    hiroppy/mf-dashboard

    A skill your agent uses when adding new scraping targets to the crawler

    418 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • DB Schema Change

    hiroppy/mf-dashboard

    A skill your agent uses when adding/modifying database tables or columns in Drizzle ORM schema

    418 GitHub stars~362 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about UI Component

What does UI Component do?

A skill your agent uses when creating new UI components under apps/web/src/components/. UI Component is an agent skill from hiroppy/mf-dashboard.

When should I use UI Component?

UI Component fits situations like: creating new UI components under apps/web/src/components/.

How do I install UI Component in Claude Code?

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

How do I install UI Component in Codex?

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

Can I use UI 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 hiroppy/mf-dashboard --skill ui-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/ui-component, .gemini/skills/ui-component, .github/skills/ui-component and .opencode/skills/ui-component in your project.

What does UI Component need to run?

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

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

UI 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 UI Component use?

About 832 tokens (SKILL.md is roughly 3.3k 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 UI Component?

Skills that share tags, products or a category with UI Component: Gimi Illustration (GiMi-Xiaomi/gimi-illustration-skill, 701 stars), Phoenix Frontend (Arize-ai/phoenix, 12k stars), Storybook Check (rstackjs/storybook-rsbuild, 156 stars) and Phoenix Storybook (Arize-ai/phoenix, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Component?

hiroppy (a GitHub user) maintains it in hiroppy/mf-dashboard, which has 418 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 8, 2026.

Source: hiroppy/mf-dashboard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.