agents-config 1.0.0

package/skills/vercel-react-best-practices/rules/server-dedup-props.md

@@ -0,0 +1,65 @@
+---
+title: Avoid Duplicate Serialization in RSC Props
+impact: LOW
+impactDescription: reduces network payload by avoiding duplicate serialization
+tags: server, rsc, serialization, props, client-components
+---
+
+## Avoid Duplicate Serialization in RSC Props
+
+**Impact: LOW (reduces network payload by avoiding duplicate serialization)**
+
+RSC→client serialization deduplicates by object reference, not value. Same reference = serialized once; new reference = serialized again. Do transformations (`.toSorted()`, `.filter()`, `.map()`) in client, not server.
+
+**Incorrect (duplicates array):**
+
+```tsx
+// RSC: sends 6 strings (2 arrays × 3 items)
+<ClientList usernames={usernames} usernamesOrdered={usernames.toSorted()} />
+```
+
+**Correct (sends 3 strings):**
+
+```tsx
+// RSC: send once
+<ClientList usernames={usernames} />
+
+// Client: transform there
+'use client'
+const sorted = useMemo(() => [...usernames].sort(), [usernames])
+```
+
+**Nested deduplication behavior:**
+
+Deduplication works recursively. Impact varies by data type:
+
+- `string[]`, `number[]`, `boolean[]`: **HIGH impact** - array + all primitives fully duplicated
+- `object[]`: **LOW impact** - array duplicated, but nested objects deduplicated by reference
+
+```tsx
+// string[] - duplicates everything
+usernames={['a','b']} sorted={usernames.toSorted()} // sends 4 strings
+
+// object[] - duplicates array structure only
+users={[{id:1},{id:2}]} sorted={users.toSorted()} // sends 2 arrays + 2 unique objects (not 4)
+```
+
+**Operations breaking deduplication (create new references):**
+
+- Arrays: `.toSorted()`, `.filter()`, `.map()`, `.slice()`, `[...arr]`
+- Objects: `{...obj}`, `Object.assign()`, `structuredClone()`, `JSON.parse(JSON.stringify())`
+
+**More examples:**
+
+```tsx
+// ❌ Bad
+<C users={users} active={users.filter(u => u.active)} />
+<C product={product} productName={product.name} />
+
+// ✅ Good
+<C users={users} />
+<C product={product} />
+// Do filtering/destructuring in client
+```
+
+**Exception:** Pass derived data when transformation is expensive or client doesn't need original.

package/skills/vercel-react-best-practices/rules/server-parallel-fetching.md

@@ -0,0 +1,83 @@
+---
+title: Parallel Data Fetching with Component Composition
+impact: CRITICAL
+impactDescription: eliminates server-side waterfalls
+tags: server, rsc, parallel-fetching, composition
+---
+
+## Parallel Data Fetching with Component Composition
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
+
+**Incorrect (Sidebar waits for Page's fetch to complete):**
+
+```tsx
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+```
+
+**Correct (both fetch simultaneously):**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+**Alternative with children prop:**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      <Header />
+      {children}
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <Layout>
+      <Sidebar />
+    </Layout>
+  )
+}
+```

package/skills/vercel-react-best-practices/rules/server-serialization.md

@@ -0,0 +1,38 @@
+---
+title: Minimize Serialization at RSC Boundaries
+impact: HIGH
+impactDescription: reduces data transfer size
+tags: server, rsc, serialization, props
+---
+
+## Minimize Serialization at RSC Boundaries
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect (serializes all 50 fields):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+```
+
+**Correct (serializes only 1 field):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```

package/skills/workflows/sdd-workflow.md

@@ -0,0 +1,49 @@
+---
+description: Template for creating a product and technical specification for a new component or feature.
+---
+
+# SPEC: [Component Name]
+
+## 1. Goal & Intent
+> Provide a brief description of what this component does and why we are building it.
+
+## 2. Usage & Interface
+> Show how this component will be called in code. Include prop definitions.
+
+```tsx
+<ComponentName 
+  prop1="value"
+  prop2={true}
+/>
+```
+
+## 3. Technical Implementation
+- **State Management**: (e.g., Local React state, Zustand, etc.)
+- **Logic**: (e.g., Use cases for specific hooks like `useEffect` or `useMemo`)
+- **Dependencies**: (e.g., Three.js, Lucide icons, etc.)
+
+## 4. Visuals & Interaction
+- **Aesthetics**: (e.g., "Glassmorphic," "High-contrast dark mode")
+- **Animations**: (e.g., "Fades in using Framer Motion," "Parallax scrolling")
+- **Container Queries**: How does it respond to its parent container?
+
+## 5. Accessibility (WCAG 2.1)
+- [ ] ARIA Labels defined
+- [ ] Keyboard navigation (Tab index, Enter key)
+- [ ] Reduced Motion compatibility
+- [ ] Sufficient color contrast
+
+## 6. Performance
+- [ ] Soft asset limit (e.g., < 500kb textures)
+- [ ] Component-level optimization (Render loops capped)
+- [ ] Critical CSS inlined
+
+## 7. Implementation Checklist
+- [ ] Initial scaffolding
+- [ ] Core logic / State
+- [ ] Visual styling (Tailwind v4)
+- [ ] Interaction / Animation
+- [ ] Final Accessibility audit
+
+## 8. Changelog
+- **[TIMESTAMP]**: Initial spec creation.

package/skills/workflows/setup-orchestration.md

@@ -0,0 +1,18 @@
+---
+description: Workflow for initializing the Agentic Orchestration environment in a new project.
+---
+
+# /setup-orchestration
+
+As an agent, when you are initialized in a new project environment based on this template, you must ensure the orchestration layer is correctly set up.
+
+## Steps
+
+1. **Verify Environment**: Check if the `.agent/rules` directory contains the standard rulesets (e.g., `accessibility.md`, `spec-driven-development.md`).
+2. **Initialize if Missing**: If rules are missing or empty, run the following command to pull them from the global standard:
+   ```bash
+   sh scripts/init-orchestration.sh
+   ```
+3. **Verify Symlinks vs Copies**: Confirm that the rules are actual files (this template uses a copy strategy, not symlinks).
+4. **Context Loading**: Once rules are present, read `AGENTIC_ORCHESTRATION.md` to understand the project's core philosophy and technical stack.
+5. **Ready State**: Notify the user that the orchestration environment is ready and ask for the first `SPEC.md` if one does not exist.