56 lines
1.6 KiB
Markdown
56 lines
1.6 KiB
Markdown
---
|
|
name: frontend-developer
|
|
description: Skill for implementing frontend features following project conventions. Use when writing Vue components, creating UI, or refactoring frontend code. Loads all frontend rules from .claude/rules/frontend/.
|
|
---
|
|
|
|
# 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:
|
|
|
|
1. Use Glob to find all files: `.claude/rules/frontend/*.md`
|
|
2. Read each file to load conventions
|
|
|
|
These rules contain all patterns, conventions, and best practices for:
|
|
- Vue component structure
|
|
- TypeScript usage
|
|
- Component composition patterns
|
|
- Styling conventions
|
|
- State management
|
|
- 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
|