@se-studio/skills 1.0.6 → 1.0.12

package/skills/site-workflows-project-cleanup/SKILL.md

@@ -0,0 +1,474 @@
+---
+name: site-workflows-project-cleanup
+description: Strip an existing SE Studio Next.js/Contentful project to a bare-bones baseline — black/white color system, system font, only Generic Component, Generic Collection, and Related Articles Collection registered, with minimal navigation and footer stubs. Run this when you need to clean a customer project down to a reusable template.
+license: MIT
+metadata:
+  author: se-studio
+  version: "1.0.0"
+---
+
+# SE Project Cleanup
+
+Strips an existing SE Studio project to a bare-bones baseline. After this skill runs you will have:
+- **Colors**: White (`Light`) and Black (`Dark`) only
+- **Font**: system-ui (no custom or Google fonts)
+- **Components**: Generic Component only
+- **Collections**: Generic Collection + Related Articles Collection
+- **Nav/Footer**: Minimal HTML stubs
+- **Contentful schema**: `componentType` and `collectionType` enums trimmed to match
+
+Run `pnpm validate` at the end to confirm a clean TypeScript build.
+
+---
+
+## Step 1 — Update `tailwind.config.json`
+
+Replace `colorOptions` with black and white only, update font family, and remove OpenType feature settings:
+
+```json
+{
+  "colorOptions": {
+    "Light": "#FFFFFF",
+    "Dark": "#000000"
+  },
+  "colorFile": "./colors.ts",
+  "foregroundColors": ["Dark", "Light"],
+  "colorOpposites": {
+    "Light": "Dark",
+    "Dark": "Light"
+  },
+  "sizes": { /* keep existing sizes unchanged */ },
+  "fontTable": {
+    "font": "system-ui",
+    "weight": 400,
+    "lineHeight": 1.2,
+    "styles": { /* see below */ }
+  }
+}
+```
+
+In `fontTable.styles`:
+- Remove the top-level `"additional"` block (which has `font-feature-settings`)
+- For every style that has an `"additional"` block containing `font-feature-settings`, remove that `additional` block entirely
+- Keep any `"additional"` blocks that contain only `text-transform` (those are still valid with system fonts)
+- Keep all size values, weight overrides, lineHeight, and letterSpacing values unchanged
+
+After this change the font table will reference `system-ui` but retain all the responsive size scales.
+
+---
+
+## Step 2 — Remove fonts (file + binaries)
+
+Delete the entire `src/project/font.ts` file. It exports `noiVariableFlex` (local font) and `ibmPlexMono` (Google font) — both unused after cleanup.
+
+Also remove any local font binaries that the template may ship alongside the loader. These are referenced by the now-deleted `font.ts` and otherwise linger as dead assets:
+
+```bash
+rm -rf src/fonts/
+```
+
+(If `src/fonts/` does not exist on this template, the command is a no-op — safe to run unconditionally.)
+
+---
+
+## Step 3 — Update `src/app/layout.tsx`
+
+1. Remove the import line: `import { ibmPlexMono, noiVariableFlex } from '@/project/font';`
+2. In the `html` element's `className`, remove `noiVariableFlex.variable` and `ibmPlexMono.variable`
+
+The html element should look like:
+```tsx
+<html
+  lang="en"
+  suppressHydrationWarning
+  className={cn(
+    'antialiased',
+    process.env.DEBUG_TAILWIND === 'true' && 'debug-screens',
+    process.env.SHOW_SECTION_OUTLINE === 'true' && 'show-section-outline',
+  )}
+>
+```
+
+---
+
+## Step 4 — Update `src/app/globals.css`
+
+### In the `@theme` block, make these changes:
+
+**Replace** the `--font-sans` and `--font-serif` lines with:
+```css
+--font-sans: system-ui, ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+```
+
+**Remove** all `--animate-*` custom properties:
+```
+--animate-cardRotate
+--animate-linkRotate
+--animate-ticker
+--animate-fadeInGrow
+--animate-shapeShiftClip
+--animate-shapeShiftSpin
+--animate-clipReveal
+--animate-filmGrainShift
+```
+
+### Remove these `@utility` blocks entirely:
+- `animate-ticker`
+- `animate-fade-in-grow`
+- `animate-shape-shift`
+- `animate-card-rotate`
+- `animate-clip-reveal`
+- `film-grain`
+- `image-item-h` (ArticleBrowser-specific)
+- `visual-cols` (VisualsCollection-specific)
+- `visual-width` (VisualsCollection-specific)
+
+### Remove all `@keyframes` blocks:
+- `cardRotate`
+- `linkRotate`
+- `ticker`
+- `growFade`
+- `shapeShiftClip`
+- `shapeShiftSpin`
+- `clipReveal`
+- `filmGrainShift`
+
+### Remove the view transition media query block:
+```css
+@media (prefers-reduced-motion: no-preference) {
+  ::view-transition-group(*) { ... }
+  ::view-transition-old(root) { ... }
+  ::view-transition-new(root) { ... }
+}
+```
+
+### In the RTF classes, replace `bg-yellow/20` with `bg-dark/10`:
+Three occurrences — in `.rtf-standard > blockquote`, `.rtf-article > blockquote`, and `.rtf-legal > blockquote`.
+
+### Remove the dead-code block at the bottom:
+```css
+.dark-component .standard-rtf { ... }
+.light-component .standard-rtf { ... }
+```
+
+### Remove the Orejime scroll-lock workaround if not using Orejime consent:
+The block starting with `.orejimeHtml-WithModalOpen.orejimeHtml-WithModalOpen body { ... }` — remove if the project does not use the Orejime consent banner.
+
+---
+
+## Step 5 — Update `src/lib/registrations.ts`
+
+Keep only these three registrations:
+
+```typescript
+import { GenericComponentRegistration } from '@/project/components/TemplateComponent';
+import { GenericCollectionRegistration } from '@/project/collections/TemplateCollection';
+import { RelatedArticlesCollectionRegistration } from '@/project/collections/RelatedArticlesCollection';
+
+export const componentRegistrationsList = [
+  GenericComponentRegistration,
+] as const;
+
+export const collectionRegistrationsList = [
+  GenericCollectionRegistration,
+  RelatedArticlesCollectionRegistration,
+] as const;
+
+export const externalComponentRegistrationsList = [] as const;
+```
+
+Remove all other imports and registrations.
+
+---
+
+## Step 6 — Delete component files
+
+Delete these files from `src/project/components/`:
+- `ArticleDescription.tsx`
+- `ArticleHero.tsx`
+- `ArticleRichText.tsx`
+- `Quote.tsx`
+- `SimpleParagraph.tsx`
+- `TwoColumnRichText.tsx`
+- `ViewTransitionTrackedLink.tsx`
+
+Also delete these files from `src/project/components/Navigation/`:
+- `NavMenu.tsx`
+- `MobileNav.tsx`
+- `ContactNavItem.tsx`
+
+Keep: `TemplateComponent.tsx`, `Navigation/index.tsx` (will be replaced in Step 8), `Navigation/types.ts`, `Footer/index.tsx` (will be replaced in Step 9), `Footer/types.ts`
+
+---
+
+## Step 7 — Delete collection files
+
+Delete these from `src/project/collections/`:
+- `ArticleBrowser/` (entire directory)
+- `ProcessListCollection.tsx`
+- `SeparatedVisualsCollection.tsx`
+- `TeamGridCollection.tsx`
+- `TextAndCarouselCollection.tsx`
+- `TextAndCarouselCarousel.tsx`
+- `VisualsCollection.tsx`
+
+Keep: `TemplateCollection.tsx`, `LinkCard.tsx` (used internally by TemplateCollection), `RelatedArticlesCollection.tsx`
+
+---
+
+## Step 8 — Delete external component files
+
+Delete all files in `src/project/externalComponents/` (IFrame and Pardot integrations).
+
+---
+
+## Step 9 — Replace Navigation with minimal stub
+
+Replace `src/project/components/Navigation/index.tsx` with:
+
+```tsx
+'use client';
+import type { INavigation } from '@se-studio/core-data-types';
+import type { NavigationProps } from './types';
+
+export const Navigation: React.FC<NavigationProps> = ({ navigation: _navigation }) => {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 h-[var(--nav-height)] bg-light border-b border-dark/10 flex items-center px-4">
+      <nav>
+        <span className="p2 font-semibold">Site Name</span>
+      </nav>
+    </header>
+  );
+};
+
+export default Navigation;
+```
+
+---
+
+## Step 10 — Replace Footer with minimal stub
+
+Replace `src/project/components/Footer/index.tsx` with:
+
+```tsx
+'use client';
+import type { FooterProps } from './types';
+
+export const Footer: React.FC<FooterProps> = ({ navigation: _navigation }) => {
+  return (
+    <footer className="bg-dark text-light py-8 px-4 text-center">
+      <p className="p3">&copy; {new Date().getFullYear()} Site Name</p>
+    </footer>
+  );
+};
+
+export default Footer;
+```
+
+Delete `src/project/components/Footer/MobileFooter.tsx` if it exists.
+
+---
+
+## Step 11 — Clean up Contentful schema
+
+Create `scripts/clean-schema.js` (or update it if it already exists):
+
+> The `scripts/` directory in the SE Studio template ships with `{ "type": "module" }` in its own `package.json`, so the script below is **ESM** (`import` syntax, not `require`). Do not add `'use strict'` — it is a no-op in ES modules.
+
+```js
+#!/usr/bin/env node
+import fs from 'node:fs';
+
+const inputPath = 'scripts/master-schema.json';
+const outputPath = 'scripts/clean-schema.json';
+
+if (!fs.existsSync(inputPath)) {
+  console.error(`Input file not found: ${inputPath}`);
+  console.error(
+    'Export the schema first: contentful space export --skip-content --skip-webhooks --content-file scripts/master-schema.json',
+  );
+  process.exit(1);
+}
+
+const schema = JSON.parse(fs.readFileSync(inputPath, 'utf8'));
+
+// Trim componentType to bare-bones set
+const component = schema.contentTypes?.find((ct) => ct.sys.id === 'component');
+if (component) {
+  const field = component.fields.find((f) => f.id === 'componentType');
+  if (field?.validations) {
+    field.validations = field.validations.map((v) => (v.in ? { in: ['Generic'] } : v));
+  }
+}
+
+// Trim collectionType to bare-bones set
+const collection = schema.contentTypes?.find((ct) => ct.sys.id === 'collection');
+if (collection) {
+  const field = collection.fields.find((f) => f.id === 'collectionType');
+  if (field?.validations) {
+    field.validations = field.validations.map((v) =>
+      v.in ? { in: ['Generic', 'Related articles'] } : v,
+    );
+  }
+}
+
+// Drop the `in` validation on externalComponentType entirely.
+// Replacing it with `{ in: [] }` is rejected by Contentful's Management API
+// ("Expected at least one choice"), so we filter the validation out instead
+// and leave any non-`in` validations untouched.
+const ext = schema.contentTypes?.find((ct) => ct.sys.id === 'externalComponent');
+if (ext) {
+  const field = ext.fields.find((f) => f.id === 'externalComponentType');
+  if (field?.validations) {
+    field.validations = field.validations.filter((v) => !v.in);
+  }
+}
+
+// Strip webhooks from the export. `contentful space import` will otherwise
+// try to CREATE every webhook in the target space and 409 on conflicts when
+// they already exist (e.g. revalidation webhook auto-provisioned by Vercel),
+// causing the import to exit non-zero even though content types succeeded.
+delete schema.webhooks;
+
+fs.writeFileSync(outputPath, JSON.stringify(schema, null, 2));
+console.log(`Clean schema written to ${outputPath}`);
+console.log('Component types kept:', ['Generic']);
+console.log('Collection types kept:', ['Generic', 'Related articles']);
+console.log('Webhooks: stripped from output');
+```
+
+Run it:
+```bash
+node scripts/clean-schema.js
+```
+
+Then import to the target Contentful space (use the space ID from `.env.local`):
+```bash
+contentful space import \
+  --space-id <TARGET_SPACE_ID> \
+  --environment-id master \
+  --content-file scripts/clean-schema.json
+```
+
+> If cleaning an **existing** space (not a new one), use the Contentful Management API or UI to update the `componentType` and `collectionType` field validations directly, rather than importing. Importing to an existing space with live content can cause conflicts.
+
+---
+
+## Step 12 — Regenerate and validate
+
+```bash
+pnpm codegen
+```
+
+This regenerates `src/generated/colors.ts` (now only `Light` and `Dark`) and `src/generated/setailwind.css` (system font, updated color variables).
+
+```bash
+pnpm validate
+```
+
+Fix any TypeScript errors that surface from the removed imports. Common issues:
+- References to deleted components in other files (check `src/lib/` for any direct imports)
+- `viewTransitions.ts` may import from `ViewTransitionTrackedLink` — remove those imports
+- Any analytics wrappers that reference removed component names
+
+---
+
+## Step 13 — Clean up `docs/cms-guidelines/`
+
+Templates that have already had CMS guidelines generated will ship `docs/cms-guidelines/` files for components and collections that no longer exist after this cleanup. Trim it down to only the three kept types (Generic component, Generic collection, Related articles), then regenerate the merged docs.
+
+### 1. Delete obsolete component / collection / external markdown
+
+Remove every file under `docs/cms-guidelines/components/`, `docs/cms-guidelines/collections/`, and `docs/cms-guidelines/externals/` **except**:
+
+- `docs/cms-guidelines/components/generic.md`
+- `docs/cms-guidelines/collections/generic.md`
+- `docs/cms-guidelines/collections/related-articles.md`
+
+```bash
+# Components: keep only generic.md
+find docs/cms-guidelines/components -type f -name '*.md' ! -name 'generic.md' -delete 2>/dev/null || true
+
+# Collections: keep only generic.md and related-articles.md
+find docs/cms-guidelines/collections -type f -name '*.md' \
+  ! -name 'generic.md' ! -name 'related-articles.md' -delete 2>/dev/null || true
+
+# Externals: nothing kept
+rm -rf docs/cms-guidelines/externals 2>/dev/null || true
+```
+
+### 2. Trim `docs/cms-guidelines/screenshots/`
+
+Delete every PNG under `docs/cms-guidelines/screenshots/` that is not for `generic` (component or collection) or `related-articles` (collection):
+
+```bash
+# Component screenshots: keep generic-*.png only
+find docs/cms-guidelines/screenshots/components -type f \
+  ! -name 'generic-*.png' -delete 2>/dev/null || true
+
+# Collection screenshots: keep generic-*.png and related-articles-*.png
+find docs/cms-guidelines/screenshots/collections -type f \
+  ! -name 'generic-*.png' ! -name 'related-articles-*.png' -delete 2>/dev/null || true
+
+# Externals screenshots: drop entirely
+rm -rf docs/cms-guidelines/screenshots/externals 2>/dev/null || true
+```
+
+### 3. Trim `docs/cms-guidelines/screenshots/index.json`
+
+If it exists, edit `docs/cms-guidelines/screenshots/index.json` so it contains only entries for the three kept types — `Generic` (component), `Generic` (collection), and `Related articles` (collection). All other entries must be removed; otherwise the merged guidelines will reference deleted screenshots.
+
+### 4. Regenerate the merged guidelines
+
+```bash
+pnpm cms-guidelines:merge
+pnpm cms-generate-html-style-guide
+```
+
+This rewrites `docs/cms-guidelines/COMPONENT_GUIDELINES_FOR_LLM.md` and `docs/cms-guidelines/html-component-style-guide.md` against the trimmed inputs.
+
+---
+
+## Step 14 — Clean up `src/generated/cms-discovery/accepted-variants/`
+
+The same component/collection types are referenced by JSON discovery files under `src/generated/cms-discovery/accepted-variants/`. Stale entries for removed types must be deleted, otherwise `generate-showcase-mocks` and the CMS guideline skills will repopulate guidelines for components that no longer exist in code.
+
+Delete everything in `accepted-variants/` **except**:
+
+- `accepted-variants/generic.json` (if present at the top level)
+- `accepted-variants/related-articles.json` (if present at the top level)
+- `accepted-variants/components/generic.json`
+- `accepted-variants/collections/generic.json`
+- `accepted-variants/collections/related-articles.json`
+
+```bash
+DISCOVERY=src/generated/cms-discovery/accepted-variants
+
+# Top-level legacy files (older templates): keep generic.json + related-articles.json only
+find "$DISCOVERY" -maxdepth 1 -type f -name '*.json' \
+  ! -name 'generic.json' ! -name 'related-articles.json' -delete 2>/dev/null || true
+
+# Components: keep generic.json only
+find "$DISCOVERY/components" -type f -name '*.json' \
+  ! -name 'generic.json' -delete 2>/dev/null || true
+
+# Collections: keep generic.json + related-articles.json
+find "$DISCOVERY/collections" -type f -name '*.json' \
+  ! -name 'generic.json' ! -name 'related-articles.json' -delete 2>/dev/null || true
+
+# Externals: drop entirely
+rm -rf "$DISCOVERY/externals" 2>/dev/null || true
+```
+
+If the project also ships top-level showcase outputs (`src/generated/showcase-examples.json`, `src/generated/showcase-mocks-draft.json`), delete those too — they are regenerated by `pnpm generate-showcase-mocks`. Leave `src/generated/showcase-mocks.json` (it is committed and will be re-curated via the **curate-showcase-mocks** skill on demand).
+
+---
+
+## What is deliberately left untouched
+
+- `src/app/(cms-routes)/` — all routing is left as-is; the CMS routes work with whatever is registered
+- `src/lib/constants.ts` — site title/description stays as-is for cleanup; update manually for new projects
+- `src/project/STYLING.md` and `src/project/ANIMATION.md` — left for human review; update to reflect the new bare-bones system
+- `src/project/font.ts` and `src/fonts/` — deleted (step 2 above)
+- `scripts/master-schema.json` — never modified, always kept as the original export