@ranimontagna/agent-toolkit 0.3.5 → 0.3.7

package/skills/frontend/react-native/react-native-unistyles-v3/references/styling-patterns.md

@@ -59,7 +59,7 @@ const styles = StyleSheet.create((theme, rt) => ({
 
 ## Dynamic Functions
 
-Pass arguments to styles at the call site. Arguments must be serializable.
+Pass arguments to styles at the call site. Arguments must be serializable: Unistyles stores them in C++ and re-runs the function natively (theme/runtime changes, frozen screens re-linking). Functions are dropped and `Date`/`Map`/`Set`/class instances become plain objects — pass primitives or plain objects instead (e.g. `date.getTime()`).
 
 ```tsx
 const styles = StyleSheet.create(theme => ({
@@ -128,9 +128,9 @@ const styles = StyleSheet.create(theme => ({
 }))
 ```
 
-### Nested breakpoints (transform, shadowOffset)
+### Nested breakpoints (transform, shadowOffset, filter)
 
-For properties expecting objects (like `transform` or `shadowOffset`), use breakpoints at the nested level:
+For properties expecting objects (like `transform`, `shadowOffset` or `filter`), use breakpoints at the nested level:
 
 ```tsx
 const styles = StyleSheet.create({
@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
 
 ### Built-in breakpoints: landscape / portrait
 
-Unistyles has built-in `landscape` and `portrait` breakpoints:
+Unistyles has built-in `landscape` (width > height) and `portrait` (height >= width) breakpoints. On iOS/Android they're only available when you **haven't registered your own breakpoints**; on web they always become `@media (orientation: ...)` queries:
 
 ```tsx
 const styles = StyleSheet.create({
@@ -241,6 +241,27 @@ const styles = StyleSheet.create(theme => ({
 styles.useVariants({})
 ```
 
+- Always pass an object — `useVariants(undefined)` throws on native.
+- `undefined` and `null` values fall back to `default`; boolean `false` is NOT `default`.
+- Without any `useVariants` call, variants (including `default`) are ignored.
+
+### Numeric variant keys
+
+```tsx
+const styles = StyleSheet.create({
+  heading: {
+    variants: {
+      level: {
+        1: { fontSize: 32 },
+        2: { fontSize: 24 },
+      },
+    },
+  },
+})
+
+styles.useVariants({ level: 1 })  // use whole numbers (converted to integers on native)
+```
+
 ### Compound variants
 
 Apply styles only when multiple variant values match simultaneously:
@@ -285,6 +306,7 @@ const styles = StyleSheet.create(theme => ({
 
 type ChipVariants = UnistylesVariants<typeof styles>
 // { size?: 'sm' | 'md' | 'lg'; color?: 'primary' | 'secondary' }
+// Options of a group are merged across all styles — no need to repeat empty variants
 
 type ChipProps = { label: string } & ChipVariants
 
@@ -306,26 +328,28 @@ import { mq, StyleSheet } from 'react-native-unistyles'
 const styles = StyleSheet.create({
   container: {
     padding: {
-      [mq.only.width(null, 576)]: 8,       // width <= 576
-      [mq.only.width(576, 768)]: 16,       // 576 < width <= 768
-      [mq.only.width(768)]: 24,            // width > 768
+      [mq.only.width(null, 575)]: 8,       // 0 <= width <= 575
+      [mq.only.width(576, 767)]: 16,       // 576 <= width <= 767
+      [mq.only.width(768)]: 24,            // width >= 768
     },
   },
   sidebar: {
     display: {
-      [mq.only.width(null, 768)]: 'none',
+      [mq.only.width(null, 767)]: 'none',
       [mq.only.width(768)]: 'flex',
     },
   },
 })
 ```
 
-### Mixing breakpoint names and pixel values
+**Both bounds are inclusive** — `mq.only.width(576, 768)` and `mq.only.width(768)` overlap at exactly 768 (on native the first matching query wins). `mq` has priority over breakpoint keys in the same object. Breakpoint names are resolved when `mq` is called, so `StyleSheet.configure` must run first.
+
+### Mixing breakpoint names and numeric values
 
 ```tsx
-mq.only.width('sm', 'lg')       // between sm and lg breakpoints
-mq.only.width(320, 768)         // between 320px and 768px
-mq.only.height(400)             // height > 400px
+mq.only.width('sm', 'lg')       // sm <= width <= lg
+mq.only.width(320, 768)         // 320 <= width <= 768 (same units as rt.screen)
+mq.only.height(400)             // height >= 400
 ```
 
 ### Combined width + height
@@ -334,7 +358,7 @@ mq.only.height(400)             // height > 400px
 const styles = StyleSheet.create({
   panel: {
     flexDirection: {
-      [mq.width(null, 768).and.height(null, 500)]: 'column',   // small screen
+      [mq.width(null, 767).and.height(null, 499)]: 'column',   // small screen
       [mq.width(768).and.height(500)]: 'row',                  // large screen
     },
   },
@@ -408,6 +432,11 @@ Requires themes named exactly `light` and `dark`.
 ```tsx
 import { UnistylesRuntime } from 'react-native-unistyles'
 
+// setTheme throws while adaptive themes are enabled — disable them first
+if (UnistylesRuntime.hasAdaptiveThemes) {
+  UnistylesRuntime.setAdaptiveThemes(false)
+}
+
 // Switch to specific theme
 UnistylesRuntime.setTheme('dark')
 
@@ -439,7 +468,7 @@ import { ScopedTheme } from 'react-native-unistyles'
   <DarkFooter />
 </ScopedTheme>
 
-// Invert: light→dark, dark→light
+// Invert: light→dark, dark→light (no-op unless adaptiveThemes is enabled)
 <ScopedTheme invertedAdaptive>
   <InvertedSection />
 </ScopedTheme>
@@ -461,7 +490,7 @@ const Layout = () => (
 
     <MainContent />
 
-    {/* Hide mobile nav on tablet+ */}
+    {/* Hide mobile nav on tablet+ (width >= 768) */}
     <Hide mq={mq.only.width(768)}>
       <BottomNav />
     </Hide>
@@ -490,7 +519,24 @@ const styles = StyleSheet.create(theme => ({
 }))
 ```
 
-### Pseudo-classes
+`_web` can contain breakpoints and pseudo selectors but **not** `variants`; put a `_web` block inside a variant instead:
+
+```tsx
+const styles = StyleSheet.create({
+  grid: {
+    _web: { display: { xs: 'flex', md: 'grid' } },          // breakpoints OK
+    variants: {
+      size: {
+        large: { _web: { gridTemplateColumns: 'repeat(3, 1fr)' } },  // _web inside a variant OK
+      },
+    },
+  },
+})
+```
+
+Inside `_web` use plain CSS values (e.g. `transform: 'translateX(10px)'`), not RN-specific syntax.
+
+### Pseudo-classes and pseudo-elements
 
 ```tsx
 const styles = StyleSheet.create(theme => ({
@@ -502,7 +548,7 @@ const styles = StyleSheet.create(theme => ({
       },
       _active: {
         backgroundColor: theme.colors.primaryActive,
-        transform: [{ scale: 0.98 }],
+        transform: 'scale(0.98)',  // CSS string inside _web
       },
       _focus: {
         outlineWidth: 2,
@@ -512,18 +558,21 @@ const styles = StyleSheet.create(theme => ({
         opacity: 0.5,
         cursor: 'not-allowed',
       },
-      _focusVisible: {
+      '_focus-visible': {
         outlineStyle: 'dashed',
       },
-      _focusWithin: {
+      '_focus-within': {
         borderColor: theme.colors.focus,
       },
+      _before: {
+        content: '"*"',
+      },
     },
   },
 }))
 ```
 
-Supported pseudo-classes: `_hover`, `_active`, `_focus`, `_disabled`, `_focusVisible`, `_focusWithin`.
+Any standard (non-experimental) CSS pseudo-class / pseudo-element works, including functional ones like `_nth-child(2n)`: replace `:` / `::` with `_` and keep the CSS (kebab-case) name — `_hover`, `_active`, `'_focus-visible'`, `'_first-child'`, `_before`, `_after`, `_placeholder`, etc.
 
 ### Custom CSS class names
 
@@ -531,20 +580,28 @@ Supported pseudo-classes: `_hover`, `_active`, `_focus`, `_disabled`, `_focusVis
 const styles = StyleSheet.create({
   container: {
     _web: {
-      _classNames: ['my-custom-class', 'another-class'],
+      _classNames: ['my-custom-class', 'another-class'],  // or a single string
     },
   },
 })
 ```
 
+### CSS variables
+
+With `CSSVars: true` (the default), theme strings become CSS variables (`--colors-primary`) under `:root.<themeName>` (or `prefers-color-scheme` media queries with adaptive themes), so switching themes only swaps the `html` class. Set `CSSVars: false` if your themes differ in non-string values (numbers, functions).
+
+### RTL / logical props on web
+
+RN logical props map to CSS logical properties and follow the document `dir`: `start`/`end` → `inset-inline-*`, `marginStart`/`marginEnd` → `margin-inline-*`, `paddingStart`/`paddingEnd` → `padding-inline-*`, `borderStart*`/`borderEnd*` color & width → `border-inline-*`. Corner radii (`borderTopStartRadius`, ...) still map to physical corners.
+
 ### getWebProps for custom web components
 
 ```tsx
-import { getWebProps } from 'react-native-unistyles/web-only'
+import { getWebProps } from 'react-native-unistyles/web'
 
 const CustomWebComponent = () => {
-  const { className, style } = getWebProps(styles.container)
-  return <div className={className} style={style}>Content</div>
+  const webProps = getWebProps(styles.container)  // { className, ref }
+  return <div {...webProps}>Content</div>
 }
 ```
 
@@ -552,7 +609,7 @@ const CustomWebComponent = () => {
 
 ## Reanimated Integration
 
-### useAnimatedTheme — access theme in worklets
+### useAnimatedTheme — access theme in worklets (no re-renders, respects ScopedTheme)
 
 ```tsx
 import { useAnimatedTheme } from 'react-native-unistyles/reanimated'
@@ -588,9 +645,13 @@ const styles = StyleSheet.create(theme => ({
 
 const AnimatedButton = ({ isActive }) => {
   styles.useVariants({ state: isActive ? 'active' : 'inactive' })
-  const animatedColor = useAnimatedVariantColor(styles.button, 'backgroundColor')
+  // SharedValue<string> holding the current variant color (also follows theme/breakpoint changes)
+  const color = useAnimatedVariantColor(styles.button, 'backgroundColor')
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: withTiming(color.value, { duration: 300 }),
+  }))
 
-  return <Animated.View style={[styles.button, animatedColor]} />
+  return <Animated.View style={[styles.button, animatedStyle]} />
 }
 ```
 
@@ -614,50 +675,74 @@ Never spread:
 ### App Router
 
 ```tsx
+// Style.tsx
+'use client'
+
+import { PropsWithChildren, useRef } from 'react'
+import { useServerUnistyles } from 'react-native-unistyles/server'
+import { useServerInsertedHTML } from 'next/navigation'
+import './unistyles'
+
+export const Style = ({ children }: PropsWithChildren) => {
+  const isServerInserted = useRef(false)
+  const unistyles = useServerUnistyles()  // also hydrates automatically on the client
+
+  useServerInsertedHTML(() => {
+    if (isServerInserted.current) {
+      return null
+    }
+
+    isServerInserted.current = true
+
+    return unistyles
+  })
+
+  return <>{children}</>
+}
+
 // app/layout.tsx
-import { useServerUnistyles } from 'react-native-unistyles'
+import '../unistyles'
+import { Style } from '../Style'
 
 export default function RootLayout({ children }) {
-  const styles = useServerUnistyles()
-
   return (
-    <html>
-      <head>{styles}</head>
-      <body>{children}</body>
+    <html lang="en">
+      <body>
+        <Style>{children}</Style>
+      </body>
     </html>
   )
 }
-
-// app/page.tsx (client component)
-'use client'
-import { hydrateServerUnistyles } from 'react-native-unistyles'
-
-hydrateServerUnistyles()
 ```
 
 ### Pages Router
 
 ```tsx
 // pages/_document.tsx
-import { getServerUnistyles, resetServerUnistyles } from 'react-native-unistyles'
+import { getServerUnistyles, resetServerUnistyles } from 'react-native-unistyles/server'
 
-export default function Document() {
-  const styles = getServerUnistyles()
+export default class Document extends NextDocument {
+  static async getInitialProps({ renderPage }: DocumentContext) {
+    const page = await renderPage()
+    const styles = getServerUnistyles()
 
-  return (
-    <Html>
-      <Head>{styles}</Head>
-      <body><Main /><NextScript /></body>
-    </Html>
-  )
+    resetServerUnistyles()  // required after every request
+
+    return { ...page, styles }
+  }
+  // render() ...
 }
 
 // pages/_app.tsx
-import { hydrateServerUnistyles } from 'react-native-unistyles'
+import { hydrateServerUnistyles } from 'react-native-unistyles/server'
 
-hydrateServerUnistyles()
+useEffect(() => {
+  hydrateServerUnistyles()
+}, [])
 ```
 
+Without adaptive themes, Unistyles adds the theme class to `<html>` — add `suppressHydrationWarning` (or the class itself) to avoid a hydration warning.
+
 ---
 
 ## Runtime Values in Styles
@@ -687,14 +772,16 @@ const styles = StyleSheet.create((theme, rt) => ({
     padding: rt.pixelRatio > 2 ? 16 : 12,
   },
   rtlAware: {
-    textAlign: rt.rtl ? 'right' : 'left',
+    textAlign: rt.rtl ? 'right' : 'left',  // rtl updates live on Android/web; iOS needs a restart
   },
 }))
 ```
 
+On web: `insets`, `statusBar` and `navigationBar` are `0`, `fontScale` is `1`, `pixelRatio` is `window.devicePixelRatio`.
+
 ### IME / Keyboard inset
 
-`rt.insets.ime` provides the keyboard height, replacing `react-native-reanimated`'s `useAnimatedKeyboard`:
+`rt.insets.ime` provides the keyboard inset, replacing `react-native-reanimated`'s `useAnimatedKeyboard`:
 
 ```tsx
 const styles = StyleSheet.create((theme, rt) => ({
@@ -703,3 +790,9 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
 }))
 ```
+
+- **iOS**: full keyboard height, animated frame by frame
+- **Android**: keyboard height minus the bottom inset; animated on Android 11+ (API 30), jumps on older versions
+- **Web**: always `0`
+
+Read `ime` in `StyleSheet` (zero re-renders). Reading it in `useUnistyles`/`withUnistyles` subscribes only to `Ime` but re-renders on every animation frame.

package/skills/frontend/react-native/react-native-unistyles-v3/references/third-party-integration.md

@@ -4,7 +4,9 @@ How to integrate Unistyles v3 with third-party libraries, custom components, and
 
 ## withUnistyles HOC
 
-For third-party components that need theme-derived **non-style props** (e.g., `color`, `size`, `tintColor`).
+For components that need theme-derived **non-style props** (e.g., `color`, `size`, `trackColor` — including RN components like `Button`/`Switch`), for `contentContainerStyle`, and for third-party views that don't expose a native ref (so Unistyles can't update them from C++).
+
+On iOS/Android a wrapped component is always subscribed to theme changes; other dependencies (insets, breakpoints, ...) re-render it only if the mappings or the passed styles use them.
 
 ### Basic wrapping
 
@@ -22,7 +24,7 @@ const UniButton = withUnistyles(Button, (theme, rt) => ({
 <UniButton title="Override" color="red" />  // overrides mapped color
 ```
 
-### Static mappings vs uniProps
+### Mappings vs uniProps
 
 The second argument to `withUnistyles` maps theme/runtime values to props. These are applied as **defaults** — the consumer can override them:
 
@@ -39,6 +41,31 @@ const UniIcon = withUnistyles(Icon, (theme) => ({
 <UniIcon name="home" color="red" />
 ```
 
+Mappings can't see component props/state. For that, pass `uniProps` per instance:
+
+```tsx
+const UniSwitch = withUnistyles(Switch)
+
+<UniSwitch
+  uniProps={(theme) => ({
+    trackColor: { true: isDisabled ? theme.colors.disabled : theme.colors.primary },
+  })}
+/>
+```
+
+Priority: mappings < `uniProps` < inline props.
+
+### Remounting with `key`
+
+Mappings and `uniProps` can return `key` — it's used as the React `key` (not passed down), so changing it remounts the component (`uniProps` wins if both set):
+
+```tsx
+const UniFlashList = withUnistyles(FlashList, (theme, rt) => ({
+  key: rt.isLandscape ? 'landscape' : 'portrait',
+  numColumns: rt.isLandscape ? 4 : 2,
+}))
+```
+
 ### Ref forwarding
 
 Refs are forwarded automatically:
@@ -55,7 +82,7 @@ const inputRef = useRef<TextInput>(null)
 
 ### style and contentContainerStyle auto-processing
 
-`withUnistyles` automatically processes `style` and `contentContainerStyle` props. You can pass Unistyles styles directly:
+`withUnistyles` automatically processes `style` and `contentContainerStyle` props (they can't be returned from mappings/`uniProps`). You can pass Unistyles styles directly:
 
 ```tsx
 const UniScrollView = withUnistyles(ScrollView)
@@ -70,7 +97,7 @@ const UniScrollView = withUnistyles(ScrollView)
 
 ## Babel Plugin: autoProcessPaths
 
-By default, the Babel plugin only processes files inside the `root` directory. For files outside `root` (e.g., shared packages in a monorepo), add their paths:
+The plugin processes every file under `root` and always ignores `node_modules`. `autoProcessPaths` opts 3rd party code in: inside these paths, `react-native` imports are replaced with Unistyles ref-borrowing factories, so the library's views update from C++:
 
 ```js
 // babel.config.js
@@ -79,21 +106,21 @@ module.exports = {
     ['react-native-unistyles/plugin', {
       root: 'src',
       autoProcessPaths: [
-        '../packages/shared-ui/src',
-        '../packages/design-system/src',
+        'external-library/components',
+        'my-ui-kit/src',
       ],
     }]
   ]
 }
 ```
 
-**Important:** Paths are relative to the project root (where babel.config.js lives).
+**Important:** each entry is matched as a **substring of the absolute file path** — use path fragments like `'some-lib/src'`, not relative paths like `'../packages/ui'` (those never match). `react-native-reanimated/src/component` and `react-native-reanimated/lib/module/component` are always included; your paths are added to them.
 
 ---
 
 ## Babel Plugin: autoProcessImports
 
-Process files that import from custom package names (useful for internal packages that re-export components):
+Force-process any file (outside `node_modules`) that imports one of these sources — the way to cover monorepo packages that live outside `root`:
 
 ```js
 // babel.config.js
@@ -101,19 +128,19 @@ module.exports = {
   plugins: [
     ['react-native-unistyles/plugin', {
       root: 'src',
-      autoProcessImports: ['@myorg/ui', '@myorg/shared-components'],
+      autoProcessImports: ['@my-org/styles', '@my-org/ui'],
     }]
   ]
 }
 ```
 
-This tells the plugin: "If a file imports from `@myorg/ui`, process the components in that file the same way as standard React Native components."
+This tells the plugin: "If a file imports exactly `@my-org/styles`, process it like a file under `root`" (stylesheets + react-native component factories).
 
 ---
 
 ## Babel Plugin: autoRemapImports
 
-Map exotic component imports to Unistyles component factories. Useful when a library exports components with non-standard names that the plugin can't detect:
+Advanced (rarely needed): for a `node_modules` library that doesn't import `react-native` components directly (e.g. imports raw native components from `react-native/Libraries/...`), remap those imports to Unistyles factories (names from `react-native-unistyles/components/native`, e.g. `NativeView`, `NativeText`):
 
 ```js
 // babel.config.js
@@ -121,21 +148,37 @@ module.exports = {
   plugins: [
     ['react-native-unistyles/plugin', {
       root: 'src',
-      autoRemapImports: {
-        '@expo/vector-icons': {
-          'MaterialIcons': 'Text',     // treat as Text factory
-          'FontAwesome': 'Text',
-        },
-        'react-native-svg': {
-          'Svg': 'View',              // treat as View factory
-          'Circle': 'View',
+      autoRemapImports: [
+        {
+          path: 'node_modules/custom-library/components',  // must be a path within node_modules
+          imports: [
+            {
+              isDefault: false,
+              name: 'NativeText',
+              path: 'react-native/Libraries/Text/TextNativeComponent',
+              mapTo: 'NativeText',
+            },
+            {
+              isDefault: true,
+              path: 'react-native/Libraries/Components/View/ViewNativeComponent',
+              mapTo: 'NativeView',
+            },
+          ],
         },
-      },
+      ],
     }]
   ]
 }
 ```
 
+It doesn't make non-RN views (e.g. SVG, icon fonts) reactive — use `withUnistyles` for those.
+
+---
+
+## Re.Pack
+
+Use `RepackUnistylePlugin` from `react-native-unistyles/repack-plugin` in your Rspack config instead of the Babel config entry; pass the same options as `unistylesPluginOptions` (`root` required). See [setup-guide.md](setup-guide.md#repack).
+
 ---
 
 ## React Compiler
@@ -168,6 +211,10 @@ module.exports = {
 
 - `react-native-reanimated` 3.17.3+ **or** 4.0.0-beta.3+
 
+### Theme in worklets
+
+Use `useAnimatedTheme()` from `react-native-unistyles/reanimated` (a `SharedValue`, no re-renders, follows `ScopedTheme`) instead of `UnistylesRuntime.getTheme()` (doesn't update worklets) or `useUnistyles()` (re-renders). Animate variant colors with `useAnimatedVariantColor(styles.x, 'backgroundColor')`, which returns a `SharedValue<string>` to use inside `useAnimatedStyle`.
+
 ### CSS transitions workaround
 
 When using Reanimated's CSS transitions, theme-dependent colors may become stale after theme changes. Force re-mount with `key`:
@@ -202,13 +249,9 @@ const animatedStyle = useAnimatedStyle(() => ({
 
 ---
 
-## react-native-edge-to-edge
-
-Required for Android to get proper inset values. Install and use `rt.insets` in styles:
+## Edge-to-edge (Android)
 
-```bash
-npm install react-native-edge-to-edge
-```
+Unistyles reads insets with `WindowInsetsCompat`, which needs an edge-to-edge layout — Unistyles enables it automatically. `react-native-edge-to-edge` is **optional** since v3.1.0; instead set `edgeToEdgeEnabled=true` in `android/gradle.properties` (Expo SDK 54+ does this for you). Keep `react-native-edge-to-edge` only if other libraries detect it (e.g. `react-native-bootsplash`, `react-native-permissions`). Then use `rt.insets` in styles:
 
 ```tsx
 const styles = StyleSheet.create((theme, rt) => ({
@@ -225,6 +268,12 @@ This replaces `react-native-safe-area-context` for most use cases. No `<SafeArea
 
 ---
 
+## Frozen / hidden screens
+
+Screens hidden without unmounting keep their Unistyles bindings: `freezeOnBlur` (react-navigation / react-native-screens, via `react-freeze`), react-navigation `inactiveBehavior` (React `<Activity />`), and `Suspense` fallbacks. Theme/runtime changes made while hidden are applied when the screen becomes visible (Suspense/react-freeze since 3.2.0, `<Activity />` since 3.3.0, stale-style fixes in **3.4.0** — upgrade if frozen screens come back with outdated styles). Components using `useUnistyles`/`withUnistyles` re-render only after unfreezing.
+
+---
+
 ## FlatList Alternatives
 
 `FlatList` has a known crash on orientation change ([#803](https://github.com/jpudysz/react-native-unistyles/issues/803)) — this is a React Native core issue, not Unistyles-specific.
@@ -273,7 +322,7 @@ For design system libraries (Paper, Tamagui, NativeBase, etc.) that have their o
 Keep the library's theme in sync with Unistyles:
 
 ```tsx
-import { UnistylesRuntime, StyleSheet } from 'react-native-unistyles'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from 'react-native-unistyles'
 
 // Listen for Unistyles theme changes and sync
 StyleSheet.addChangeListener((deps) => {

package/skills/media/brag-slim/NOTICE.md

@@ -2,9 +2,9 @@
 
 This skill was copied from the latent-spaces brag repository.
 
-- Source: https://github.com/latent-spaces/brag/tree/fd7de7e418334876b3ea4e9258231a66a2c2a38d/skills/brag-slim
-- Source commit: fd7de7e418334876b3ea4e9258231a66a2c2a38d
-- Source SHA-256 (`skills/brag-slim/SKILL.md`): c97ea53d7c5df2a3dd64694a388c013a05c363ac7c2e4e0d956c18ad3bfaa5ee
+- Source: https://github.com/latent-spaces/brag/tree/069432cac935ed1895859df201c31436c07fb74e/skills/brag-slim
+- Source commit: 069432cac935ed1895859df201c31436c07fb74e
+- Source SHA-256 (`skills/brag-slim/SKILL.md`): 3079af81f4239682fb2d1d6a1a008f1542b20bee8a3ceb06030e2fcae38b2e29
 - License: MIT
 - Copyright: Copyright (c) 2026 Shunit Haviv Hakimi
 

package/skills/media/brag-slim/SKILL.md

@@ -36,6 +36,8 @@ Read the code: the main page, styles (exact colors and fonts), README, routes an
 
 You have the source, so use it directly: import or render the project's real components, stylesheets, fonts, images and animations in the video instead of rebuilding them.
 
+Don't read build output (`dist/`, `.next/`, `build/`), lock files, test files, `.git/`, env and secret files (`.env`, `.env.*`), key and credential material (`.pem`, `.key`, `id_rsa`, service-account JSON, anything under `secrets/` or `credentials/`), local config that commonly holds tokens, or anything `.gitignore` excludes for those reasons.
+
 ### Website
 
 Get the site as a visitor sees it. Many sites build their page with JavaScript, so a plain download can come back as an almost empty shell. If it does, load the page in a headless browser to get the rendered result. Dismiss cookie banners and other overlays, and scroll section by section, since content that animates in on scroll stays blank in a single full-page capture.
@@ -50,6 +52,8 @@ Get the site as a visitor sees it. Many sites build their page with JavaScript,
 
 Before planning, answer: What is it (one sentence)? Who is it for, and what does it do for them? What sets it apart? What's the most impressive or funniest claim? What's the visual hook? What real UI or flow should be shown? What tone fits? What's the one-line share caption?
 
+Everything gathered here can end up in a public video. Never carry secrets, API keys, tokens, internal hostnames or URLs, real customer or user names, email addresses, or other personal data into the plan, the video, or the share copy. If the real UI shows such data, swap in plausible fictional stand-ins and say so in the plan.
+
 ## 2. Plan
 
 Write `brag-plan.md`: the angle, the hook, 2–3 highlights, the punchline, tone, visual identity, and a scene-by-scene storyboard with durations that sum to the target.