devkit-lite

Developer utilities: placeholder images, lorem text, console styling — plus Skeleton (layout-aware loading UI) and ScreenCat (a playful bottom-of-screen mascot).

Lightweight TypeScript helpers for React and plain JS, with optional UI pieces for loading states and a small motivational “pet.”

Table of contents

• Installation
• Styles (Skeleton & ScreenCat)
• Skeleton
• ScreenCat
• Utilities quick start
• Utilities API
• Features
• Requirements
• License

Installation

npm install devkit-lite

pnpm add devkit-lite

yarn add devkit-lite

Peer dependencies for Skeleton and ScreenCat: react and react-dom (17+).

Styles (Skeleton & ScreenCat)

Both components ship styles in the package entry devkit-lite/style.css (includes skeleton tokens and ScreenCat animations). Import it once in your app root (e.g. Next.js app/layout.tsx or main.tsx):

import "devkit-lite/style.css";

You can tune skeleton colors with CSS variables on :root / .dark (see Skeleton).

Skeleton

Skeleton supports two modes: a primitive block (like shadcn/ui) and an auto mode that measures your real layout and draws matching placeholder “bones.”

Primitive mode

Use when you want fixed shapes (avatars, lines, cards). Compose with your utility classes (className).

import { Skeleton } from "devkit-lite";

export function UserRowPlaceholder() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="h-12 w-12 shrink-0 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-40" />
        <Skeleton className="h-3 w-56" />
      </div>
    </div>
  );
}

• Renders a div with classes sk-primitive + your className.
• Default pulse and gray come from devkit-lite/style.css.

Auto mode (layout-aware)

Wrap the same JSX you show when loaded; when loading is true, the real content is measured (then hidden) and overlay bones match headings, paragraphs, buttons, images, etc.

import { Skeleton } from "devkit-lite";

export function ProfileCard({ loading, user }: Props) {
  return (
    <Skeleton loading={loading}>
      <article className="rounded-xl border p-4">
        <h2 className="text-xl font-semibold">{user.name}</h2>
        <p className="text-muted-foreground">{user.bio}</p>
        <button type="button">Follow</button>
      </article>
    </Skeleton>
  );
}

• loading: optional; defaults to true when children are present. Set loading={false} when data is ready to reveal content and remove bones.
• className: applied to the outer wrapper (positioning / width).

Mapped grids and lists (data-sk-map-min)

If you render a CSS Grid (or display: grid) wrapper around a .map() and the loaded state has fewer cells than you want placeholders for, set a minimum number of “item-sized” phantoms:

<Skeleton loading={!items.length}>
  <div
    className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
    data-sk-map-min="3"
  >
    {items.map((item) => (
      <FeatureCard key={item.id} {...item} />
    ))}
  </div>
</Skeleton>

data-sk-map-min="3" ensures at least three column-like placeholders when the grid would otherwise look empty or too sparse.

Theming (CSS variables)

In devkit-lite/style.css, skeletons use:

• --sk-base — bone color
• --sk-opacity-low — pulse low opacity
• --sk-radius-lg — default radius for primitive blocks

Override on :root or .dark in your app to match your design system.

TypeScript

import { Skeleton, type SkeletonProps } from "devkit-lite";

ScreenCat

A fixed bottom-of-viewport mascot with speech bubbles, light idle motion (blink, breathe, sway), and tap / Enter / Space to “teleport” with a random quip.

Behavior (summary)

• ~5 s quiet intro — no bubble; cat still animates.
• Then repeating cycle: show a line (about 5.5–8 s), ~5 s with no bubble, next line.
• Lines are 70% motivational / 30% humorous (built-in copy).
• Tap: cat vanishes, reappears elsewhere, shows a random escape line, then the same quiet gap before normal chat resumes.
• prefers-reduced-motion: reduce: idle motion is toned down; respect user settings.

Usage

import { ScreenCat, DEFAULT_SCREEN_CAT_SRC } from "devkit-lite";
import "devkit-lite/style.css";

export function AppChrome() {
  return (
    <>
      {children}
      <ScreenCat />
      {/* Optional: custom asset */}
      {/* <ScreenCat imageSrc="/mascot.png" size={88} zIndex={9999} /> */}
    </>
  );
}

Props (ScreenCatProps)

| Prop | Type | Default | Description | | ----------- | ---------- | -------------------------- | ------------------------------------ | | imageSrc | string | Twemoji cat PNG URL | Your own PNG/WebP mascot | | size | number | 96 | Width & height of the cat (px) | | zIndex | number | 9999 | Stacking order | | className | string | — | Extra class on the root strip |

DEFAULT_SCREEN_CAT_SRC is exported if you want to reuse the default URL elsewhere.

Accessibility

The hit target is a role="button" with aria-label describing tap-to-move behavior. Bubble updates use aria-live="polite" when visible.

TypeScript

import {
  ScreenCat,
  DEFAULT_SCREEN_CAT_SRC,
  type ScreenCatProps,
} from "devkit-lite";

Utilities quick start

import { generateImg, generateParagraph, Console } from "devkit-lite";

const imageUrl = generateImg(123, 800, 600);
// https://picsum.photos/id/123/800/600

const text = generateParagraph(50);

Console("User logged in successfully", "response");
Console({ userId: 123, name: "John" }, "info");
Console("Database connection failed", "error");

Utilities API

generateImg(id?, width?, height?)

Placeholder image URL via Picsum Photos.

• id (optional): image id; default random-ish range
• width (optional): default 400
• height (optional): default 300

generateParagraph(wordCount?)

Lorem-style text; wordCount defaults to 20.

Console(message, type?)

Colorful, typed console output. NODE_ENV === 'production' suppresses logs.

Types: database, response, debug, info, warn, error

Features

• 🦴 Skeleton — primitive blocks + auto-measure overlays, grid data-sk-map-min, CSS-variable theming
• 🐱 ScreenCat — timed bubbles, tap-to-teleport, reduced-motion aware
• 🖼️ Placeholder images — Picsum URLs
• 📝 Lorem generator — configurable word count
• 🎨 Console helper — typed, production-safe logging
• 📦 TypeScript — exported types for components and props
• 🌳 Tree-shakeable — import only what you use

Requirements

• Node.js 18+ (or a current JS runtime)
• TypeScript 4.5+ (optional, for TS projects)
• React 17+ for Skeleton and ScreenCat

License

MIT © Saurav Pandey

Contributing

Issues and PRs are welcome on GitHub.