@se-studio/project-build 1.0.131 → 1.0.133

package/skills/se-marketing-sites/register-cms-features/SKILL.md

@@ -1,95 +0,0 @@
----
-name: register-cms-features
-description: Guide for registering new components, collections, and external integrations in the CMS configuration (src/lib/registrations.ts).
-license: Private
-metadata:
-  author: se-core-product
-  version: "1.0.0"
----
-
-# Registering CMS Features
-
-The file `src/lib/registrations.ts` is where you add new components, collections, and external components. It exports three **arrays** (not Records): `componentRegistrationsList`, `collectionRegistrationsList`, `externalComponentRegistrationsList`. The **name is defined only in each registration** (in the `defineComponent` / `defineCollection` / `defineExternalComponent` call). The `cms.ts` module imports these arrays, uses `buildComponentRecord` / `buildCollectionRecord` / `buildExternalRecord` to build Records keyed by `name` (with exhaustiveness checks), then passes those Records to the core-ui build*Maps helpers. Add new registrations to the appropriate *List array in `registrations.ts`.
-
-## How Registration Works
-
-The system uses registration objects created via `defineComponent`, `defineCollection`, or `defineExternalComponent` (from `@/lib/define-cms`). Each object contains:
-1.  **Name**: Matches the Contentful content type ID exactly. Defined **once** in the registration (not as a Record key).
-2.  **Renderer**: The React component to render.
-3.  **Used Fields**: Which fields from the content model are used.
-4.  **Mock Data**: Sample data for the styleguide/showcase.
-
-## Registering a New Component
-
-1.  **Import the Registration**:
-    At the top of `src/lib/registrations.ts`, import your component's registration export.
-
-    ```typescript
-    import { MyNewComponentRegistration } from '@/project/components/MyNewComponent';
-    ```
-
-2.  **Add to `componentRegistrationsList`**:
-    Find the `componentRegistrationsList` array in `registrations.ts` and add your component.
-
-    ```typescript
-    export const componentRegistrationsList = [
-      HeroRegistration,
-      // ...
-      MyNewComponentRegistration, // Add this
-    ] as const;
-    ```
-
-    *Order does not matter for functionality, but logical grouping is helpful. Missing a CMS type causes a type error in `cms.ts` when `buildComponentRecord(componentRegistrationsList)` is called.*
-
-## Registering a New Collection
-
-1.  **Import the Registration** in `src/lib/registrations.ts`:
-
-    ```typescript
-    import { MyCollectionRegistration } from '@/project/collections/MyCollection';
-    ```
-
-2.  **Add to `collectionRegistrationsList`** in `registrations.ts`:
-
-    ```typescript
-    export const collectionRegistrationsList = [
-      CardGridRegistration,
-      // ...
-      MyCollectionRegistration, // Add this
-    ] as const;
-    ```
-
-## Adding External Components
-
-External components (like 3rd party forms or iframes) use a separate list in `src/lib/registrations.ts`.
-
-1.  **Import**:
-    ```typescript
-    import { MyExternalWidgetRegistration } from '@/project/externalComponents/MyExternalWidget';
-    ```
-
-2.  **Add to `externalComponentRegistrationsList`** in `registrations.ts`:
-    ```typescript
-    export const externalComponentRegistrationsList = [
-        ExternalIFrameRegistration,
-        MyExternalWidgetRegistration,
-    ] as const;
-    ```
-
-## Extending Type Definitions
-
-If you introduce new Color names, Button variants, or other enumerations, update the type definitions in `src/lib/cms.ts` (types are defined there; registrations live in `registrations.ts`):
-
-```typescript
-export type CmsColourName = NonNullable<TypeComponentFields['backgroundColour']>['values'];
-// Add or modify if types are not automatically generated from Contentful
-```
-
-**Note**: Most types are generated automatically into `@/generated/types` by the `type-gen` script. You typically don't need to manually edit types unless you are defining project-specific overrides.
-
-## The Showcase
-
-Registering a component automatically adds it to the CMS Showcase (usually available at `/cms/showcase` in development). This allows you to view the component in isolation using its mock data.
-
-*   Ensure your `mock` object in the registration is complete and realistic.
-*   The showcase helps verify that `usedFields` and `UnusedChecker` are working correctly.

package/skills/se-marketing-sites/styling-system/SKILL.md

