AI Blocks › Build websites and web apps
UI component adder
Say which components you need. Get them added to your project with the right setup and usage.
UI component adder is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33 · Thinking: low
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
Interface parts such as buttons, forms, tables and sidebars added to your project the right way, with setup done and example usage included. You build screens from parts that already exist instead of hand-coding them. The skill uses the shadcn/ui command line. It reads your project setup first, then searches registries before writing anything custom. It adds components as source files you own, shows the docs for each one, and follows rules: use built-in variants, use semantic colours, use gap instead of space utilities, and put layout in className, not colours. A settings page becomes tabs plus cards plus form controls. It needs a JavaScript project with a package manager.
You give it
- A project using or ready for shadcn/ui
- The components or screens you need
- Your package manager
- Design preferences (optional)
You get
- Components added to your project
- Correct setup and imports
- Usage examples
- Styling that follows the rules
Use it when
- You need a dialog, table or sidebar and want a ready, accessible one.
- You are starting a new project and want to set up shadcn/ui.
- Your components look inconsistent and need tidy styling rules.
- You want to find a community component before building your own.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can run code and read your project files.