Apply this skill when writing, reviewing, or refactoring any code in a React + TypeScript + Tailwind + shadcn + Drizzle project. Triggers on requests like "review this code", "refactor this component", "is this good practice", "write a hook for", "clean this up", "add types to", "write a form", or any time you are producing code that should meet production standards. Use proactively — all generated code should conform to these standards without being asked.
87
Quality
87%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Discovery
82%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 description excels at providing explicit trigger terms and clear guidance on when to apply the skill, including proactive use. However, it focuses more on when to use the skill than what specific capabilities it provides beyond general code quality standards. The tech stack specificity helps differentiate it, but the action triggers are generic enough to potentially conflict with other coding skills.
Suggestions
Add specific concrete actions the skill enables, such as 'Implements shadcn components, configures Drizzle schemas, creates typed React hooks' to improve specificity.
Consider adding stack-specific trigger terms like 'shadcn button', 'drizzle migration', 'tailwind styling' to reduce conflict with generic code review skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (React + TypeScript + Tailwind + shadcn + Drizzle) and mentions actions like 'writing, reviewing, or refactoring code', but doesn't list specific concrete capabilities like 'create components', 'implement hooks', 'configure Drizzle schemas'. | 2 / 3 |
Completeness | Clearly answers both what (writing/reviewing/refactoring code in a specific tech stack to production standards) and when (explicit trigger phrases plus proactive application). The 'Use proactively' clause adds helpful guidance. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger phrases users would say: 'review this code', 'refactor this component', 'is this good practice', 'write a hook for', 'clean this up', 'add types to', 'write a form'. These are realistic user requests. | 3 / 3 |
Distinctiveness Conflict Risk | The specific tech stack (React + TypeScript + Tailwind + shadcn + Drizzle) provides some distinctiveness, but generic triggers like 'review this code' or 'clean this up' could conflict with other code review or general coding skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
87%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is an excellent code standards skill—highly actionable with concrete, executable examples throughout. It efficiently covers a comprehensive stack without verbosity, using the ✅/❌ pattern effectively to contrast good and bad practices. The only gap is the lack of an explicit workflow for systematically applying these standards during code review or refactoring tasks.
Suggestions
Consider adding a brief 'Code Review Checklist' section at the top or bottom that sequences how to systematically apply these standards when reviewing code (e.g., '1. Check for any usage → 2. Verify form patterns → 3. Check useEffect usage').
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. Every section provides concrete code examples without explaining concepts Claude already knows. No padding or unnecessary context—just actionable patterns and anti-patterns. | 3 / 3 |
Actionability | Fully executable, copy-paste ready code throughout. Each pattern shows both the correct approach (✅) and the anti-pattern (❌) with real TypeScript/React code, not pseudocode. | 3 / 3 |
Workflow Clarity | This is a standards/patterns reference rather than a multi-step workflow skill. While individual patterns are clear, there's no explicit validation sequence for applying these standards during code review or refactoring—no checklist or ordered process for systematic application. | 2 / 3 |
Progressive Disclosure | Well-organized with clear section headers (TypeScript, React, Forms, Tailwind, Drizzle, etc.). Content is appropriately structured for a single reference file. No unnecessary nesting or external file chains. | 3 / 3 |
Total | 11 / 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/code-qualityReviewed
Table of Contents