Squared Package Architecture
Guides development within the @lsst-sqre/squared component library, detailing its unique no-build-step architecture, CSS Modules styling, and testing infrastructure.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- 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.
- Details the dual-project testing infrastructure using Vitest for both unit and Storybook tests.
Use cases
- 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.
FAQ
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.
Related skills
Claude Skill Developer Guide
Provides a standardized reference and template for creating high-quality Claude Code plugin skills.
Learning Documentation31,86212 ptsAxiom Getting Started
Guides new users to the most relevant Axiom skills for their project and development focus through an interactive onboarding experience.
Learning Documentation5212 ptsSkill Making
Creates and refines Claude agent skills by providing established best practices, structural guidelines, and development workflows.
Learning Documentation1712 pts