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

Project-Native Component Builder

by kostja94 in kostja94/bricks

Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI.

MITAuto-check passedFrontend & Design

Install Project-Native Component Builder

skills CLI
$ npx skills add kostja94/bricks --skill component-builder -a claude-code

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

GitHub CLI
$ gh skill install kostja94/bricks component-builder --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/kostja94/bricks.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/component-builder .claude/skills/component-builder && 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
component-builder
GitHub stars
199
Token cost
~965 tokens
SKILL.md length
438 words
Files
38 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI.

  • Works in 5 steps: Define the semantic responsibility and… → Choose a variant from context and… → Preserve project conventions and… → …
  • Adding a new component such as a tabs block or FAQ section to an existing app
  • SKILL.md covers Start With The Project, Load Only Relevant Guidance, Build and Boundaries, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

The skill starts with the project: it inspects the relevant page, nearby components, design tokens, dependencies, content model, responsive conventions and tests, and reuses established primitives and icon libraries rather than swapping in a more familiar library. It identifies the component concept and user task, the surface, where the component belongs, its real content and states, and the target stack and ownership boundary.

It then looks the component up in a catalog and reads only that component's reference file, out of dozens covering things like accordion, breadcrumb, card, carousel, chat panel, comparison table, FAQ section and footer; foundational controls and quality gates have their own references. If the concept is missing, a shared workflow applies and the agent states the inferred name without adding a catalog entry unless the task is repository maintenance. Building covers semantic responsibility, a variant chosen from context, real data contracts, states, responsive and keyboard behavior, and verification in the real page, since a component correct only in isolation is incomplete.

Complete pages with page-level structure go to the Pagina page-builder instead, and auditing or reconstructing existing components and planning whole sites are out of scope.

When your agent uses it

  • Adding a new component such as a tabs block or FAQ section to an existing app
  • Building a chat panel or workspace layout that matches the project's design system
  • Implementing a foundational control like a button or select consistently

Example prompts

  • “Add an FAQ section component that uses our existing design tokens.”
  • “Build a breadcrumb component for the docs layout in this Next.js project.”
  • “Create a chat panel component with loading and error states.”

Workflow steps

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

  1. Define the semantic responsibility and boundary before styling.
  2. Choose a variant from context and content, not fashion.
  3. Preserve project conventions and integrate real content or data contracts.
  4. Implement expected states, responsive behavior, keyboard behavior, and failure handling.
  5. Verify the component in its actual page context. A component that only looks correct in isolation is incomplete.

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md.

    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

Project-Native Component Builder loads about 965 tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 116 tokens; SKILL.md has 438 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~116
When it runs · the whole SKILL.md, loaded when a task matches
~965
With references · SKILL.md plus every file in references/, read only if the agent opens them
~12k

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 kostja94/bricks at commit fa7e1e0, republished under its MIT licence (© kostja94). 438 words, ~965 tokens.

