contextos-agents 2.1.0 → 2.2.0

package/catalog/skills/minimalist-design/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: minimalist-ui
+description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
+---
+
+# Protocol: Premium Utilitarian Minimalism UI Architect
+
+## Overview
+
+An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.
+
+## When to Use
+
+- When designing clean, editorial, or Notion-like document interfaces, workspaces, or notes apps.
+- When creating minimalist SaaS dashboards, personal essays, portfolios, or agency landing pages.
+- When asked for a "clean", "minimalist", "warm monochrome", or "flat bento-box" layout.
+
+## Rules & Patterns
+
+### 1. Absolute Negative Constraints (Banned Elements)
+
+The AI must strictly avoid the following generic web development defaults:
+
+- DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
+- DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
+- DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
+- DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
+- DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
+- DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
+- DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
+- DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
+- DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.
+
+### 2. Typographic Architecture
+
+The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
+
+- **Primary Sans-Serif (Body, UI, Buttons):** Use clean, geometric, or system-native fonts with character (`'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`).
+- **Editorial Serif (Hero Headings & Quotes):** (`'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`). Apply tight tracking (`-0.02em` to `-0.04em`) and tight line-height (`1.1`).
+- **Monospace (Code, Keystrokes, Meta-data):** (`'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`).
+- **Text Colors:** Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous line-height of `1.6` for legibility. Secondary text should be muted gray (`#787774`).
+
+### 3. Color Palette (Warm Monochrome + Spot Pastels)
+
+Color is a scarce resource, utilized only for semantic meaning or subtle accents.
+
+- **Canvas / Background:** Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
+- **Primary Surface (Cards):** `#FFFFFF` or `#F9F9F8`.
+- **Structural Borders / Dividers:** Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.
+- **Accent Colors:** Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds:
+  - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)
+  - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)
+  - Pale Green: `#EDF3EC` (Text: `#346538`)
+  - Pale Yellow: `#FBF3DB` (Text: `#956400`)
+
+### 4. Component Specifications
+
+- **Bento Box Feature Grids:** Asymmetrical CSS Grid layouts. Cards have `border: 1px solid #EAEAEA`, crisp border-radius (`8px` to `12px` max), and generous internal padding (`24px` to `40px`).
+- **Primary Call-To-Action (Buttons):** Solid `#111111`, text `#FFFFFF`, radius `4px` to `6px`, no box-shadow. Micro-scale `transform: scale(0.98)` on active.
+- **Tags & Status Badges:** Pill-shaped (`rounded-full`), small typography (`text-xs`), uppercase with wide tracking (`0.05em`), pastel background.
+- **Accordions (FAQ):** Separated by `border-bottom: 1px solid #EAEAEA` without card boxes. Crisp `+` / `-` toggle icons.
+- **Keystroke Micro-UIs:** `<kbd className="border border-[#EAEAEA] rounded bg-[#F7F6F3] font-mono px-1.5 py-0.5 text-xs">`.
+
+### 5. Iconography & Imagery
+
+- **System Icons:** Phosphor Icons (Bold/Fill) or Radix UI Icons for crisp, technical strokes.
+- **Photography:** Desaturated images with warm tint and subtle grain overlay (`opacity: 0.04`).
+- **Depth:** Subtle ambient gradients (`radial-gradient` with warm tones at `opacity: 0.03`) or minimal geometric line patterns.
+
+### 6. Subtle Motion & Micro-Animations
+
+- **Scroll Entry:** Fade-in + `translateY(12px)` over 600ms via `IntersectionObserver`.
+- **Hover States:** Subtle card lift with ultra-diffuse shadow (`0 2px 8px rgba(0,0,0,0.04)`).
+- **Staggered Reveals:** Cascading delay (`calc(var(--index) * 80ms)`).
+
+## Code Examples
+
+```tsx
+export function BentoFeatureCard({ title, description, badge, tagColor = "blue" }: { title: string; description: string; badge: string; tagColor?: string }) {
+  return (
+    <div className="bg-[#FFFFFF] border border-[#EAEAEA] rounded-xl p-8 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200">
+      <div className="flex items-center justify-between mb-4">
+        <span className="text-xs uppercase tracking-wider font-mono font-medium px-2.5 py-0.5 rounded-full bg-[#E1F3FE] text-[#1F6C9F]">
+          {badge}
+        </span>
+      </div>
+      <h3 className="font-serif text-2xl tracking-tight text-[#111111] mb-2">{title}</h3>
+      <p className="text-sm text-[#787774] leading-relaxed">{description}</p>
+    </div>
+  );
+}
+```
+
+## Validation Checklist
+
+- [ ] Macro-whitespace established with generous vertical section padding (`py-24` to `py-32`).
+- [ ] No pure black (`#000000`) for text or backgrounds.
+- [ ] Borders use crisp `1px solid #EAEAEA` or `rgba(0,0,0,0.06)`.
+- [ ] No generic AI buzzwords or emojis used in copy.
+- [ ] Typography uses editorial serif headers paired with clean sans-serif body.
+- [ ] Card corners constrained to crisp 8px-12px radius; no pill containers.
+
+## Common Mistakes
+
+- Using heavy saturated primary colors for hero backgrounds.
+- Adding default Tailwind drop-shadows (`shadow-lg`).
+- Cluttering interfaces with emojis instead of clean SVG icons.
+- Using default Inter or Roboto fonts without editorial contrast.
+
+## Integration Notes
+
+- Complements `ui-ux-pro` for color tokens and accessibility.
+- Integrates with `impeccable-design` for QA and anti-pattern enforcement.

