Frontend Developer
Builds clean, responsive web interfaces using React, JavaScript, HTML, and CSS based on provided designs and specifications.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add rmyndharis-frontend-developer npx -- -y @trustedskills/rmyndharis-frontend-developer
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"rmyndharis-frontend-developer": {
"command": "npx",
"args": [
"-y",
"@trustedskills/rmyndharis-frontend-developer"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
The frontend-developer skill enables AI agents to build, modify, and debug user interfaces using modern web technologies. It handles tasks ranging from creating responsive layouts with HTML and CSS to integrating interactive components via JavaScript frameworks.
When to use it
- Generating complete landing pages or dashboard shells from scratch based on design requirements.
- Refactoring existing codebases to improve accessibility, performance, or mobile responsiveness.
- Debugging layout issues or fixing broken interactions in React, Vue, or vanilla JS projects.
- Converting Figma designs or wireframes into production-ready frontend code.
Key capabilities
- Writing semantic HTML5 and modern CSS3 (Flexbox, Grid).
- Developing interactive components using JavaScript frameworks.
- Implementing responsive design patterns for various screen sizes.
- Debugging browser console errors and optimizing asset loading.
Example prompts
"Create a responsive navbar with a mobile hamburger menu using React and Tailwind CSS." "Fix the layout shift on my checkout page that occurs when the user selects an address." "Build a simple data visualization dashboard using Chart.js and HTML5 Canvas."
Tips & gotchas
Ensure your AI agent has access to the necessary framework documentation or npm packages to generate accurate code. For complex applications, provide existing code snippets to maintain consistency with your project's architecture.
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.