chrome

Installs and composes components from the chrome React component registry into projects.

4|Updated Aug 22, 2025
One-click install
npx skills add https://github.com/justin06lee/justin06lee.dev --skill chrome-justin06lee
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome
Source: https://github.com/justin06lee/justin06lee.dev/tree/main/.gemini/skills/chrome
Command: npx skills add https://github.com/justin06lee/justin06lee.dev --skill chrome-justin06lee

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with the chrome component registry requires knowing which of its 100+ components exists, what props each accepts, and how its dark brutalist design language works — this Skill gives an agent that knowledge so it installs and composes the right components instead of guessing props or inventing inconsistent UI. ## Core Features & Use Cases - Component installation workflow: Guides init and add commands via the @justin06lee/chrome CLI, with transitive dependency resolution, import rewriting, and conflict handling. - Full component reference: Eight reference files document every component's role, internals, props with types and defaults, gotchas, and canonical examples. - Design language enforcement: Codifies the dark-only, square-corner, lowercase-copy, no-ascii-arrow rules so composed UI matches the registry. - Use Case: Ask the agent to add a searchable project grid to a Next.js app — it checks for chrome.json, reads the gallery reference, runs bunx @justin06lee/chrome@latest add gallery, and wires the component with correct props. ## Quick Start Use the chrome skill to add a command palette and a toast system to my Next.js project and wire them into the root layout.

Frequently Asked Questions about chrome

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install chrome components into a Next.js project?

Run `bunx @justin06lee/chrome@latest init` once to write chrome.json and patch globals.css, then `bunx @justin06lee/chrome@latest add <names>` for each component. Dependencies resolve transitively, so adding command-palette also installs kbd and utils.

What components does the chrome registry include?

The registry holds 100+ components: primitives like button and input, overlays like dialog and command-palette, effects like donut and scramble, scheduling components like calendar and timeline, media playback pieces, and a full markdown editor suite called desk.

Does chrome work with frameworks other than Next.js?

Yes, components are framework-agnostic React with plain `<a>` tags and no Next.js imports, except the not-found page file. Anything that navigates accepts a linkComponent prop so you can pass your router's Link for client-side navigation.

Why did chrome install files with unrewritten @/components/ui imports?

That indicates an outdated CLI. Import rewriting, aliasBase detection, and page-file placement require CLI 0.2.0 or later, so always run via `bunx @justin06lee/chrome@latest` rather than a cached or global install.

Can I customize chrome components after installing them?

Yes, installed files are owned code you edit in place, and className merges via tailwind-merge so sizing overrides are the intended path. Run `chrome diff <name>` to compare your copy against the registry, but keep the dark-only design language rules.

What should I do if a component is missing from the skill's reference table?

Run `bunx @justin06lee/chrome@latest list` to see what the registry actually serves, since new components land regularly. Read the component page at chrome.justin06lee.dev/components/<name> for its props instead of guessing.