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

Create Component

by pagezero-dev in pagezero-dev/pagezero

Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions.

MITAuto-check passedFrontend & Design

Install Create Component

skills CLI
$ npx skills add pagezero-dev/pagezero --skill create-component -a claude-code

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

GitHub CLI
$ gh skill install pagezero-dev/pagezero create-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/pagezero-dev/pagezero.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/create-component .claude/skills/create-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
create-component
GitHub stars
143
Token cost
~896 tokens
SKILL.md length
161 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions.

  • Works in 2 steps: Determine the location → Create 4 files following the naming…
  • Adding a UI component
  • SKILL.md covers Gather Information, Instructions, Naming Conventions and Variants (if needed), plus 1 more section
  • Calls bun

What it does

Create Component is an agent skill from pagezero-dev/pagezero. Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions. Use when adding a UI component or when the user asks to scaffold a component in packages/ui or apps.

Its SKILL.md is about 900 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. It works with Storybook. The repository describes itself as: Open source, Cloudflare-native web app starter for the AI era. The licence is MIT.

When your agent uses it

  • Adding a UI component
  • The user asks to scaffold a component in packages/ui

Example prompts

  • “Use the create-component skill to create a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions”
  • “/create-component”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Determine the location
  2. Create 4 files following the naming convention {component-name}.tsx

What it can do on your machine

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

Create Component loads about 896 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 161 words of instructions outside code blocks.

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

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 pagezero-dev/pagezero at commit 5619f1b, republished under its MIT licence (© pagezero-dev). 161 words, ~896 tokens.

Download SKILL.mdSave it as .claude/skills/create-component/SKILL.md (or your agent's skills folder).
name
create-component
description
Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions. Use when adding a UI component or when the user asks to scaffold a component in packages/ui or apps.
disable-model-invocation
true

Create Component

Create a new UI component following the PageZERO component structure pattern.

Gather Information

Ask the user in a single question:

What component would you like to create and where should it go?

  • Purpose: What should it do/display?
  • Location: packages/ui/ (reusable) or apps/{feature}/components/ (feature-specific)

Instructions

After gathering the information, create the full component structure:

  1. Determine the location:

    • UI components go in packages/ui/{component-name}/
    • Feature components go in apps/{feature}/components/{component-name}/
    • Ask if unclear

  2. Create 4 files following the naming convention {component-name}.tsx:

{component-name}.tsx - Component Implementation
tsx
import * as React from "react"

import { cn } from "@/ui/utils"

interface {ComponentName}Props {
  className?: string
  children?: React.ReactNode
}

function {ComponentName}({ className, children }: {ComponentName}Props) {
  return (
    <div className={cn("", className)}>
      {children}
    </div>
  )
}

export { {ComponentName}, type {ComponentName}Props }
index.ts - Public Exports
ts
export * from "./{component-name}"
{component-name}.test.tsx - Unit Tests
tsx
import { render, screen } from "@testing-library/react"
import { describe, expect, it } from "vitest"

import { {ComponentName} } from "./{component-name}"

describe("<{ComponentName} />", () => {
  it("renders", () => {
    render(<{ComponentName}>Test content</{ComponentName}>)
    expect(screen.getByText("Test content")).toBeInTheDocument()
  })
})
{component-name}.stories.tsx - Storybook Stories
tsx
import type { Meta, StoryObj } from "@storybook/tanstack-react"

import { {ComponentName} } from "./{component-name}"

const meta = {
  title: "{StoryTitle}/{ComponentName}",
  component: {ComponentName},
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof {ComponentName}>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: "{ComponentName}",
  },
}

Naming Conventions

  • File names: Use kebab-case (e.g., checkout-button.tsx)
  • Component names: Use PascalCase (e.g., CheckoutButton)
  • Story titles:
    • UI components: "Packages/UI/{ComponentName}"
    • Feature components: "Apps/{FeatureName}/{ComponentName}"

Variants (if needed)

For components with variants, use cva (class-variance-authority):

tsx
import { cva, type VariantProps } from "class-variance-authority"