package/catalog/skills/minimalist-design/VALIDATION.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rules_followed": {
+      "type": "boolean"
+    }
+  },
+  "required": [
+    "rules_followed"
+  ]
+}

package/catalog/skills/minimalist-design/skill.yaml

@@ -0,0 +1,10 @@
+schemaVersion: 2
+name: minimalist-design
+category: design
+type: instruction-only
+description: Clean editorial-style interfaces with warm monochrome palettes and flat bento grids.
+version: 1.0.0
+resources:
+  - EXAMPLES.md
+  - SKILL.md
+  - VALIDATION.json

package/catalog/skills/nestjs/EXAMPLES.md

@@ -0,0 +1,40 @@
+# nestjs Examples - Anti-patterns vs ContextOS Standard
+
+## Example 1: Input Validation and DTOs
+
+### Anti-pattern: Untyped Body or Manual Validation in Controller
+
+```typescript
+// BAD: No runtime validation, controller stuffed with business rules
+@Post('users')
+async create(@Body() body: any) {
+  if (!body.email || !body.email.includes('@')) {
+    throw new BadRequestException('Invalid email');
+  }
+  return this.usersService.create(body);
+}
+```
+
+### Best practice: ContextOS Standard (Class-Validator DTO + ValidationPipe)
+
+```typescript
+// GOOD: Declarative runtime validation with clean separation
+export class CreateUserDto {
+  @IsEmail({}, { message: 'A valid email is required' })
+  email: string;
+
+  @IsString()
+  @MinLength(8, { message: 'Password must be at least 8 characters long' })
+  password: string;
+}
+
+@Controller('users')
+export class UsersController {
+  constructor(private readonly usersService: UsersService) {}
+
+  @Post()
+  async create(@Body() dto: CreateUserDto) {
+    return this.usersService.create(dto);
+  }
+}
+```

