frontend-ai-guide
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.
npx skills add shinpr/claude-code-workflows --skill frontend-ai-guide --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# AI Developer Guide - Technical Decision Criteria and Anti-pattern Collection (Frontend) ## Value-First Engineering Explore broadly, then converge on the lowest-lifecycle-cost solution that delivers the required user value while keeping the UI correct and maintainable. - Resolve verified problems within confirmed scope or dependencies required for the outcome; report other findings with evidence for a scope decision. - Introduce state, props, variants, abstractions, or speculative edge-case handling when a current outcome, verified constraint, or evidence-backed material risk requires them. ## Technical Anti-patterns (Red Flag Patterns) Pause the affected decision and review the design when detecting the following patterns: ### Code Quality Anti-patterns 1. **Writing similar code 3 or more times** - Violates Rule of Three 2. **Multiple responsibilities mixed in a single component** - Violates Single Responsibility Principle (SRP) 3. **Defining same content in multiple components** - Violates DRY principle 4. **Making changes without checking dependencies** - Potential for unexpected impacts 5. **Disabling code with comments** - Should use version control 6. **Error suppression** -
- Value-First Engineering
- Technical Anti-patterns (Red Flag Patterns)
- Code Quality Anti-patterns
- Design Anti-patterns
- Fallback Design Principles
- Core Principle: Fail-Fast
- Criteria for Fallback Implementation
- Detection of Excessive Fallbacks
- Rule of Three - Criteria for Code Duplication
- Criteria for Commonalization
- Implementation Example
- Common Failure Patterns and Avoidance Methods
- Pattern 1: Error Fix Chain
- Pattern 2: Abandoning Type Safety
Grep -n "ComponentName\|hookName" -o content Grep -n "importedFunction" -o content Grep -n "propsType\|StateType" -o content
What does the frontend-ai-guide skill do?
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.
How do I install it?
Run `npx skills add shinpr/claude-code-workflows --skill frontend-ai-guide --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From shinpr/claude-code-workflows, a repository with 664 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.