Skills frontend-fundamentals
🔍

frontend-fundamentals

Safe 🌐 Network access📁 Filesystem access⚙️ External commands

Review Frontend Code Automatically

Frontend code reviews often miss architectural issues and anti-patterns. This skill automatically applies proven frontend standards to catch component design flaws, state management mistakes, and performance issues before they reach production.

Supports: Claude Codex Code(CC)
📊 71 Adequate
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "frontend-fundamentals". Review this React component for architectural issues

Expected outcome:

  • Component exceeds 200 lines - consider splitting into smaller components
  • Found 8 props - try to reduce to under 7 for better maintainability
  • State management looks good - properly colocated with useState
  • Performance: Add useMemo for the filtered users calculation
  • Accessibility: Button needs aria-label for screen readers

Using "frontend-fundamentals". Check this Vue component for performance problems

Expected outcome:

  • Computed property is recalculating on every render - use memoization
  • v-for without key could cause unnecessary re-renders
  • Good use of compositional API for logic separation
  • Consider lazy loading this component with defineAsyncComponent

Using "frontend-fundamentals". Analyze this component for accessibility compliance

Expected outcome:

  • Missing alt text on all images - add descriptive alternatives
  • Form inputs need associated labels for screen readers
  • Color contrast ratio is insufficient - darken the text color
  • Interactive elements missing keyboard focus styles

Security Audit

Safe
v5 • 1/16/2026

This skill is a pure documentation/metadata skill with no executable code. All 23 static findings are FALSE POSITIVES caused by the static analyzer misinterpreting markdown syntax, file paths, and documentation content as security threats. The files contain only frontend code review guidelines, metadata JSON, and example code snippets - no actual network calls, command execution, or cryptographic operations exist.

2
Files scanned
296
Lines analyzed
3
findings
5
Total audits

Risk Factors

🌐 Network access (2)
skill-report.json:155 skill-report.json:6
📁 Filesystem access (1)
skill-report.json:6
⚙️ External commands (8)
SKILL.md:55-64 SKILL.md:64-67 SKILL.md:67-72 SKILL.md:72-75 SKILL.md:75-82 SKILL.md:82-85 SKILL.md:85-89 SKILL.md:89-108
Audited by: claude View Audit History →

Quality Score

38
Architecture
100
Maintainability
87
Content
31
Community
100
Security
91
Spec Compliance

What You Can Build

Mentor Junior Developers

Automatically catch architectural mistakes in junior developers' code and provide educational feedback with specific examples.

Standardize Code Reviews

Ensure consistent code review standards across your team with automated checks for component architecture best practices.

Review Community Contributions

Quickly assess pull requests for frontend architectural issues and provide actionable feedback to contributors.

Try These Prompts

Review Component 
Please review this React component for architectural issues, performance problems, and accessibility concerns. Focus on component size, prop count, state management, and whether it follows single responsibility principle.
Check State Management 
Analyze this code for state management anti-patterns. Check if state is properly colocated, if prop drilling exists, and whether server state is handled correctly.
Performance Audit 
Review this frontend code for performance bottlenecks. Look for unnecessary re-renders, missing memoization, and opportunities for code splitting.
Accessibility Review 
Check this component for accessibility issues. Verify semantic HTML usage, ARIA attributes, and keyboard navigation support.

Best Practices

  • Apply the single responsibility principle - each component should do one thing well
  • Keep components under 200 lines and props under 7 for maintainability
  • Colocate state as close as possible to where it's actually used

Avoid

  • Creating god components that handle data fetching, state, and UI rendering
  • Prop drilling through more than 3 levels of components
  • Putting expensive calculations directly in render without memoization

Frequently Asked Questions

Which frontend frameworks does this support?
Works with React, Vue, Svelte, and other component-based frameworks. Focuses on universal patterns applicable to all.
What are the size limits for components?
Recommends keeping components under 200 lines and using fewer than 7 props for optimal maintainability.
How does this integrate with my development workflow?
Automatically activates when reviewing frontend code in Claude Code, providing instant feedback during code reviews.
Is my code data safe during review?
Yes, this is a documentation-only skill that does not execute code or make network requests. Your code stays local.
What if the skill flags something that is actually correct?
These are guidelines, not rules. Use your judgment - the skill helps identify potential issues for your consideration.
How does this compare to linters like ESLint?
This focuses on architectural patterns and design principles, while linters catch syntax and style issues. They complement each other.

Developer Details

License

MIT

Repository

https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/frontend

Ref

main

File structure

📄 SKILL.md