product-factory/performance
Apply this skill when building, optimising, or reviewing components, data fetching, or database queries in a Next.js App Router + TypeScript + Tailwind + shadcn + Drizzle application where performance matters. Triggers on requests like "optimise this", "this is slow", "reduce re-renders", "improve load time", "this list is laggy", "bundle is too large", "slow query", or any time you are building features that involve large lists, frequent updates, heavy computations, or significant data volumes. Use proactively for anything rendering more than ~50 items or running on every keystroke.
87
Quality
87%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description with excellent trigger term coverage and clear when/what guidance. The main weakness is that the capabilities described are somewhat general ('building, optimising, or reviewing') rather than listing specific optimization techniques. The tech stack specificity and performance focus create good distinctiveness.
Suggestions
Add specific concrete actions like 'implement React.memo, useMemo, useCallback', 'add virtual scrolling for large lists', 'optimize Drizzle queries with indexes and pagination' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Next.js App Router + TypeScript + Tailwind + shadcn + Drizzle) and mentions actions like 'building, optimising, or reviewing components, data fetching, or database queries', but doesn't list specific concrete actions like 'memoize components', 'implement virtual scrolling', or 'add database indexes'. | 2 / 3 |
Completeness | Clearly answers both what (performance optimization for Next.js stack with components, data fetching, database queries) and when (explicit triggers like 'Apply this skill when...', specific phrases, and proactive guidance for >50 items or keystroke-driven features). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would actually say: 'optimise this', 'this is slow', 'reduce re-renders', 'improve load time', 'this list is laggy', 'bundle is too large', 'slow query'. These are realistic phrases users would use when experiencing performance issues. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a specific tech stack (Next.js App Router + TypeScript + Tailwind + shadcn + Drizzle) combined with a clear focus on performance optimization. The combination of stack specificity and performance focus creates a clear niche unlikely to conflict with general coding or other framework skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
79%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality, actionable performance skill with excellent code examples covering the full stack (React, Next.js, TanStack Query, Drizzle). The content respects Claude's intelligence and provides concrete, executable patterns. Main weaknesses are the lack of explicit measure-fix-verify workflows and the monolithic structure that could benefit from splitting advanced topics into separate files.
Suggestions
Add explicit verification steps after each optimisation technique (e.g., 'After adding virtualisation, re-run React DevTools Profiler to confirm render count dropped')
Split advanced sections (TanStack Query Performance, Drizzle Query Performance, Large List Rendering) into separate reference files linked from a shorter overview
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, assuming Claude's competence with React/Next.js concepts. Every section provides actionable code without explaining what React, memoisation, or databases are. The golden rule about measuring before optimising is valuable context, not padding. | 3 / 3 |
Actionability | Every technique includes complete, executable code examples with proper TypeScript typing. The virtualisation example, Drizzle queries, TanStack Query patterns, and dynamic imports are all copy-paste ready with real-world patterns. | 3 / 3 |
Workflow Clarity | While individual techniques are clear, the skill lacks explicit validation checkpoints. For performance optimisation, there should be clearer feedback loops like 'profile → identify bottleneck → apply fix → re-profile to verify improvement'. The golden rule mentions measuring but doesn't integrate verification into the workflow. | 2 / 3 |
Progressive Disclosure | The content is well-structured with clear sections and headers, but at ~300 lines it's quite long for a single file. Advanced topics like optimistic updates, prepared statements, and virtualisation could be split into separate reference files with links from a more concise overview. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Install with Tessl CLI
npx tessl i product-factory/performanceReviewed
Table of Contents