Frontend Developer Skill

Use this skill when working with frontend code to ensure project conventions are followed.

Loading Conventions

CRITICAL: Before implementing any frontend features, read ALL frontend rules:

Step 1 - Techstack rules (required):

• Use Glob to find all files: .claude/rules/frontend/*.md

• Read each file to load conventions

Step 2 - Project-specific rules (if exists):

• Check if .claude/project-rules/frontend/ directory exists

• If yes, use Glob to find all files: .claude/project-rules/frontend/*.md

• Read each file to load project-specific patterns

These rules contain all patterns, conventions, and best practices for:

• Vue component structure

• TypeScript usage

• Component composition patterns

• Styling conventions

• State management

• Project-specific patterns (component examples, etc.)

• And more...

When to Use This Skill

Activate this skill when:

• Implementing frontend features or UI components

• Refactoring frontend code

• You need to verify frontend patterns

• User asks to "follow frontend conventions"

• You're in a different role but need frontend context temporarily

What This Skill Provides

After loading the rules, you have complete context for:

• How to structure Vue components

• Which patterns to use (and avoid)

• TypeScript conventions

• Inertia.js patterns (if used)

• Component communication patterns

• Styling approaches

Key Principle

Rules are the source of truth. This skill simply loads them and provides context on when to apply them.

The rules define:

• WHAT the patterns are

• HOW to implement them

• WHAT to avoid

This skill provides:

• WHEN to use which patterns

• Context for applying rules in your current task