agents-config 1.1.2 → 1.2.0

package/AGENTS.md

@@ -188,10 +188,9 @@ Include: retry logic, rate limit handling, proper attribution
 ### 4. Performance Optimization Agent
 **Purpose**: Analyze and optimize React component performance
 
-**Skill**: [vercel-react-best-practices](./skills/vercel-react-best-practices/SKILL.md)
+**Rule**: [web-performance](./rules/web-performance.md)
 
 **Capabilities**:
-- Applies Vercel React Best Practices (45 rules across 8 categories)
 - Analyzes bundle size and tree-shaking opportunities
 - Identifies re-render issues and optimization opportunities
 - Implements memoization patterns (`React.memo`, `useMemo`, `useCallback`)
@@ -225,7 +224,7 @@ Priority: Apply bundle optimization and re-render prevention patterns
 - Creates or updates component spec before refactoring
 - Updates components to latest framework patterns
 - Applies TypeScript best practices
-- Applies Vercel React Best Practices optimization rules
+- Applies performance optimization patterns
 - Improves accessibility (ARIA labels, keyboard navigation)
 - Optimizes performance (memoization, lazy loading)
 - Maintains backward compatibility where possible
@@ -419,7 +418,6 @@ Include: accessibility section, code examples, interactive controls
 | `skills/accessibility-audit/` | Accessibility verification checklist | Accessibility Audit |
 | `skills/scaffold-component/` | Component scaffolding workflow | Component Scaffolding |
 | `skills/integrate-gemini/` | AI integration patterns | AI Integration |
-| `skills/vercel-react-best-practices/` | Performance optimization rules (45 rules, 8 categories) | Performance Optimization |
 | `skills/workflows/` | Development workflows (SDD, setup) | All agents following SDD |
 
 ---

package/README.md

@@ -148,27 +148,10 @@ Implement Google Gemini API integration with:
 - Loading and streaming UI states
 - Attribution and safety requirements
 
-#### **`vercel-react-best-practices/`** (Optional)
-Performance optimization guidelines from Vercel Engineering. Covers 45+ rules across 8 categories:
-- Eliminating waterfalls (async patterns)
-- Bundle size optimization
-- Server-side performance
-- Client-side data fetching
-- Rendering optimization
-- Re-render prevention
-- Event handling and refs
-- JavaScript optimization
-
-**Installation:**
-```bash
-npx add-skill vercel-labs/agent-skills
-```
-
-Includes subdirectories:
-- **`rules/`** - Individual rule documents (45+ files organized by category)
-- **`workflows/`** - Task-specific workflows:
-  - `sdd-workflow.md` - Spec-driven development workflow
-  - `setup-orchestration.md` - Project setup orchestration
+#### **`workflows/`**
+Task-specific development workflows:
+- **`sdd-workflow.md`** - Spec-driven development workflow
+- **`setup-orchestration.md`** - Project setup orchestration
 
 ## Key Principles
 
@@ -186,7 +169,7 @@ Reference the appropriate skill or rule based on the development task:
 - Use `accessibility-audit` before marking features complete
 - Use `scaffold-component` when creating new components
 - Use `integrate-gemini` for AI feature implementation
-- Install and reference `vercel-react-best-practices` for performance optimization (optional: `npx add-skill vercel-labs/agent-skills`)
+- Reference `web-performance` rules for optimization guidance
 
 ### For Developers
 - Start with [AGENTS.md](AGENTS.md) for core principles
@@ -260,4 +243,4 @@ MIT © Eric Thayer
 
 ---
 
-**Last Updated:** January 31, 2025
+**Last Updated:** January 31, 2026

package/adapters/claude.template.md

@@ -25,7 +25,6 @@ For complex tasks, use these specialized skill workflows:
 - `.agents/skills/accessibility-audit/SKILL.md` - Comprehensive accessibility testing
 - `.agents/skills/scaffold-component/SKILL.md` - Component scaffolding with specs
 - `.agents/skills/integrate-gemini/SKILL.md` - AI integration patterns (if enabled)
-- `.agents/skills/vercel-react-best-practices/SKILL.md` - Performance patterns
 
 ### Instructions (in .agents/instructions/)
 

package/adapters/codex.template.md

@@ -21,7 +21,6 @@ This project follows shared agentic configuration:
 - `.agents/skills/accessibility-audit/SKILL.md` - Accessibility compliance checking
 - `.agents/skills/scaffold-component/SKILL.md` - Component scaffolding workflow
 - `.agents/skills/integrate-gemini/SKILL.md` - AI integration patterns
-- `.agents/skills/vercel-react-best-practices/SKILL.md` - Performance optimization
 
 ## Agent Configuration
 

package/adapters/copilot.template.md

