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 Orange-OpenSource in Orange-OpenSource/Orange-Boosted-Bootstrap

Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web.

MITAuto-check passedFrontend & Design

Install Create Component

skills CLI
$ npx skills add Orange-OpenSource/Orange-Boosted-Bootstrap --skill create-component -a claude-code

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

GitHub CLI
$ gh skill install Orange-OpenSource/Orange-Boosted-Bootstrap 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/Orange-OpenSource/Orange-Boosted-Bootstrap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/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
222
Token cost
~648 tokens
SKILL.md length
197 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web.

  • Works in 8 steps: Create SCSS file → Import in brand entry points → Add tokens → …
  • Scaffolding a new UI component
  • SKILL.md covers Before you start, Steps and Pre-PR checklist
  • Calls npm

What it does

Create Component is an agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap. Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web. Use this skill when scaffolding a new UI component, form component, or interactive element from scratch. Covers SCSS file structure, brand entry point imports, token setup across 3 brands, ARIA requirements, JS BaseComponent boilerplate, unit tests, documentation page, and the full build/verify/checklist process.

Its SKILL.md is about 650 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, Accessibility and Project scaffolding. It works with JavaScript. The repository describes itself as: OUDS Web is an accessible, ergonomic and Orange branded framework based on Orange Unified Design System and Bootstrap. The licence is MIT.

When your agent uses it

  • Scaffolding a new UI component
  • Interactive element from scratch

Example prompts

  • “/create-component”

Workflow steps

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

  1. Create SCSS file
  2. Import in brand entry points
  3. Add tokens
  4. ARIA & accessibility
  5. JS component (if interactive)
  6. Unit tests
  7. Documentation
  8. Build & verify

What it can do on your machine

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

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, 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

Create Component loads about 648 tokens when it runs. Until then it costs about 105 tokens; SKILL.md has 197 words of instructions outside code blocks.

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

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 Orange-OpenSource/Orange-Boosted-Bootstrap at commit f25f7be, republished under its MIT licence (© Orange-OpenSource). 197 words, ~648 tokens.

