krutikkkkkkkkk

Creative UI — Design skill for Claude Code

Design community

React components and Claude skills with a designer's eye, installable with the shadcn CLI: npx shadcn add @creative-ui/.

How to install Creative UI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open krutikkkkkkkkk/creative-ui and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Creative UI does

React components and Claude skills with a designer's eye, installable with the shadcn CLI: npx shadcn add @creative-ui/.

Alternatives in Design

  • Add Oas Support — Add support for a new OpenAPI Specification version to Swagger UI 29k ★
  • NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
  • Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★

README

creative-ui

My shadcn registry "creative-ui", served at https://ui.krutikraut.com. Built from the official [shadcn registry template](https://github.com/shadcn-ui/registry-template) (Next.js 15 + Tailwind v4).

Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) for how to add components and skills and what to check before a PR.

Run locally

npm install
npm run dev          # http://localhost:3000
npm run registry:build   # regenerates public/r/*.json

Add a component

  1. Put the file(s) in registry/new-york/blocks//.
  2. Add an entry to registry.json (name, type, title, description, dependencies for npm packages, registryDependencies for shadcn components like button, and files).
  3. Run npm run registry:build. The index page lists every item automatically.

Item types: `registry:block`, `registry:component`, `registry:ui`, `registry:hook`, `registry:lib`, `registry:page` (needs `target`), `registry:style`, `registry:theme`. Schema: https://ui.shadcn.com/docs/registry/registry-json

Share a Claude skill

Skills ship as `registry:item` entries whose files install into the project's `.claude/skills//` folder (in shadcn targets, `~` means the project root).

To add a skill from a GitHub repo, or to pull in updates after you change it there:

npm run sync:skill -- https://github.com/krutikkkkkkkkk/classical-collage-web-design
npm run registry:build

The script copies the repo (minus README and .git) into `registry/skills//` and writes the item into `registry.json`. People install it with:

npx shadcn@latest add @creative-ui/classical-collage-web-design

Deploy (Vercel)

  1. git init && git add . && git commit -m "init" and push to a new GitHub repo.
  2. Import it on Vercel. Build command is npm run build (it runs shadcn build first).
  3. Env var: NEXT_PUBLIC_BASE_URL=https://ui.krutikraut.com (used by the Open in v0 button).
  4. Project → Domains → add ui.krutikraut.com, then