@@ -21,7 +21,6 @@ This project follows shared agentic configuration guidelines. All rules, skills,
 - **accessibility-audit/SKILL.md** - WCAG 2.2 AA compliance auditing
 - **scaffold-component/SKILL.md** - Component scaffolding with accessibility built-in
 - **integrate-gemini/SKILL.md** - AI feature integration patterns (if Gemini enabled)
-- **vercel-react-best-practices/SKILL.md** - Performance optimization patterns
 
 ### Instructions (in .agents/instructions/)
 

package/adapters/cursor.template.md

@@ -21,7 +21,6 @@ This project follows shared agentic configuration rules:
 - `.agents/skills/accessibility-audit/SKILL.md` - WCAG compliance checking
 - `.agents/skills/scaffold-component/SKILL.md` - Component generation
 - `.agents/skills/integrate-gemini/SKILL.md` - AI feature patterns
-- `.agents/skills/vercel-react-best-practices/SKILL.md` - Performance optimization
 
 ## Code Generation Rules
 

package/adapters/windsurf.template.md

@@ -23,7 +23,6 @@ This project uses shared agentic configuration:
 - `.agents/skills/accessibility-audit/SKILL.md` - WCAG 2.2 AA compliance
 - `.agents/skills/scaffold-component/SKILL.md` - Component generation workflow
 - `.agents/skills/integrate-gemini/SKILL.md` - AI integration patterns
-- `.agents/skills/vercel-react-best-practices/SKILL.md` - Performance optimization
 
 ## Code Generation Standards
 

package/bin/agents-init.js

@@ -129,6 +129,7 @@ ${colors.bright}Description:${colors.reset}
 
 ${colors.bright}What gets copied to .agents/:${colors.reset}
   - AGENTS.md (core guidelines)
+  - prompts/ (reusable AI workflow templates)
   - rules/ (coding standards based on your stack)
   - skills/ (specialized workflows)
   - instructions/ (process guidelines)
@@ -382,6 +383,18 @@ function copyAgentsFolder(projectDir, config, filesToCreate) {
     });
   }
   
