Agent skill

Create Component

Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.

Apache-2.0Auto-check passedFrontend & Design

Install Create Component

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a claude-code

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

GitHub CLI

$ gh skill install Endava/BEEQ 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/Endava/BEEQ.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/

Paste into Claude Code

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .claude/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Endava/BEEQ create-component --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/create-component .agents/skills/create-component && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .agents/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Endava/BEEQ create-component --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/create-component .cursor/skills/create-component && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .cursor/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/Endava/BEEQ.git --path .agents/skills/create-component

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Endava/BEEQ create-component --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/create-component .gemini/skills/create-component && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .gemini/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install Endava/BEEQ create-component

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/create-component .github/skills/create-component && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .github/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Endava/BEEQ --skill create-component -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Endava/BEEQ create-component --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Endava/BEEQ.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/create-component .opencode/skills/create-component && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "create-component" agent skill from https://github.com/Endava/BEEQ/tree/main/.agents/skills/create-component into .opencode/skills/create-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-component", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: create-component
GitHub stars: 163
Token cost: ~1.5k tokens
SKILL.md length: 446 words
Files: 1
Skills in repo: 9
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.

Works in 6 steps: Run the Plop generator → Implement the component (bq-.tsx) → Create the types file (bq-.types.ts) → …
: scaffolding bq- components
SKILL.md covers When to Use, Before You Start, Procedure and 6. After all files are created…, plus 1 more section
Calls pnpm; reaches beeq.design

What it does

Create Component is an agent skill from Endava/BEEQ. Create a new BEEQ StencilJS web component. Use for: scaffolding bq- components, adding new design system elements, generating component files (TSX, SCSS, types, stories, tests). Follows BEEQ component structure, naming conventions, JSDoc requirements, Shadow DOM, and Nx monorepo placement under packages/beeq/src/components/.

Its SKILL.md is about 1.5k 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 CSS and styling, Design systems and React components. It works with Nx and Tailwind CSS. The repository describes itself as: BEEQ Design System, a web component library ruled by Endavan developers :). The licence is Apache-2.0.

When your agent uses it

