๐Ÿงช
QualityJavaScript

Frontend AI Guide

by shinpr

Frontend AI Guide is a Quality skill for Claude Code, published by shinpr in claude-code-workflows.

669 stars102 forkson shinpr/claude-code-workflowsAdded 2026/08/24Repository updated 2026/08/23
agent-skillsagentic-aiagentic-codingai-agentsanthropicclaude-codeclaude-code-pluginclaude-code-skillcode-qualitycode-reviewdeveloper-toolsdevelopment-workflowllm-orchestrationproductivitysubagents
Install in seconds
Install Frontend AI Guide
Copy Frontend AI Guide into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/shinpr/claude-code-workflows/tree/main/skills/frontend-ai-guide ~/.claude/skills/frontend-ai-guide

Requires Node.js. Downloads this skill only โ€” not the rest of the repository โ€” into your Claude Code skills folder.

Without Node.js

git clone https://github.com/shinpr/claude-code-workflows.git

Clones the whole repository, then copy the skillโ€™s own directory into your skills folder yourself.

In this catalog

Source file
skills/frontend-ai-guide/SKILL.md in shinpr/claude-code-workflows
Installs to
~/.claude/skills/frontend-ai-guide
Collection
One of 25 skills cataloged from this repository
Category
Quality โ€” 1354 skills

What Frontend AI Guide does

Frontend AI Guide applies React and TypeScript review criteria to component, hook, and browser-behavior changes. Use it to check implementation completeness, anti-patterns, and frontend quality gates.

Frontend AI Guide is cataloged under Quality on DirSkills. Frontend AI Guide comes from a repository tagged agent-skills, agentic-ai, agentic-coding, ai-agents and anthropic.

Frequently asked about Frontend AI Guide

  • What else does shinpr publish alongside Frontend AI Guide?

    Frontend AI Guide is one of 25 skills that DirSkills catalogs from shinpr/claude-code-workflows, the repository it ships in. Its siblings there include AI Developer Guide, Coding Principles and Documentation Criteria. Each one is a separate skill with its own page in this directory, installs the same way Frontend AI Guide does, and is maintained by shinpr in that same repository. The rest of the collection is listed on the shinpr/claude-code-workflows page.

  • How does Frontend AI Guide compare to other Quality skills?

    Frontend AI Guide ranks #1086 by stars among the 1354 Quality skills in this catalog. The most-starred ones next to it are Benchmark, Benchmark Optimization Loop and API Design Patterns. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend AI Guide against them. Open each page to compare what they document and how they install.

More from shinpr/claude-code-workflows

Frontend AI Guide is one of 25 skills cataloged on DirSkills from shinpr/claude-code-workflows.

See all 25 skills โ†’
๐Ÿงช
1w ago

AI Developer Guide

AI Developer Guide applies decision criteria, anti-pattern detection, debugging, and quality gates for backend or language-agnostic implementation reviews. Use it to assess code smells, failures, completeness, and fallback behavior.
Quality
669102
๐Ÿงฉ
1w ago

Coding Principles

Coding Principles provides language-agnostic guidance for writing maintainable, readable, and well-structured code. Use it when implementing features, refactoring, or reviewing code quality.
Quality
669102
๐Ÿ“„
1w ago

Documentation Criteria

Documentation Criteria determines whether a change needs a PRD, ADR, UI Spec, Design Doc, or Work Plan, and where each belongs. Use it when planning or reviewing technical documentation scope.
Writing
669102
๐Ÿ”—
1w ago

External Resource Context

External Resource Context records where external resources live and how to reach them for design, implementation, and verification. Use it when work depends on a design source, API schema, IaC source, secret store, or other canonical external system.
AI Engineering
669102
๐ŸŽจ
1w ago

Front Adjust

Front Adjust adjusts an existing UI in session and verifies the changes against the design source. Use it for targeted frontend updates that need iterative edit-check-refine review.
Frontend
669102
๐Ÿงช
1w ago

Front Review

Front Review validates React and TypeScript frontend changes against a Design Doc and security requirements. Use it after implementation to review compliance, resolve findings, and apply optional fixes.
Quality
669102