Download SKILL.mdSave it as .claude/skills/component-builder/SKILL.md (or your agent's skills folder). This skill also uses 37 other files; get the full folder from GitHub.
name
component-builder
description
Build new interface components and bounded composition patterns inside an existing project. Use for named components, interface blocks, and workspaces. Preserve the target project's design system and stack; for a complete new page with page-level structure and multiple sections, use Pagina page-builder instead. Do not use to audit or reconstruct an existing component, plan a whole product or website, or handle purely editorial copy requests.
metadata.version
0.2.0

Component Builder

Create new components that belong in the target product instead of producing isolated demo UI.

Start With The Project

Inspect the relevant page, nearby components, design tokens, dependencies, content model, responsive conventions, and tests before choosing an implementation. Reuse established primitives and icon libraries. Do not replace an existing design system merely because another library is familiar.

Identify:

  • the requested component concept and user task;
  • the surface and interface type;
  • where the new component belongs and which existing primitives it may reuse;
  • the component's real content and states;
  • the target stack and existing ownership boundary.

For a page composition, define the page's job and reuse child components from the catalog. Do not turn a page pattern into a second maintenance source for every component it contains.

Load Only Relevant Guidance

Read references/workflow.md for construction work. Read references/foundational-controls.md when the request involves Button, Link, Input, Select, Form, or another foundational control and references/quality-gates.md before final verification.

Read references/pagina.md when the request may be a complete page rather than a bounded component.

Find the component ID in ../../catalog/components.json, then read only its referenced component file. If the requested concept is absent, use the shared workflow, state the inferred canonical name in the result, and do not invent a permanent catalog entry unless the task includes repository maintenance.

Build

  1. Define the semantic responsibility and boundary before styling.
  2. Choose a variant from context and content, not fashion.
  3. Preserve project conventions and integrate real content or data contracts.
  4. Implement expected states, responsive behavior, keyboard behavior, and failure handling.
  5. Verify the component in its actual page context. A component that only looks correct in isolation is incomplete.
Show full SKILL.md (160 more words)Show less

Boundaries

  • One component concept has one maintained reference. Role, placement, visual variant, and runtime state do not create new catalog entries.
  • Established independent terminology and discovery intent may justify separate entries that share a model, as with Grid, List, and Masonry.
  • A component reference is guidance, not a fixed code template.
  • Bounded composition patterns may coordinate catalog components. Complete page construction belongs to Pagina; whole-site information architecture and product planning remain outside both component construction and this skill.
  • Stop and report the scope mismatch when the named component already exists and the request is primarily an audit, optimization, or reconstruction.
  • Do not add dependencies without a concrete implementation benefit.
  • Do not claim compliance, performance, or conversion outcomes that were not tested.
  • Use proven domain libraries when the component depends on complex editors, tables, charts, calendars, accessibility primitives, or agent runtimes.

Completion

Report what changed, which project conventions were reused, how the component was verified, and any material constraint that remains.

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

Files

SKILL.md and 37 other files (references) in skills/component-builder of kostja94/bricks.

  • SKILL.md
  • agents/openai.yaml
  • references/components/accordion.md
  • references/components/agent-workspace.md
  • references/components/announcement-banner.md
  • references/components/article-content-layout.md
  • references/components/author-bio.md
  • references/components/breadcrumb.md
  • references/components/card.md
  • references/components/carousel.md
  • references/components/chat-panel.md
  • references/components/cms-editor-workspace.md
  • references/components/comparison-table.md
  • references/components/conversation.md
  • references/components/cta-section.md
  • references/components/faq-section.md
  • references/components/footer.md
  • references/components/grid.md
  • … and 20 more

Open the folder on GitHubat commit fa7e1e0

Compare with similar skills

Project-Native Component Builder 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.

Project-Native Component Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Project-Native Component Builder this skillkostja94/bricks199—~965Automated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Superdesignsuperdesigndev/superdesign-skill628—~4.1kAutomated safety check: PassMIT
UI Design Braincarmahhawwari/ui-design-brain893—~2.1kAutomated safety check: PassMIT
Frontend Design Routercode-yeongyu/oh-my-openagent70k—~5.3kAutomated safety check: PassCustom licence
Kaizen UINVIDIA/Personal-AI-Router1.6k—~4.7kAutomated safety check: PassApache-2.0

Similar skills

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Superdesign

    superdesigndev/superdesign-skill

    Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.

    628 GitHub stars~4.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • UI Design Brain

    carmahhawwari/ui-design-brain

    Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.

    893 GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design Router

    code-yeongyu/oh-my-openagent

    Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.

    70k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Kaizen UI

    NVIDIA/Personal-AI-Router

    Official

    Kaizen UI (KUI) component library and design-pattern advisor for NVIDIA applications.

    1.6k GitHub stars~4.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

Categories

Questions about Project-Native Component Builder

What does Project-Native Component Builder do?

Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI. The skill starts with the project: it inspects the relevant page, nearby components, design tokens, dependencies, content model, responsive conventions and tests, and reuses established primitives and icon libraries rather than swapping in a more familiar library. It identifies the component concept and user task, the surface, where the component belongs, its real content and states, and the target stack and ownership boundary.

When should I use Project-Native Component Builder?

Project-Native Component Builder fits situations like: adding a new component such as a tabs block or FAQ section to an existing app; building a chat panel or workspace layout that matches the project's design system; implementing a foundational control like a button or select consistently.

How do I install Project-Native Component Builder in Claude Code?

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

How do I install Project-Native Component Builder in Codex?

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

Can I use Project-Native Component Builder 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 kostja94/bricks --skill component-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/component-builder, .gemini/skills/component-builder, .github/skills/component-builder and .opencode/skills/component-builder in your project.

What does Project-Native Component Builder need to run?

SKILL.md names no scripts, command-line tools or credentials: Project-Native Component Builder is instructions for the agent only.

Does Project-Native Component Builder 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 Project-Native Component Builder 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 Project-Native Component Builder use?

Project-Native Component Builder 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 Project-Native Component Builder use?

About 965 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to Project-Native Component Builder?

Skills that share tags, products or a category with Project-Native Component Builder: Design Style (Castor6/tactus, 376 stars), Superdesign (superdesigndev/superdesign-skill, 628 stars), UI Design Brain (carmahhawwari/ui-design-brain, 893 stars) and Frontend Design Router (code-yeongyu/oh-my-openagent, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Project-Native Component Builder?

kostja94 (a GitHub user) maintains it in kostja94/bricks, which has 199 GitHub stars. The repository was last updated on September 25, 2026.

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