package/catalog/skills/nestjs/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: NestJS
+description: >
+  ContextOS skill for NestJS
+---
+
+# NestJS
+
+## Overview
+
+Enterprise Node.js architecture standard using NestJS, TypeScript, and RxJS. Enforces strict modularity, dependency injection, repository pattern, DTO validation via class-validator, and clean layered architecture.
+
+## When to Use
+
+Activate when building enterprise Node.js microservices, complex REST/GraphQL APIs, or scalable backends requiring strict architectural structure.
+
+## Rules & Patterns
+<!-- Source: nestjs.md -->
+
+## NestJS - Best Practices
+
+## Module Architecture
+
+- **One module per domain** - `UsersModule`, `AuthModule`, `OrdersModule`
+- **Feature modules** - encapsulate related controllers, services, repositories
+- **Shared module** - for cross-cutting concerns (logging, config, utils)
+- **Core module** - singleton services (database, auth guards)
+
+```
+src/
+├── modules/
+│   ├── users/
+│   │   ├── users.module.ts
+│   │   ├── users.controller.ts
+│   │   ├── users.service.ts
+│   │   ├── users.repository.ts
+│   │   ├── dto/
+│   │   │   ├── create-user.dto.ts
+│   │   │   └── update-user.dto.ts
+│   │   ├── entities/
+│   │   │   └── user.entity.ts
+│   │   └── users.spec.ts
+│   └── auth/
+├── shared/
+│   ├── guards/
+│   ├── interceptors/
+│   ├── pipes/
+│   └── filters/
+├── config/
+└── app.module.ts
+```
+
+## Dependency Injection
+
+```typescript
+@Injectable()
+export class UsersService {
+  constructor(
+    @InjectRepository(User) private readonly usersRepo: Repository<User>,
+    private readonly configService: ConfigService,
+  ) {}
+}
+```
+
+- Prefer constructor injection
+- Use custom providers for complex setup
+- Scope: default is Singleton, use REQUEST scope only when needed
+
+## DTOs and Validation
+
+```typescript
+import { IsEmail, IsString, MinLength } from 'class-validator';
+
+export class CreateUserDto {
+  @IsEmail()
+  email: string;
+
+  @IsString()
+  @MinLength(2)
+  name: string;
+}
+```
+
+- Always use DTOs for request validation
+- Use `ValidationPipe` globally
+- Separate Create/Update/Response DTOs
+
+## Guards, Interceptors, Pipes
+
+| Type | Purpose |
+| --- | --- |
+| **Guards** | Authentication, authorization |
+| **Interceptors** | Logging, transformation, caching |
+| **Pipes** | Validation, transformation |
+| **Filters** | Exception handling |
+
+Execution order: Guards → Interceptors → Pipes → Handler → Interceptors → Filters
+
+## Error Handling
+
+```typescript
+@Catch()
+export class AllExceptionsFilter implements ExceptionFilter {
+  catch(exception: unknown, host: ArgumentsHost) {
+    // Transform to standard error format
+  }
+}
+```
+
+## Testing
+
+- **Unit tests** - mock dependencies with `Test.createTestingModule()`
+- **E2E tests** - use `supertest` with a test module
+- **Mock everything** - services should be testable in isolation
+
+## Anti-Patterns
+
+- [FAIL] Business logic in controllers - use services
+- [FAIL] Direct database access in controllers - use repositories
+- [FAIL] Circular dependencies - refactor module structure
+- [FAIL] God modules - split large modules by domain
+- [FAIL] Not using DTOs - always validate input
+
+
+## Code Examples
+
+See `EXAMPLES.md` for detailed code examples.
+
+## Validation Checklist
+
+What to verify during the review phase before completing the task.
+
+## Common Mistakes
+
+Anti-patterns and things to explicitly avoid. See `TROUBLESHOOTING.md`.
+
+## Integration Notes
+
+How this skill interacts with other skills.

package/catalog/skills/nestjs/TROUBLESHOOTING.md

@@ -0,0 +1,19 @@
+# nestjs Troubleshooting & Common Mistakes
+
+## 1. Circular Dependency Between Modules
+
+- **Symptom**: "Nest cannot create the module instance. Often, this is caused by circular dependencies".
+- **Root Cause**: Module A imports Module B, and Module B imports Module A.
+- **Fix**: Use `forwardRef(() => ModuleB)` in imports and `@Inject(forwardRef(() => ServiceB))` in constructors, or refactor shared logic into a separate CommonModule.
+
+## 2. Memory Leaks from REQUEST Scope
+
+- **Symptom**: High memory usage and slow performance under load.
+- **Root Cause**: Providers declared with Scope.REQUEST recreate instances on every HTTP request.
+- **Fix**: Keep services as default Singletons whenever possible. Pass request-scoped parameters directly through method arguments.
+
+## 3. Uncaught Domain Exceptions
+
+- **Symptom**: Custom domain exceptions bypass formatting and return generic 500 errors.
+- **Root Cause**: Missing custom Global Exception Filter.
+- **Fix**: Implement an AllExceptionsFilter implementing ExceptionFilter and bind it globally in main.ts.

package/catalog/skills/nestjs/VALIDATION.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rules_followed": {
+      "type": "boolean"
+    }
+  },
+  "required": [
+    "rules_followed"
+  ]
+}

package/catalog/skills/nestjs/skill.yaml

@@ -0,0 +1,14 @@
+schemaVersion: 2
+id: nestjs
+name: NestJS
+category: backend
+type: instruction-only
+requires: [typescript, node]
+optional: [postgres, redis, docker, graphql]
+conflicts: [fastapi, express]
+weight: 8
+resources:
+  - EXAMPLES.md
+  - SKILL.md
+  - TROUBLESHOOTING.md
+  - VALIDATION.json

package/catalog/skills/nextjs/EXAMPLES.md

