{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "creative-ui", "homepage": "https://ui.krutikraut.com", "items": [ { "name": "classical-collage-web-design", "type": "registry:item", "title": "Classical Collage Web Design (Claude skill)", "description": "Use when designing or building a website, landing page, Framer template, pitch visual or brand system in the \"classical painting × modern tech\" art direction (Renaissance / neoclassical oil paintings and marble ruins combined with laptops, phones, coins and quiet product UI, as on the Aureon fintech page and contralabs.com). Covers art direction, metaphor selection, image sourcing and AI prompts, halftone and texture techniques, exact design tokens, components, page blueprints, motion, copy voice, and Figma / Framer / Next.js build steps.", "meta": { "addedAt": "2026-10-22" }, "docs": "This skill includes reference code that imports clsx, motion, next. Those files have type-checking and lint turned off, so they won't break your project. To use one in your app, install its packages and delete the header at the top of the file.", "files": [ { "path": "registry/skills/classical-collage-web-design/SKILL.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/SKILL.md" }, { "path": "registry/skills/classical-collage-web-design/assets/components/ChipTestimonial.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/ChipTestimonial.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/DataTexture.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/DataTexture.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/Eyebrow.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/Eyebrow.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/FeatureCardStack.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/FeatureCardStack.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/FloatingCoins.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/FloatingCoins.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/Hero.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/Hero.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/PillButton.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/PillButton.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/Reveal.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/Reveal.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/ScrollStory.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/ScrollStory.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/components/StatBlock.tsx", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/components/StatBlock.tsx" }, { "path": "registry/skills/classical-collage-web-design/assets/CREDITS.template.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/CREDITS.template.md" }, { "path": "registry/skills/classical-collage-web-design/assets/halftone.css", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/halftone.css" }, { "path": "registry/skills/classical-collage-web-design/assets/tailwind.preset.js", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/tailwind.preset.js" }, { "path": "registry/skills/classical-collage-web-design/assets/tokens.css", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/assets/tokens.css" }, { "path": "registry/skills/classical-collage-web-design/examples/landing.html", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/examples/landing.html" }, { "path": "registry/skills/classical-collage-web-design/LICENSE", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/LICENSE" }, { "path": "registry/skills/classical-collage-web-design/references/01-art-direction.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/01-art-direction.md" }, { "path": "registry/skills/classical-collage-web-design/references/02-metaphor-bank.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/02-metaphor-bank.md" }, { "path": "registry/skills/classical-collage-web-design/references/03-imagery-and-prompts.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/03-imagery-and-prompts.md" }, { "path": "registry/skills/classical-collage-web-design/references/04-techniques.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/04-techniques.md" }, { "path": "registry/skills/classical-collage-web-design/references/05-design-tokens.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/05-design-tokens.md" }, { "path": "registry/skills/classical-collage-web-design/references/06-components.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/06-components.md" }, { "path": "registry/skills/classical-collage-web-design/references/07-page-blueprints.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/07-page-blueprints.md" }, { "path": "registry/skills/classical-collage-web-design/references/08-motion.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/08-motion.md" }, { "path": "registry/skills/classical-collage-web-design/references/09-copywriting.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/09-copywriting.md" }, { "path": "registry/skills/classical-collage-web-design/references/10-build-figma.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/10-build-figma.md" }, { "path": "registry/skills/classical-collage-web-design/references/11-build-framer.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/11-build-framer.md" }, { "path": "registry/skills/classical-collage-web-design/references/12-build-nextjs.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/12-build-nextjs.md" }, { "path": "registry/skills/classical-collage-web-design/references/13-qa-checklist.md", "type": "registry:file", "target": "~/.claude/skills/classical-collage-web-design/references/13-qa-checklist.md" } ] }, { "name": "lasting-logo-design", "type": "registry:item", "title": "Lasting Logo Design (Claude skill)", "description": "Use when someone gives a brand name and wants brand nouns, logo concept directions or AI logo prompts (Figma AI, ChatGPT, Midjourney, Ideogram), or wants help designing a logo that lasts, from brief to stress tests, refinement and brand system.", "meta": { "addedAt": "2026-10-23" }, "files": [ { "path": "registry/skills/lasting-logo-design/SKILL.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/SKILL.md" }, { "path": "registry/skills/lasting-logo-design/examples/saffron-lane.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/examples/saffron-lane.md" }, { "path": "registry/skills/lasting-logo-design/LICENSE", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/LICENSE" }, { "path": "registry/skills/lasting-logo-design/references/01-brief.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/01-brief.md" }, { "path": "registry/skills/lasting-logo-design/references/02-brand-nouns.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/02-brand-nouns.md" }, { "path": "registry/skills/lasting-logo-design/references/03-directions.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/03-directions.md" }, { "path": "registry/skills/lasting-logo-design/references/04-prompt-library.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/04-prompt-library.md" }, { "path": "registry/skills/lasting-logo-design/references/05-critique-and-stress-tests.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/05-critique-and-stress-tests.md" }, { "path": "registry/skills/lasting-logo-design/references/06-refine-and-system.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/references/06-refine-and-system.md" }, { "path": "registry/skills/lasting-logo-design/templates/output.md", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/templates/output.md" }, { "path": "registry/skills/lasting-logo-design/templates/output.schema.json", "type": "registry:file", "target": "~/.claude/skills/lasting-logo-design/templates/output.schema.json" } ] }, { "name": "dna-carousel", "type": "registry:component", "title": "DNA Carousel", "description": "A cinematic 3D image carousel where cards travel along two intertwined helix strands. Drag, swipe, scroll or use the arrow keys, with momentum, snapping, infinite looping, optional autoplay, blur and RGB-split depth effects, and reduced-motion support. No dependencies.", "meta": { "addedAt": "2026-10-23" }, "files": [ { "path": "registry/new-york/blocks/dna-carousel/dna-carousel.tsx", "type": "registry:component" } ] }, { "name": "rotunda-carousel", "type": "registry:component", "title": "Rotunda Carousel", "description": "Square images and videos arranged on a spinning ring, largest at a focus angle and tapering to small tiles opposite it. Auto-spins in either direction, eases to a stop on hover, enlarges the hovered tile, and spins by dragging around the centre or scrolling, with momentum. Optional links per tile, reduced-motion support, no dependencies.", "meta": { "addedAt": "2026-10-23" }, "files": [ { "path": "registry/new-york/blocks/rotunda-carousel/rotunda-carousel.tsx", "type": "registry:component" } ] }, { "name": "tear-reveal", "type": "registry:component", "title": "Tear Reveal", "description": "A sheet of paper over any content that you tear open by dragging from a notch. The tear follows your path with a jagged edge and a pale fibrous rim, the halves fall away with gravity and spin past a threshold, and an early release springs it shut. Enter or Space tears it in one pass.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/tear-reveal/tear-reveal.tsx", "type": "registry:component" } ] }, { "name": "wax-seal", "type": "registry:component", "title": "Wax Seal", "description": "A press-and-hold button with a wax seal, in two variants. Seal pools molten wax from the centre while held and presses a stamp into it, leaving an embossed impression. Open starts stamped: holding strains the wax until a crack runs across it and it snaps in two. Letting go early undoes the hold.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/wax-seal/wax-seal.tsx", "type": "registry:component" } ] }, { "name": "image-trail", "type": "registry:component", "title": "Image Trail", "description": "Moving the pointer leaves a trail of images behind it. Each card rises under the cursor, tilts with the direction of travel, hangs for a moment and drifts away. Recycles a fixed pool of cards, keeps quiet zones clear for headlines and buttons, loads images lazily, mouse and pen only, with reduced-motion support.", "meta": { "addedAt": "2026-10-24" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/image-trail/image-trail.tsx", "type": "registry:component" } ] }, { "name": "dithering-hover", "type": "registry:component", "title": "Dithering Hover", "description": "Any image turns into a black-and-white Bayer dither under the cursor. The dithered zone follows the pointer with a ragged rim and radial streaks that break up and fade, rendered live on a canvas. Controls for zone size, dot size, matrix, inks, roughness and an inverted mode. Exports drawDither for static renders.", "meta": { "addedAt": "2026-10-23" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/dithering-hover/dithering-hover.tsx", "type": "registry:component" } ] }, { "name": "marbled-paper", "type": "registry:component", "title": "Marbled Paper", "description": "A living sheet of marbled paper in four traditional patterns: stone, combed, nonpareil and bouquet. Each pixel is traced through exact drop and comb maps, so edges stay sharp. It drifts slowly and you can drag through the ink like a stylus. Use it as a section or card background.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/marbled-paper/marbled-paper.tsx", "type": "registry:component" } ] }, { "name": "gold-leaf", "type": "registry:component", "title": "Gold Leaf", "description": "Gilds text with real-looking gold leaf: square leaves with visible seams, slight tone differences, fine cracks and missed flecks, and burnished metal with a highlight that follows the pointer. A slow pass of light runs on touch screens, and an optional lay animation settles the leaves on in a staggered sweep. The text stays real, selectable text.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/gold-leaf/gold-leaf.tsx", "type": "registry:component" } ] }, { "name": "etching", "type": "registry:component", "title": "Etching", "description": "Renders an image as a copperplate engraving on canvas: hatch lines that bow around the forms and swell with the shadows, cross-hatching in the darks, a third pass in the deepest shadows, and ink on paper with plate tone. The lines cut themselves in, stroke by stroke, when it scrolls into view, or follow a controlled progress value.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/etching/etching.tsx", "type": "registry:component" } ] }, { "name": "cyanotype", "type": "registry:component", "title": "Cyanotype", "description": "Turns any image into a hand-coated cyanotype: Prussian-blue tones, a brushed emulsion edge with an exposed border, uneven coating and paper tooth. Photogram mode prints objects as white silhouettes, and an optional develop wash plays when the print scrolls into view. Pure SVG filters, no CORS needed.", "meta": { "addedAt": "2026-10-27" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/cyanotype/cyanotype.tsx", "type": "registry:component" } ] }, { "name": "collage-frame", "type": "registry:component", "title": "Masked Collage Frame", "description": "Image cut-outs as an arch, oval, torn paper or museum frame, with a tilt and an overlay slot for layering a modern UI card on top of a classical picture.", "meta": { "addedAt": "2026-10-23" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/collage-frame/collage-frame.tsx", "type": "registry:component" } ] }, { "name": "duotone-image", "type": "registry:component", "title": "Duotone & Print Filter", "description": "Two-ink colour treatment for photos in the spirit of risograph and screen prints: seven ink presets or any two colours, a mix slider and optional misregistration that can slide into register when the image scrolls into view or as you scroll. Pure SVG filters.", "meta": { "addedAt": "2026-10-23" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/duotone-image/duotone-image.tsx", "type": "registry:component" } ] }, { "name": "grain-overlay", "type": "registry:component", "title": "Grain & Paper Overlay", "description": "A lightweight, pointer-transparent film grain, paper or fibre texture you can drop on any section or fix over the whole page. SVG noise, optional tint and flicker, server-component safe.", "meta": { "addedAt": "2026-10-23" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/grain-overlay/grain-overlay.tsx", "type": "registry:component" } ] }, { "name": "halftone-image", "type": "registry:component", "title": "Halftone Image", "description": "Renders any image as a print-style dot, line or square halftone on a canvas, with controls for dot size, screen angle, ink colour, contrast and inversion. Exports drawHalftone for PNG export.", "meta": { "addedAt": "2026-10-23" }, "registryDependencies": [ "utils" ], "files": [ { "path": "registry/new-york/blocks/halftone-image/halftone-image.tsx", "type": "registry:component" } ] } ] }