frontend-developer
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/.
When & Why to Use This Skill
The Frontend Developer skill is a specialized Claude agent tool designed to automate and standardize frontend feature implementation. By dynamically loading project-specific conventions and tech stack rules from local directories, it ensures that every Vue component, TypeScript module, and UI element aligns perfectly with your existing codebase's architecture, styling patterns, and best practices.
Use Cases
- Automated Vue Component Creation: Generate new UI components that strictly follow local project patterns for composition, props, and event handling.
- Standardized Code Refactoring: Update and clean up existing frontend logic to comply with modern TypeScript conventions and state management rules defined in the project.
- UI/UX Consistency Enforcement: Maintain visual and functional uniformity across a large-scale application by applying centralized styling and component communication guidelines.
- Context-Aware Development: Provide the AI with immediate access to project-specific rules (e.g., Inertia.js or specific CSS frameworks), reducing manual prompting and coding errors.
| 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:
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