: scaffolding bq- components
Adding new design system elements
Generating component files (TSX

Example prompts

“/create-component”

Workflow steps

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

Run the Plop generator
Implement the component (bq-.tsx)
Create the types file (bq-.types.ts)
Write the component-level JSDoc block
Style the component (scss/bq-.scss)
Verify the scaffold

What it can do on your machine

Read from SKILL.md and the folder at commit 5f4728d. 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
Hosts in commands or code, which the agent is likely to contact:
- beeq.design
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 1.5k tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 446 words of instructions outside code blocks.

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

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 Endava/BEEQ at commit 5f4728d, republished under its Apache-2.0 licence (© Endava). 446 words, ~1,469 tokens.

Download SKILL.mdSave it as .claude/skills/create-component/SKILL.md (or your agent's skills folder).

name: create-component
description: Create a new BEEQ StencilJS web component. Use for: scaffolding bq-* components, adding new design system elements, generating component files (TSX, SCSS, types, stories, tests). Follows BEEQ component structure, naming conventions, JSDoc requirements, Shadow DOM, and Nx monorepo placement under packages/beeq/src/components/.
argument-hint: Component name without the bq- prefix (e.g. "slider")
metadata.internal: true

Create a BEEQ Component

When to Use

Adding a new bq-* web component to the design system
Scaffolding all required files for a component from scratch
Resuming work on an in-progress component scaffold

Before You Start

Read the instruction files for this task:
Pick a similar existing component as a reference:
- Simple / display: packages/beeq/src/components/badge/bq-badge.tsx
- Interactive with events: packages/beeq/src/components/button/bq-button.tsx
- Form-associated: packages/beeq/src/components/checkbox/bq-checkbox.tsx
- Compound (host + item): packages/beeq/src/components/accordion/ + accordion-group/

Procedure

1. Run the Plop generator

bash

pnpm g

Answer the prompts: component name (no bq- prefix), whether to add styling, style variables, and Storybook files. This creates the scaffolded files. Then update the generated e2e.ts extension to .e2e.tsx.

2. Implement the component (`bq-<name>.tsx`)

Follow the exact section order — do not reorder:

1. Own Properties          (private fields, element refs like prefixElem)
2. @Element()              (host HTML element reference)
3. @State()                (alphabetical, inlined decorator)
4. @Prop()                 (public API, reflect: true for styling-related props)
5. @Watch()                (prop lifecycle validators)
6. @Event()                (with full JSDoc; EventEmitter<T>)
7. Component lifecycle     (connectedCallback → componentWillLoad → componentDidLoad → disconnectedCallback)
8. @Listen()               (event listeners)
9. Public @Method()        (async, with full JSDoc)
10. Private local methods  (private arrow functions, e.g. private handleClick = () => {})
11. render()               (always last)

When defining boolean props, match the type to the intended API shape:

Use prop: boolean = false when the prop is conceptually required in the component API and strict TypeScript initialization should guarantee a boolean value internally.
Use prop?: boolean when undefined is meaningful in the public API; in that case, do not also assign = false.

3. Create the types file (`bq-<name>.types.ts`)

Export type aliases and const arrays so both the component and Storybook can use them:

export type TMyComponentSize = 'small' | 'medium' | 'large';
export const MY_COMPONENT_SIZE = ['small', 'medium', 'large'] as const;

Only create this file if the component has typed props. The constant array is used in @Watch validators.

4. Write the component-level JSDoc block

Place above @Component({}). Every component must include:

/**
 * One-line description of what the component does.
 *
 * @example How to use it
 * ```html
 * <bq-name prop="value">Label</bq-name>
 * ```
 *
 * @documentation https://www.beeq.design/...
 * @status progress | stable | deprecated
 *
 * @dependency bq-icon  (list every consumed bq-* component)
 *
 * @attr {type} attr-name - Description (one per @Prop, use kebab-case)
 *
 * @event bqChange - Description (one per @Event)
 *
 * @method methodName() - Description (one per public @Method)
 *
 * @slot - Default slot description
 * @slot name - Named slot description
 *
 * @part part-name - Element description (one per shadow part)
 *
 * @cssprop --bq-name--property - Description (one per CSS custom property)
 */

5. Style the component (`scss/bq-<name>.scss`)

Import variables file: @import './bq-<name>.variables'
Use Tailwind @apply for abstracting long utility combinations
Define CSS custom properties (e.g. --bq-name--border-radius) in bq-<name>.variables.scss
Follow BEM for any extra class names

Show full SKILL.md (184 more words)Show less

6. After all files are created and implemented, ask the user:

Ask the user:

What public props does this component need, and which are required?
Does it need form association (formAssociated: true)?
What events should it emit, and what detail payloads do they carry?
What named slots does it expose beyond the default?
What are the accessibility requirements — role, ARIA attributes, keyboard interactions?
Should it support any size, appearance, or variant props?

Then run review-component on the new component to confirm everything is in order.

7. Verify the scaffold

Verify that the build passes without errors:

bash

pnpm exec nx run beeq:build

Key Rules

Rule	Detail
Tag	`bq-<name>` — kebab-case, `bq-` prefix
Class	`Bq<Name>` — PascalCase
Events	camelCase, `bq` prefix (e.g. `bqClick`, `bqChange`)
Private	`private` keyword — never `#` (not supported by Stencil)
Local methods	Must be private arrow functions
Public methods	Must be `async`
Boolean props	Use `prop: boolean = false` for required booleans; use `prop?: boolean` only when `undefined` is part of the API, and do not combine it with `= false`
Prop validation	Use `validatePropValue()` from `../../shared/utils` + `@Watch()`
Form components	Use `@AttachInternals()` + `formAssociated: true`
Focus delegation	Use `shadow: { delegatesFocus: true }` for interactive elements

Files

Just SKILL.md in .agents/skills/create-component of Endava/BEEQ.

Open the folder on GitHubat commit 5f4728d

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
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Create Component this skillEndava/BEEQ	163	—	~1.5k	Automated safety check: Pass	Apache-2.0	yesterday
Component CreationLucasBassetti/godui	129	—	~2.1k	Automated safety check: Pass	MIT	4 days ago
Shadcn Tailwind UILiarMTTT/TavernWeave	148	—	~1.7k	Automated safety check: Pass	Custom licence	3 days ago
Shift UI Componentsshift-editor/shift	343	—	~2.5k	Automated safety check: Pass	Apache-2.0	yesterday
Aceternity UIsecondsky/claude-skills	227	—	~4.7k	Automated safety check: Pass	MIT	9 days ago
Tailwind V4 Shadcnsecondsky/claude-skills	227	—	~4k	Automated safety check: Pass	MIT	9 days ago

Similar skills

Component Creation
LucasBassetti/godui
A skill your agent uses when creating a new component for the design system.
129 GitHub stars~2.1k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
148 GitHub stars~1.7k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Shift UI Components
shift-editor/shift
Guides design, implementation and review of Shift interface work: shared Base UI wrappers, Tailwind v4 theme tokens, Figma matching and accessible interaction states.
343 GitHub stars~2.5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Aceternity UI
secondsky/claude-skills
100+ animated React components (Aceternity UI) for Next.js with Tailwind.
227 GitHub stars~4.7k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Tailwind V4 Shadcn
secondsky/claude-skills
| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
227 GitHub stars~4k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Shadcn
pproenca/dot-skills
shadcn/ui component library best practices and patterns (formerly shadcn-ui).
214 GitHub stars~2.5k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed

Questions about Create Component

What does Create Component do?

Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ. Create Component is an agent skill from Endava/BEEQ. Create a new BEEQ StencilJS web component.

When should I use Create Component?

Create Component fits situations like: : scaffolding bq- components; adding new design system elements; generating component files (TSX.

How do I install Create Component in Claude Code?

Run `npx skills add Endava/BEEQ --skill create-component -a claude-code`. Or copy the skill folder (.agents/skills/create-component in Endava/BEEQ) 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 Endava/BEEQ --skill create-component -a codex`. Or copy the skill folder (.agents/skills/create-component in Endava/BEEQ) 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 Endava/BEEQ --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 (pnpm).

Does Create Component access the network?

SKILL.md names 1 domain. In commands or code: beeq.design; the agent is likely to contact it when it follows the instructions. 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 Apache-2.0 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 1.5k tokens (SKILL.md is roughly 5.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 Create Component?

Skills that share tags, products or a category with Create Component: Component Creation (LucasBassetti/godui, 129 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 148 stars), Shift UI Components (shift-editor/shift, 343 stars) and Aceternity UI (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Component?

Endava (a GitHub organization) maintains it in Endava/BEEQ, which has 163 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 6, 2026.

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

Install Create Component

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Create a BEEQ Component

When to Use

Before You Start

Procedure

1. Run the Plop generator

2. Implement the component (bq-<name>.tsx)

3. Create the types file (bq-<name>.types.ts)

4. Write the component-level JSDoc block

5. Style the component (scss/bq-<name>.scss)

6. After all files are created and implemented, ask the user:

7. Verify the scaffold

Key Rules

Files

Compare with similar skills

Similar skills

More from Endava/BEEQ

Related

Questions about Create Component

2. Implement the component (`bq-<name>.tsx`)

3. Create the types file (`bq-<name>.types.ts`)

5. Style the component (`scss/bq-<name>.scss`)