squared-package

Official

Build React components, no build step needed.

Authorlsst-sqre
Version1.0.0
Installs0

System Documentation

What problem does it solves? Developing and consuming a React component library often involves complex build steps, transpilation issues, and inconsistent styling. This skill provides the essential architectural knowledge for @lsst-sqre/squared, simplifying component development and integration with its unique "NO BUILD STEP" approach.

Core Features & Use Cases

  • NO BUILD STEP Architecture: Explains how the package exports TypeScript source directly, shifting transpilation to consuming applications for flexibility and speed.
  • CSS Modules & Design Tokens: Enforces CSS Modules-only styling with full integration of Rubin Observatory design tokens for consistent, performant UI.
  • Next.js Integration: Guides on configuring Next.js apps to correctly transpile and consume the squared package.
  • Use Case: When creating a new component for the squared library, use this skill to ensure it adheres to the NO BUILD STEP rule, uses CSS Modules with design tokens, and is correctly exported for consumption by other applications.

Quick Start

Configure your Next.js application to consume the @lsst-sqre/squared component library. Add transpilePackages: ['@lsst-sqre/squared'] to your next.config.js file.

Dependency Matrix

Required Modules

reactnext.jspnpmviteststorybook@testing-library/react

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: squared-package
Download link: https://github.com/lsst-sqre/squareone/archive/main.zip#squared-package

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.