Skip to content
UXClaim
Design Ops

FE Claude Skills

Claude Code skills for Angular frontend development: real-time coding standards enforcement and automated 6-agent PR review with WCAG 2.2 AA compliance.

View source More in Design Ops

What It Does

FE Claude Skills provides two complementary Claude Code abilities for Angular 20+ projects: dev-guard enforces coding standards during development, and review-prs runs automated 6-agent parallel PR review that posts approval or change requests directly to GitHub.

How It Works

dev-guard loads your team’s standards into Claude’s context at every conversation start via .agent-instructions/. Claude writes code following these rules before you create a PR, preventing issues early.

review-prs triggers on PR creation and launches six specialized agents to review Angular patterns, TypeScript quality, WCAG 2.2 AA accessibility, memory leaks, architecture, test coverage, and regression risk. Results post as GitHub comments with approve or request-changes verdicts.

Use Cases

  • Enforce consistent Angular patterns and TypeScript practices across teams
  • Catch accessibility issues automatically before they reach QA
  • Reduce PR review burden by filtering for architecture and logic concerns
  • Onboard developers faster with built-in standards enforcement
  • Prevent regressions through automated pattern detection

Who Benefits

Angular teams using Claude Code in their development workflow. Engineering managers reducing code review overhead. Design systems teams auditing component code for accessibility compliance.

Frequently asked questions

How do I install FE Claude Skills?
Run `gh api repos/praveen-degreed/fe-claude-skills/contents/install-all.sh --jq '.content' | base64 -d | bash` to install both dev-guard and review-prs. Individual skills can be installed separately using their own install.sh scripts. Installation is idempotent—re-run anytime to update.
What's the difference between dev-guard and review-prs?
dev-guard loads coding standards into Claude at conversation start so you write compliant code during development. review-prs runs after PR creation, launching six agents to audit the final code for Angular patterns, accessibility, memory leaks, architecture, test quality, and regression risk.
How does dev-guard prevent issues?
dev-guard creates a local-only `.claude/CLAUDE.local.md` file that Claude reads before writing any code. This file points to `.agent-instructions/fe-dev-guard.md` containing your team's standards. Claude follows these rules from the start, preventing violations before they enter your PR.
Can review-prs work with teams not using Claude Code?
review-prs requires Claude Code's multi-agent parallel execution features. However, other agents can follow the workflow phases and agent prompts documented in the skill's references—you'd need to trigger reviews manually instead of automatically on PR creation.
What accessibility standard does this enforce?
FE Claude Skills enforces WCAG 2.2 AA compliance. One of the six PR review agents specializes in accessibility audits, checking for common violations in Angular components and catching issues before they reach QA.
Is dev-guard installed to my GitHub repo?
No. dev-guard installs to `.claude/CLAUDE.local.md`—a local-only file on your machine that Claude Code reads but is never committed to git. Your shared `CLAUDE.md` stays unchanged. Each developer runs install once to get local enforcement.
How are the six PR review agents specialized?
Each agent focuses on one area: Angular patterns and TypeScript quality, WCAG 2.2 AA accessibility, memory leaks and performance, architecture and dependencies, test coverage and quality, and regression risk. Agents run in parallel and post their findings as a single GitHub comment.
Can I customize the coding standards?
Yes. Edit `.agent-instructions/fe-dev-guard.md` to adjust dev-guard rules, and update `.claude/skills/review-prs/references/` files to customize review-prs agent prompts, decision rules, and patterns for your codebase.

Glossary

dev-guard
Claude Code skill that loads your team's coding standards into Claude's context at conversation start, enabling him to write compliant code during development before PR creation.
review-prs
Claude Code skill that automatically launches six specialized agents when a PR is created, auditing Angular patterns, accessibility, performance, architecture, tests, and regression risk, then posting verdicts to GitHub.
WCAG 2.2 AA
Web Content Accessibility Guidelines Level AA—international standard for web accessibility covering color contrast, keyboard navigation, screen reader compatibility, and other requirements for people with disabilities.
Agent Skills
Open format for portable Claude abilities defined in SKILL.md with YAML frontmatter, allowing skills to be shared across different Claude Code projects and teams.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.