Skills

Frontend AI Guide

Applies React/TypeScript-specific technical decision criteria, anti-pattern detection...

Install

npx skills add shinpr/claude-code-workflows --skill frontend-ai-guide -g -a claude-code -y
Category
Design
Updated
7d ago
License
MIT
Context cost
Mediumabout 2,864 tokens
Runs scripts
No, instructions only

What it does

Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.

AI Developer Guide - Technical Decision Criteria and Anti-pattern Collection (Frontend)

Value-First Engineering

Inspect until the evidence identifies the lowest-total-complexity solution that delivers the required user or maintainer value while keeping the UI correct and maintainable.

  • Resolve verified problems within confirmed scope or dependencies required for the outcome; report other findings with their owning boundary and evidence without expanding the active change.
  • Introduce state, props, variants, abstractions, or speculative edge-case handling when a current outcome, verified constraint, or evidence-backed material risk requires them.
  • Treat behavior-preserving maintenance inside the confirmed responsibility as current maintainer value when repository evidence shows it reduces change ambiguity, duplicate ownership, defect risk, or future implementation and verification cost without expanding observable product scope.

Judge total complexity across every activated user decision, prop, state, variant, concept, output, persistent state, and component or hook path, together with its UX, runtime, implementation, testing, documentation, and maintenance cost. Compare only dimensions that differ between viable approaches. Prefer reuse or no new mechanism when it delivers the same confirmed value and proof at lower total complexity.

Technical Anti-patterns (Red Flag Patterns)

Pause the affected decision and review the design when detecting the following patterns:

Read the whole SKILL.md on GitHub

More in Design