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.