@@ -0,0 +1,40 @@
+# nextjs Examples - Anti-patterns vs ContextOS Standard
+
+## Example 1: Server Components vs Client Components
+
+### Anti-pattern: Marking the Entire Page as Client Component
+
+```tsx
+// BAD: app/dashboard/page.tsx with 'use client' at top
+// Bloats client bundle, loses SEO benefits, eliminates direct DB access
+'use client';
+
+export default function DashboardPage() {
+  const [data, setData] = useState(null);
+  useEffect(() => { fetch('/api/dashboard').then(...) }, []);
+  return <div>...</div>;
+}
+```
+
+### Best practice: ContextOS Standard (RSC by Default, Client Leaf Nodes)
+
+```tsx
+// GOOD: Server Component fetches data directly with zero bundle cost
+// app/dashboard/page.tsx (Server Component)
+import { Suspense } from 'react';
+import { db } from '@/lib/db';
+import { InteractiveChart } from './InteractiveChart'; // 'use client' leaf component
+
+export default async function DashboardPage() {
+  const stats = await db.analytics.getStats();
+  return (
+    <main>
+      <h1>Dashboard</h1>
+      <p>Total Revenue: {stats.revenue}</p>
+      <Suspense fallback={<ChartSkeleton />}>
+        <InteractiveChart initialData={stats.chartData} />
+      </Suspense>
+    </main>
+  );
+}
+```

package/catalog/skills/nextjs/SKILL.md