+  // Prompts (reusable AI agent workflows)
+  const promptsDir = path.join(PACKAGE_ROOT, 'prompts');
+  const promptsDest = path.join(agentsDir, 'prompts');
+  if (fs.existsSync(promptsDir)) {
+    filesToCreate.push({
+      src: promptsDir,
+      dest: promptsDest,
+      relativePath: '.agents/prompts/',
+      type: 'folder',
+    });
+  }
+  
   // Rules
   for (const rule of rules) {
     const src = path.join(PACKAGE_ROOT, 'rules', `${rule}.md`);

package/instructions/development-standards.instructions.md

@@ -5,8 +5,8 @@ applyTo: '**'
 
 This document outlines the standards and best practices for Application Development which uses React, TypeScript, Material UI, and follows the [Airbnb style guide](https://airbnb.io/javascript/) page.
 
-## Web Interface Guidelines - Development Standards and Guidelines
-ALWAYS refer to the `.github/instructions/web-interface-guidelines.instructions.md` file for detailed explicit guidelines to follow when building _any_ web interface.
+## Web Interface Guidelines
+ALWAYS refer to the [Web Interface Guidelines](./web-interface-guidelines.instructions.md) for detailed explicit guidelines when building _any_ web interface.
 
 ## React
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agents-config",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "A comprehensive knowledge base and skill library for building production-grade React applications with AI-powered tools and best practices.",
   "author": "Eric Thayer",
   "license": "MIT",

package/prompts/create-pr.prompt.md

@@ -10,11 +10,10 @@ Analyze the last git commit and create a comprehensive PR description.
 ## Instructions
 
 1. **Get the latest commit details:**
-   - Use `mcp_github_get_commit` with:
-     - owner: `ericthayer`
-     - repo: `agents-config`
-     - sha: Get from `git log -1 --pretty=format:"%H"`
-     - include_diff: `true`
+   - Get repository info from `git remote get-url origin`
+   - Parse owner and repo from the URL
+   - Get commit SHA from `git log -1 --pretty=format:"%H"`
+   - Use the commit data to analyze changes
 
 2. **Analyze the commit data:**
    - Extract commit message (title and body)
@@ -55,21 +54,17 @@ Analyze the last git commit and create a comprehensive PR description.
 # Get current branch
 BRANCH=$(git branch --show-current)
 
-# Create PR with template
+# Create PR with generated description
 gh pr create \
   --title "$(git log -1 --pretty=format:'%s')" \
-  --body "$(cat .github/pr-template-commits.md)" \
+  --body-file /tmp/pr-body.md \
   --base main \
   --head $BRANCH
 ```
 
-See `.github/GITHUB_AUTH_SETUP.md` for authentication setup.
-
 ## Context
-- Repository: github.com/ericthayer/agents-config
-- Default base branch: `main`
-- See `.github/pr-template-commits.md` for reusable PR description template
-- See `.github/GITHUB_AUTH_SETUP.md` for GitHub authentication guide
+- Default base branch: `main` (or detect from `git remote show origin | grep 'HEAD branch'`)
+- Repository info detected dynamically from git remote
 
 ## Success Criteria
 ✅ PR created with descriptive title

package/prompts/scaffold-component.prompt.md

@@ -1,12 +1,13 @@
 ---
 agent: agent
-description: Create a React component named [ComponentName] that accepts props defined in [ComponentName]Props interface.
+description: Create a React component following project conventions and accessibility standards.
 ---
-# Create Starter Component
-**Read Instructions** from `./instructions/development-standards.instructions.md` before proceeding to see if there is anything specific to this prompt and helpful context when building React components.
+# Scaffold Component
 
-**Development Process**: Follow [Spec-Driven Development](../workflows/sdd-workflow.md)
-- Create component spec FIRST using the SDD template before generating code
+**Read Instructions** from [Development Standards](../instructions/development-standards.instructions.md) before proceeding for helpful context when building React components.
+
+**Development Process**: Follow [Spec-Driven Development](../skills/workflows/sdd-workflow.md)
+- Create component spec FIRST before generating code
 - Spec location: `src/components/${category}/${componentName}/${componentName}.spec.md`
 - Update spec changelog for any changes during development
 
@@ -19,39 +20,35 @@ description: Create a React component named [ComponentName] that accepts props d
 
 ## Required Inputs
 Don't assume, always ask for the following inputs before generating code:
-1. **Component Name** (must start with "Cb", e.g., "CbButton", "CbDataGrid")
-2. **MUI Base Component** (what MUI component to extend, e.g., "Button", "Card")
-3. **Category** (one of: dataDisplay, inputs, navigation, surfaces, feedback, entitlements, templates)
+1. **Component Name** (PascalCase, e.g., "Button", "DataGrid", "UserCard")
+2. **Base Component** (what to extend if any, e.g., MUI Button, native button)
+3. **Category** (e.g., ui, layout, forms, feedback, navigation)
 
 ## Generation Rules
-- Create 4 files in `./src/components/${category}/${componentName}/`:
+- Create files in `./src/components/${category}/${componentName}/`:
   - `${componentName}.tsx` - Main component
-  - `${componentName}.stories.tsx` - Storybook stories (must include 'visual:check' tag)
-  - `${componentName}.mdx` - Documentation
+  - `${componentName}.test.tsx` - Unit tests
+  - `${componentName}.stories.tsx` - Storybook stories (if Storybook is used)
   - `index.ts` - Exports
 
-## Templates
-Reference files in `src/examples/StarterComponent/` for structure patterns:
-- Use `CbStarter.tsx` pattern for component structure
-- Use `CbStarter.stories.tsx` pattern for stories (includes visual:check tag)
-- Use `CbStarter.mdx` pattern for documentation
-
-## MDX Structure (CRITICAL)
-**MUST include these wrappers** (see `.github/instructions/mdx.instructions.md`):
-1. Import `Unstyled` from `@storybook/addon-docs/blocks`
-2. Wrap all content in `<Unstyled>` → `<CSSTransition>` → `<div className="cbds-spec">` → `<ThemeProvider>`
-
-```mdx
-<Meta of={ComponentStories} />
-
-<Unstyled>
-  <CSSTransition in={true} appear timeout={300} classNames="fade">
-    <div className="cbds-spec">
-      <ThemeProvider theme={createCoBankTheme()}>
-        <CssBaseline />
-        {/* Content here */}
-      </ThemeProvider>
-    </div>
-  </CSSTransition>
-</Unstyled>
-```
+## Component Structure
+```tsx
+// ${componentName}.tsx
+import type { ComponentProps } from 'react';
+
+export interface ${componentName}Props {
+  // Define props with JSDoc comments
+}
+
+export function ${componentName}({ ...props }: ${componentName}Props) {
+  return (
+    // Semantic HTML with accessibility
+  );
+}
+```
+
+## Accessibility Requirements
+- Use semantic HTML elements
+- Include ARIA labels where needed
+- Ensure keyboard navigation works
+- Test with screen reader

package/rules/gemini.md

@@ -2,7 +2,7 @@
 
 **Purpose**: Architectural constraints, security requirements, and UX patterns for integrating Google Gemini API into React applications.
 
-**Related Skill**: [integrate_gemini](../skills/integrate_gemini/SKILL.md)
+**Related Skill**: [integrate-gemini](../skills/integrate-gemini/SKILL.md)
 
 ---