set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Updated Mar 2, 2025
One-click install
npx skills add https://github.com/yuheitomi/llm-instructions --skill set-up-biome
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: set-up-biome
Source: https://github.com/yuheitomi/llm-instructions/tree/main/skills/set-up-react-project
Command: npx skills add https://github.com/yuheitomi/llm-instructions --skill set-up-biome

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the configuration and setup of a React project by integrating Biome for project scaffolding, Shadcn/UI for component styling, and pnpm for fast package management. It helps you initialize a consistent, production-ready environment with minimal manual steps.

Core Features & Use Cases

  • Biome configuration: applies recommended VCS, ignore rules, and formatting/linting presets tailored for React projects.
  • Shadcn/UI integration: sets up the UI toolkit with the desired style and initializes components scaffolding.
  • PNPM setup: configures a fast, lockfile-based workspace for efficient dependency management.
  • Use Case: Start a new React project and run this Skill to automatically apply a cohesive development environment, then continue with your feature work.

Quick Start

Run this skill in your React project to auto-config Biome, Shadcn/UI, and pnpm. If prompted, choose your preferred Base UI style and confirm any merges with existing configuration.

Frequently Asked Questions about set-up-biome

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

FAQPage Schema
How do I set up Biome configuration for a React project?

Biome configuration automates linting, formatting, and VCS rules for React. This Skill generates a biome.jsonc file with recommended presets tailored to React projects, applying consistent code standards without manual setup.

Can I integrate Shadcn/UI with Biome and pnpm in one step?

Yes. This Skill sets up Shadcn/UI alongside Biome and pnpm, initializing components scaffolding, installing @base-ui/react, removing Radix dependencies, and merging configurations automatically during React project bootstrap.

What does pnpm configuration do in a React project setup?

pnpm configuration establishes a fast, lockfile-based workspace for dependency management. This Skill configures pnpm settings to work cohesively with Biome and Shadcn/UI in your React environment.

Do I need existing configuration files before running this setup?

No. This Skill inspects existing configuration files and merges new settings as needed, working during initial project bootstrap or when integrating Biome and Shadcn/UI into projects with preexisting configs.

How do I choose which Shadcn/UI Base UI style to apply?

The Skill prompts you to select your preferred Base UI style during setup. It then initializes Shadcn/UI with your choice and generates the components.json configuration accordingly.

What happens to my existing dependencies when I run this Skill?

The Skill removes Radix dependencies, installs @base-ui/react as a replacement, and preserves other existing settings. You confirm any merge decisions before changes apply to your project.