@@ -0,0 +1,163 @@
+---
+name: Next.js
+description: >
+  ContextOS skill for Next.js App Router, Server Components, Server Actions, performance optimization, and Vercel best practices.
+---
+
+# Next.js App Router Best Practices
+
+## Overview
+
+Enforces high-performance architectural patterns for Next.js App Router based on Vercel Engineering guidelines: React Server Components (RSC), zero-waterfall async pipelines, request deduplication via `React.cache()`, bundle optimization, and secure Server Actions.
+
+## When to Use
+
+Activate whenever building, refactoring, or reviewing Next.js pages, layouts, Route Handlers (`app/api`), Server Actions, or components in the `app/` directory.
+
+## Negative Constraints (What NOT to Do)
+
+1. **NEVER use barrel imports for UI libraries**: Avoid `import { Button, Dialog } from '@/components'`. Import directly from the exact file (`import { Button } from '@/components/ui/button'`) to prevent bundler tree-shaking failures and trace bloat.
+2. **NEVER trust client-provided data or session state in Server Actions**: Always authenticate session and authorize tenant ownership inside the Server Action handler itself before mutating data.
+3. **NEVER introduce sequential `await` waterfalls for independent data**: Always use `Promise.all()` or parallel streaming `<Suspense>` boundaries.
+4. **NEVER pass large unneeded serialized data from Server to Client Components**: Only pass the specific primitive fields required by the client component (`server-dedup-props`).
+5. **NEVER use `useEffect` for data fetching**: Fetch directly in Server Components or use TanStack Query / SWR for client-side queries.
+6. **NEVER import server-only modules in client components**: Use the `server-only` package in data access layers to catch accidental client imports at build time.
+
+## Rules & Patterns
+
+### 1. Eliminating Async Waterfalls (Critical)
+
+- **Parallel Fetching**: Fetch independent data concurrently at the top of the route or component.
+- **Granular Streaming**: Wrap slow, non-critical subtrees in `<Suspense fallback={<Skeleton />}>` so critical above-the-fold content streams immediately.
+- **Defer Awaits**: Check cheap synchronous conditions before awaiting remote resources.
+
+### 2. Request Deduplication & Caching (`server-cache-react`)
+
+- Use `React.cache()` to deduplicate identical database or service calls across multiple components rendered in the same server request lifecycle.
+
+```tsx
+import { cache } from 'react';
+import { db } from '@/lib/db';
+
+export const getCurrentUser = cache(async (userId: string) => {
+  return await db.user.findUnique({
+    where: { id: userId },
+    select: { id: true, name: true, role: true, email: true }
+  });
+});
+```
+
+### 3. Secure Server Actions (`server-auth-actions`)
+
+- Treat every Server Action as a public HTTP endpoint. Always validate session, authorization, and input schema with Zod.
+
+```tsx
+'use server';
+
+import { z } from 'zod';
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { revalidatePath } from 'next/cache';
+
+const UpdateProfileSchema = z.object({
+  name: z.string().min(2).max(50),
+});
+
+export async function updateProfile(formData: FormData) {
+  const session = await auth();
+  if (!session?.userId) throw new Error('Unauthorized');
+
+  const result = UpdateProfileSchema.safeParse({ name: formData.get('name') });
+  if (!result.success) return { error: 'Invalid input', issues: result.error.flatten() };
+
+  await db.user.update({
+    where: { id: session.userId },
+    data: { name: result.data.name },
+  });
+
+  revalidatePath('/settings');
+  return { success: true };
+}
+```
+
+### 4. Bundle Optimization & Dynamic Imports (`bundle-dynamic-imports`)
+
+- Heavy interactive client components (charts, rich-text editors, video players) must be dynamically loaded with `next/dynamic`.
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const AnalyticsChart = dynamic(
+  () => import('@/components/analytics/chart').then(mod => mod.AnalyticsChart),
+  {
+    loading: () => <div className="h-64 animate-pulse bg-muted rounded-lg" />,
+    ssr: false,
+  }
+);
+```
+
+### 5. Next.js 15+ Async Request APIs (`async-params`)
+
+In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous and must be awaited:
+
+```tsx
+// [GOOD] Next.js 15+ Page Component
+interface PageProps {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function UserPage({ params, searchParams }: PageProps) {
+  const { id } = await params;
+  const { tab } = await searchParams;
+  const user = await getUser(id);
+
+  return <UserProfile user={user} activeTab={tab as string} />;
+}
+```
+
+### 6. Non-Blocking Background Tasks with `after()`
+
+To execute logging, analytics, or cache priming without delaying the user's HTTP response:
+
+```typescript
+import { after } from 'next/server';
+
+export async function POST(request: Request) {
+  const data = await request.json();
+  const result = await processOrder(data);
+
+  // Executes asynchronously AFTER the response stream has completed
+  after(async () => {
+    await sendSlackNotification(result);
+    await indexOrderInSearch(result.id);
+  });
+
+  return Response.json({ success: true, orderId: result.id });
+}
+```
+
+---
+
+## Code Examples
+
+See `EXAMPLES.md` for detailed code examples and component templates.
+
+## Validation Checklist
+
+- [ ] All database queries in RSC layers use `React.cache()` if called across multiple components.
+- [ ] No barrel imports (`from '@/components'`); all imports point to exact component modules.
+- [ ] Server Actions have explicit auth checks and Zod input validation.
+- [ ] Heavy client widgets (charts, editors) use `next/dynamic`.
+- [ ] Images use `next/image` with explicit `sizes` and `priority` on LCP elements.
+
+## Common Mistakes
+
+- Using `'use client'` at page level instead of leaf components.
+- Relying on client-side authentication checks for Server Actions without server-side validation.
+- Chaining sequential awaits for independent data models.
+
+## Integration Notes
+
+- Pairs with `react` and `ui-ux-pro` for component design and state management.
+- Pairs with `security` for session authorization and input sanitization.

package/catalog/skills/nextjs/TROUBLESHOOTING.md

@@ -0,0 +1,19 @@
+# nextjs Troubleshooting & Common Mistakes
+
+## 1. Hydration Mismatch Errors
+
+- **Symptom**: "Text content does not match server-rendered HTML".
+- **Root Cause**: Rendering dates, window dimensions, or local storage data that differs between server render and client hydration.
+- **Fix**: Use suppressHydrationWarning on localized timestamps or load client-only state inside a useEffect after mount.
+
+## 2. Accidental Server Code Bundled to Client
+
+- **Symptom**: "Module not found: Can't resolve 'fs' or 'pg' in client bundle".
+- **Root Cause**: Client component importing a utility that transitively imports server-only database code.
+- **Fix**: Separate server utilities into *.server.ts and install import 'server-only'; at the top of server files.
+
+## 3. Waterfall Fetches in Server Components
+
+- **Symptom**: Page takes 3 seconds to load due to sequential await statements.
+- **Root Cause**: Awaiting independent data sources one after another.
+- **Fix**: Use Promise.all([fetchUsers(), fetchProducts()]) or separate into nested <Suspense> boundaries.

package/catalog/skills/nextjs/VALIDATION.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rules_followed": {
+      "type": "boolean"
+    }
+  },
+  "required": [
+    "rules_followed"
+  ]
+}

package/catalog/skills/nextjs/skill.yaml

@@ -0,0 +1,14 @@
+schemaVersion: 2
+id: nextjs
+name: Next.js
+category: frontend
+type: instruction-only
+requires: [react, typescript]
+optional: [tailwind, prisma, next-auth, react-query]
+conflicts: [vue, angular, remix]
+weight: 9
+resources:
+  - EXAMPLES.md
+  - SKILL.md
+  - TROUBLESHOOTING.md
+  - VALIDATION.json