Frontend Dev
Automates frontend development workflows within Docker containers, streamlining builds, testing, and deployments for React/Vue/Angular projects.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add doccker-frontend-dev npx -- -y @trustedskills/doccker-frontend-dev
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"doccker-frontend-dev": {
"command": "npx",
"args": [
"-y",
"@trustedskills/doccker-frontend-dev"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill automates frontend development workflows within Docker containers, specifically tailored for React/Vue/Angular projects. It enforces a strict set of coding standards and UI style guidelines based on Vue official style guides and Element Plus best practices. The skill promotes consistent code quality by providing templates and conventions for component structure, state management (Pinia or Zustand), routing (Vue Router or React Router), and TypeScript usage.
When to use it
- When building new backend administration systems requiring a standardized UI.
- To ensure frontend projects adhere to specific design constraints (e.g., avoiding neon gradients, AI-style aesthetics).
- For teams wanting to enforce consistent coding practices across multiple Vue or React projects.
- When needing a starting point for developing user interfaces with Element Plus or Ant Design component libraries.
Key capabilities
- Enforces UI style constraints (e.g., prohibiting certain color schemes and visual effects).
- Provides templates for Vue components using
<script setup lang="ts">. - Defines naming conventions for components, composables, and stores.
- Supports both Vue (preferred) and React (alternative) frameworks.
- Includes example implementations of state management with Pinia (Vue) and Zustand (React).
- Provides guidelines for handling loading, error, and empty states in UI elements.
Example prompts
- "Create a new Vue component named
UserCardthat displays user information." - "Generate a basic React component structure using TypeScript and the recommended routing library."
- "Show me an example of how to implement a Pinia store for managing user authentication."
Tips & gotchas
- This skill is primarily focused on enforcing coding standards and providing templates, not generating complete applications.
- The skill favors Vue development but also supports React projects.
- Familiarity with Vue/React component structure and TypeScript will be helpful to effectively use the generated code.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.