@@ -1,122 +0,0 @@
----
-name: styling-system
-description: Reference guide for the marketing site styling system, including typography, colors, grids, and RTF classes.
-license: Private
-metadata:
-  author: se-core-product
-  version: "1.1.0"
----
-
-# Styling System
-
-This project uses a customized Tailwind CSS setup where the configuration is driven by `tailwind.config.json` in each app. This JSON file acts as the source of truth for design tokens, including colors, typography, spacing, and breakpoints.
-
-## Configuration Source
-
-The `tailwind.config.json` file in your app's root directory defines the following:
-
-*   **`colorOptions`**: Defines the project's color palette.
-*   **`fontTable`**: Defines typography styles, responsive scaling, and font families.
-*   **`sizes`**: Defines breakpoints, grid columns, gaps, and margins.
-
-These configurations are processed by the build system to generate utility classes and TypeScript helpers.
-
-## Typography
-
-Typography utility classes (e.g., `h1`, `h2`, `p1`, `p2`) are automatically generated from the `fontTable` in `tailwind.config.json`.
-
-### generated Utilities
-
-Classes are generated for each key in `fontTable.styles`. Common keys include:
-
-*   **Headings**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
-*   **Body**: `p1`, `p2`, `p3`, `p4`
-*   **Special**: `quote`, `button`, `nav`, etc. (varies by project)
-
-Styles are responsive and scale automatically based on the breakpoints defined in the config (e.g., `laptop`, `desktop`).
-
-### Best Practice: Dynamic Sizing
-
-Use `getSizingInformation(index)` from `@/lib/SizingInformation` to get **Element** (or **ChildElement** for items inside a collection) and typography classes. Use **Element** for the single main heading of the block; apply a class from `sizingInformation` (e.g. `sizingInformation.h1`). **preHeading** and **postHeading** must be rendered as **<p>** with typography classes (e.g. `sizingInformation.p`), not as heading elements.
-
-```typescript
-import { getSizingInformation } from '@/lib/SizingInformation';
-
-// Example usage in a component renderer
-const { Element, sizingInformation } = getSizingInformation(index);
-<Element className={sizingInformation.h1}>{title}</Element>
-```
-
-For embedded content (e.g. inside rich text), pass `embedded: true` as the second argument.
-
-## Colors
-
-Colors are defined in `colorOptions` within `tailwind.config.json`. The build system generates TypeScript helpers in `@/generated/colors` to access these colors safely.
-
-### Helper Functions
-
-1.  **`lookupColourString(colorName, property)`**:
-    Get a single class for a specific property.
-    ```typescript
-    // Returns "text-primary-blue" (if 'Primary Blue' exists in config)
-    lookupColourString('Primary Blue', 'text')
-    // Returns "bg-light-gray" (if 'Light Gray' exists in config)
-    lookupColourString('Light Gray', 'bg')
-    ```
-
-2.  **`lookupColourClassNames(bgColor, textColor)`**:
-    Get background AND text classes, handling automatic contrast if text color is omitted (based on `colorOpposites` in config).
-    ```typescript
-    // Returns "bg-primary-blue text-white" (if White is opposite of Primary Blue)
-    lookupColourClassNames('Primary Blue')
-    ```
-
-## Grid System
-
-The grid system is defined in the `sizes` object of `tailwind.config.json`. It specifies the number of columns, margins, and gaps for each breakpoint.
-
-### Standard Breakpoints
-
-While configurable, most projects use:
-*   `mobile`: Default (0px+)
-*   `tablet`: ~768px+
-*   `laptop`: ~1024px+
-*   `desktop`: ~1440px+
-
-### Layout Helpers
-
-Common layout patterns using Tailwind grid utilities:
-
-*   **Full Width**: `col-span-full`
-*   **Centered Content**: `col-span-full laptop:col-start-2 laptop:col-span-10` (assuming 12 columns on laptop)
-*   **Split 50/50**:
-    *   Left: `col-span-full laptop:col-span-6`
-    *   Right: `col-span-full laptop:col-span-6`
-
-## Rich Text (RTF) Classes
-
-Rich text styling is handled via custom utility classes defined in `src/app/globals.css`. These classes map raw HTML elements (from the CMS rich text field) to the project's typography utilities.
-
-Common conventions for RTF classes (check your specific `globals.css`):
-
-*   **`.rtf-standard` / `.content-rich-text`**: Default styling for body content.
-*   **`.rtf-legal`**: Styling for terms and conditions (often smaller text, decimal lists).
-*   **`.rtf-article`**: Editorial styling (often larger text, specific spacing).
-*   **`.rtf-core`**: Minimal styling reset.
-
-**Usage**:
-Wrap the `RtfOrString` component with the appropriate class:
-```tsx
-<div className="rtf-standard">
-  <RtfOrString data={richTextData} />
-</div>
-```
-
-## Global Styles
-
-Project-specific global styles, animations, and custom utility classes are located in `src/app/globals.css`. This file imports the generated Tailwind CSS and defines:
-
-*   Root variables (if any)
-*   Animation keyframes
-*   Custom component classes (e.g., `.btn-primary`)
-*   Rich Text Formatting classes