What key capabilities does it provide?

It details the 'no build step' approach, provides the required `transpilePackages` configuration for Next.js, enforces a strict CSS Modules-only styling pattern, and explains the dual-project testing infrastructure using Vitest for both unit and Storybook tests.

What does the Squared Package Architecture skill do?

This skill provides Claude with expert knowledge of the @lsst-sqre/squared component library's unique design. It explains the 'no build step' architecture, CSS Modules styling rules, testing setup, and how to correctly configure consumer apps like Next.js.

When should I use this skill?

Use this skill when you are developing or modifying components within the `@lsst-sqre/squared` package, setting up a new application to use it, or troubleshooting build, transpilation, or styling issues related to the library.

How does this skill improve my workflow?

It accelerates development by providing immediate, accurate guidance on architectural rules, preventing common configuration errors. This reduces time spent on troubleshooting build issues and ensures new components adhere to established patterns for styling and testing.

Squared Package Architecture

Name: Squared Package Architecture
Author: lsst-sqre

bylsst-sqre

•

Aprendizaje y Documentación

Guides development within the @lsst-sqre/squared component library, detailing its unique no-build-step architecture, CSS Modules styling, and testing infrastructure.

Acerca de

This skill provides critical architecture knowledge for working with the @lsst-sqre/squared React component library. It details the unique 'no build step' approach, where TypeScript source is exported directly, requiring consuming applications to handle transpilation. This guide covers the strict CSS Modules-only styling requirement, integration with the Rubin design token system, Next.js configuration, and the dual-project Vitest testing setup. Use this skill when creating or modifying squared components, troubleshooting build issues, or setting up a new application to consume the library.

Características Principales

Explains the 'no build step' architecture with direct TypeScript source exports.
Outlines best practices for component development, including TypeScript patterns and export strategies.
Enforces a strict CSS Modules-only styling requirement, prohibiting CSS-in-JS.
Provides configuration guidance for consuming applications, specifically for Next.js.
2 GitHub stars
Details the dual-project testing infrastructure using Vitest for both unit and Storybook tests.

Casos de Uso

Integrating the `@lsst-sqre/squared` component library into a new or existing project.
Developing new React components for the `squared` package.
Troubleshooting build, styling, or type errors when using the `squared` package.

Acerca de

Características Principales

Explains the 'no build step' architecture with direct TypeScript source exports.
Outlines best practices for component development, including TypeScript patterns and export strategies.
Enforces a strict CSS Modules-only styling requirement, prohibiting CSS-in-JS.
Provides configuration guidance for consuming applications, specifically for Next.js.
2 GitHub stars
Details the dual-project testing infrastructure using Vitest for both unit and Storybook tests.

Casos de Uso

Integrating the `@lsst-sqre/squared` component library into a new or existing project.
Developing new React components for the `squared` package.
Troubleshooting build, styling, or type errors when using the `squared` package.