const {componentName}Variants = cva("base-classes", {
  variants: {
    variant: {
      default: "default-classes",
      secondary: "secondary-classes",
    },
    size: {
      default: "size-default",
      sm: "size-sm",
      lg: "size-lg",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
})

type {ComponentName}Props = React.ComponentProps<"div"> &
  VariantProps<typeof {componentName}Variants>

After Creation

  1. Run bun run check:fix to format the new files (use required_permissions: ["all"] to run outside sandbox)
  2. Run bun run test to verify tests pass
  3. Provide user link to relevant Storybook story

© pagezero-dev, 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/create-component of pagezero-dev/pagezero.

Open the folder on GitHubat commit 5619f1b

Compare with similar skills

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

Create Component compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Create Component this skillpagezero-dev/pagezero143—~896Automated safety check: PassMIT
Phoenix FrontendArize-ai/phoenix12k—~709Automated safety check: PassCustom licence
Wonder BlocksKhan/wonder-blocks163—~3.2kAutomated safety check: PassMIT
DaleuiDaleStudy/daleui119—~675Automated safety check: PassMIT
StorybookKhan/wonder-blocks163—~4.2kAutomated safety check: PassMIT
React Devtools MCPsanity-io/ui176—~2kAutomated safety check: PassMIT

Similar skills

  • Phoenix Frontend

    Arize-ai/phoenix

    Frontend development guidelines for the Phoenix AI observability platform.

    12k GitHub stars~709 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

  • Daleui

    DaleStudy/daleui

    Use the daleui React design system with semantic Panda CSS tokens and accessible components.

    119 GitHub stars~675 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Storybook

    Khan/wonder-blocks

    Storybook best practices for Wonder Blocks component stories.

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

  • React Devtools MCP

    sanity-io/ui

    Official

    Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp).

    176 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Component Creation

    LucasBassetti/godui

    A skill your agent uses when creating a new component for the design system.

    129 GitHub stars~2.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from pagezero-dev/pagezero

  • Create PR

    pagezero-dev/pagezero

    Create GitHub pull requests following conventional naming patterns, creating a branch if needed.

    143 GitHub stars~647 tokensUpdated 6 days ago
    Auto-check passed

  • Merge PR

    pagezero-dev/pagezero

    Squash-merge the open pull request for the current branch and clean up the branch, only when that PR exists and all checks pass.

    143 GitHub stars~445 tokensUpdated 6 days ago
    Auto-check passed

  • Change Theme

    pagezero-dev/pagezero

    Updates the shadcn/ui theme by editing OKLCH CSS custom properties in apps/core/styles/tailwind.css.

    143 GitHub stars~805 tokensUpdated 6 days ago
    Auto-check passed

  • Pagezero Upgrade

    pagezero-dev/pagezero

    Upgrade a PageZERO-based project to the latest starter while keeping project-specific business logic and marketing content.

    143 GitHub stars~1.6k tokensUpdated 6 days ago
    Auto-check: notes

Works with

Categories

Questions about Create Component

What does Create Component do?

Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions. Create Component is an agent skill from pagezero-dev/pagezero. Creates a new UI component with implementation, index, tests, and Storybook stories following PageZERO conventions.

When should I use Create Component?

Create Component fits situations like: adding a UI component; the user asks to scaffold a component in packages/ui.

How do I install Create Component in Claude Code?

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

How do I install Create Component in Codex?

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

Can I use Create 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 pagezero-dev/pagezero --skill create-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/create-component, .gemini/skills/create-component, .github/skills/create-component and .opencode/skills/create-component in your project.

What does Create Component need to run?

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

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

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

About 896 tokens (SKILL.md is roughly 3.6k 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 Create Component?

Skills that share tags, products or a category with Create Component: Phoenix Frontend (Arize-ai/phoenix, 12k stars), Wonder Blocks (Khan/wonder-blocks, 163 stars), Daleui (DaleStudy/daleui, 119 stars) and Storybook (Khan/wonder-blocks, 163 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Component?

pagezero-dev (a GitHub organization) maintains it in pagezero-dev/pagezero, which has 143 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 1, 2026.

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