Download SKILL.mdSave it as .claude/skills/create-component/SKILL.md (or your agent's skills folder).
name
create-component
description
Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web. Use this skill when scaffolding a new UI component, form component, or interactive element from scratch. Covers SCSS file structure, brand entry point imports, token setup across 3 brands, ARIA requirements, JS BaseComponent boilerplate, unit tests, documentation page, and the full build/verify/checklist process.

Workflow: Create a New Component

Before you start

  • Is this truly new, or a variant of an existing component?
  • CSS-only or interactive (needs JS)?
  • Do component tokens already exist?

Steps

1. Create SCSS file

scss/_my-component.scss (or scss/forms/_my-component.scss)

Follow the structure in the component-patterns skill:

  • Root-level #{$ouds-root-selector} for shared vars
  • scss-docs-start/end markers
  • CSS custom properties at top, consumed via var()
  • States override variables
  • @include focus-visible() on :focus-visible
2. Import in brand entry points

Add to packages/<brand>/scss/ouds-web.scss for all 3 brands:

scss
@import "@ouds/web-common/scss/my-component";
3. Add tokens
  • Composite tokens → each packages/<brand>/scss/tokens/_composite.scss
  • Temporary tokens → scss/_variables.scss with // TODO: comment
  • Never edit _raw.scss, _semantic.scss, _component.scss
4. ARIA & accessibility
PatternRequired
Togglearia-expanded + aria-controls
Icon-onlyaria-label + aria-hidden on icon
Dynamicaria-live="polite" / role="status"
Disabledaria-disabled="true"
Loadingaria-busy="true"
5. JS component (if interactive)

Create js/src/my-component.js extending BaseComponent (see javascript-conventions skill).

Register in js/index.esm.js and js/index.umd.js.

6. Unit tests

js/tests/unit/my-component.spec.js with Jasmine.

7. Documentation

site/src/content/docs/components/my-component.mdx

8. Build & verify
bash
npm run dist && npm run lint && npm run js-test && npm run start

Check all 3 brands: light/dark, RTL, all variants.

Pre-PR checklist

  • Tokens used (no hardcoded values)
  • @include border-radius() / @include transition()
  • border: 0 not border: none
  • ARIA attributes correct
  • @include focus-visible()
  • Colors via var(--#{$prefix}color-*)
  • No physical directions (RTL-safe)
  • Tokens in all 3 brands
  • npm run lint + npm run dist pass
  • No dist/ committed

© Orange-OpenSource, 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 .github/skills/create-component of Orange-OpenSource/Orange-Boosted-Bootstrap.

Open the folder on GitHubat commit f25f7be

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 skillOrange-OpenSource/Orange-Boosted-Bootstrap222—~648Automated safety check: PassMIT
Manage Componentstelerik/kendo-themes158—~2.3kAutomated safety check: PassNone
Frontend Design Principlespretend1111/claude-desktop-app4941 repos~824Automated safety check: PassCustom licence
Web Coderboshi-xixixi/TraeSkill2741 repos~5.2kAutomated safety check: PassMIT
Quasar Skilldskilld-dev/vue-ecosystem-skills181—~1.6kAutomated safety check: PassMIT
Docs LookupProgrammerAnthony/Expert-Coding-Harness235—~640Automated safety check: PassMIT

Similar skills

  • Manage Components

    telerik/kendo-themes

    Create or update a Kendo UI component across kendo-themes packages.

    158 GitHub stars~2.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Frontend Design Principles

    pretend1111/claude-desktop-app

    Gives practical design rules for polished HTML, CSS and JavaScript interfaces and browser games, covering spacing, type, color, components, motion and responsive breakpoints.

    494 GitHub starsUsed in 1 repo~824 tokens
    Frontend & DesignAuto-check passed

  • Web Coder

    boshi-xixixi/TraeSkill

    Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

    274 GitHub starsUsed in 1 repo~5.2k tokens
    Frontend & DesignAuto-check passed

  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated 15 days ago
    Frontend & DesignAuto-check passed

  • Docs Lookup

    ProgrammerAnthony/Expert-Coding-Harness

    通过 Context7 MCP 获取库和框架的实时最新文档，而非依赖训练数据，防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词：怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API…

    235 GitHub stars~640 tokensUpdated 4 mo ago
    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

More from Orange-OpenSource/Orange-Boosted-Bootstrap

All 13 skills in this repo

  • Token System

    Orange-OpenSource/Orange-Boosted-Bootstrap

    OUDS design token system rules and architecture. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~780 tokensUpdated today
    Auto-check passed

  • Using Ouds Web Version Major Minor

    Orange-OpenSource/Orange-Boosted-Bootstrap

    Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.

    222 GitHub stars~4.1k tokensUpdated today
    Auto-check passed

  • Code Review

    Orange-OpenSource/Orange-Boosted-Bootstrap

    OUDS Web compliance code review. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~846 tokensUpdated today
    Auto-check passed

  • Component Patterns

    Orange-OpenSource/Orange-Boosted-Bootstrap

    SCSS and JS structural patterns for OUDS Web components. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~773 tokensUpdated today
    Auto-check passed

  • Diagnose Errors

    Orange-OpenSource/Orange-Boosted-Bootstrap

    Diagnostic workflow for build, lint, CI, and test errors in OUDS Web.

    222 GitHub stars~680 tokensUpdated today
    Auto-check passed

  • Javascript Conventions

    Orange-OpenSource/Orange-Boosted-Bootstrap

    JavaScript coding conventions for OUDS Web. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~751 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Create Component

What does Create Component do?

Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web. Create Component is an agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap. Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web.

When should I use Create Component?

Create Component fits situations like: scaffolding a new UI component; interactive element from scratch.

How do I install Create Component in Claude Code?

Run `npx skills add Orange-OpenSource/Orange-Boosted-Bootstrap --skill create-component -a claude-code`. Or copy the skill folder (.github/skills/create-component in Orange-OpenSource/Orange-Boosted-Bootstrap) 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 Orange-OpenSource/Orange-Boosted-Bootstrap --skill create-component -a codex`. Or copy the skill folder (.github/skills/create-component in Orange-OpenSource/Orange-Boosted-Bootstrap) 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 Orange-OpenSource/Orange-Boosted-Bootstrap --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 (npm).

Does Create Component access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. 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 648 tokens (SKILL.md is roughly 2.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: Manage Components (telerik/kendo-themes, 158 stars), Frontend Design Principles (pretend1111/claude-desktop-app, 494 stars), Web Coder (boshi-xixixi/TraeSkill, 274 stars) and Quasar Skilld (skilld-dev/vue-ecosystem-skills, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Component?

Orange-OpenSource (a GitHub organization) maintains it in Orange-OpenSource/Orange-Boosted-Bootstrap, which has 222 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 7, 2026.

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