Creative UI — Design skill for Claude Code
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
- Put the file(s) in
registry/new-york/blocks//. - Add an entry to
registry.json(name, type, title, description,dependenciesfor npm packages,registryDependenciesfor shadcn components likebutton, andfiles). - 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)
git init && git add . && git commit -m "init"and push to a new GitHub repo.- Import it on Vercel. Build command is
npm run build(it runsshadcn buildfirst). - Env var:
NEXT_PUBLIC_BASE_URL=https://ui.krutikraut.com(used by the Open in v0 button). - Project → Domains → add
ui.krutikraut.com, then
Related Skills
Coding Conventions
Enforces client coding conventions. Use when writing, reviewing, or modifying React/TypeScript code in the cli
Modern UI Builder
Builds production-ready UI components with React/Vue + Tailwind CSS + Shadcn/UI. Invoke when user needs modern
Wechat Use
macOS pure-background WeChat send CLI — no UI flash. Agent skill via npx skills.
Workflow Design Bible
A constitution generator for autonomous, agent-run projects: an interview-driven meta system prompt (and insta
Web Designer
Activate award-winning web design mode. Produces creative, distinctive designs using patterns from 38 top webs
Anti Slop Designer
Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical ca
Related Agents
Component Implementer
Writes React/TSX components from design specifications. Consumes component architecture, style system output,
UI Animation Designer
Use this agent when you need to add smooth, performant animations and transitions to user interface components
Fullstack UI Designer
Frontend designer for fullstack applications. Use to create distinctive, production-grade UI components. Consu