Frontend Design
Helps with frontend development, design as part of building frontend UIs and user experiences workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add s-hiraoku-frontend-design npx -- -y @trustedskills/s-hiraoku-frontend-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"s-hiraoku-frontend-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/s-hiraoku-frontend-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill assists with frontend design, focusing on creating interfaces that have intentional aesthetics and a professional execution – avoiding generic or template-like looks. It guides the AI agent through a structured design process, emphasizing thoughtful typography, color system architecture using CSS custom properties, and appropriate use of motion and animation. The goal is to produce high-quality user experiences with a distinct visual personality.
When to use it
- When designing new frontend UIs where a unique aesthetic is desired.
- To refine existing designs that feel generic or lack visual impact.
- For projects requiring careful attention to typography, color palettes, and accessibility (WCAG).
- When needing help establishing a consistent design system based on CSS custom properties.
- To ensure motion and animation are implemented responsibly, respecting user preferences for reduced motion.
Key capabilities
- Design Process Guidance: Provides questions to consider before coding, covering purpose, tone, constraints, and signature elements.
- Typography Expertise: Offers advice on font selection (avoiding defaults) and typographic details like tabular numbers, balanced headings, and proper ellipsis characters.
- Color System Architecture: Guides the creation of CSS custom property-based themes with semantic naming conventions and dark mode support.
- Motion & Animation Rules: Provides guidelines for responsible animation implementation, respecting user preferences and optimizing performance.
- Text Overflow Handling: Includes code snippets for single-line truncation, multi-line clamping, and flex child management.
Example prompts
- "Design a landing page with a retro-futuristic aesthetic."
- "Help me choose fonts that reflect a luxury brand identity."
- "Generate CSS custom properties for a dark mode theme based on these colors: [list of colors]."
- “Show me how to truncate text in a single line using CSS.”
Tips & gotchas
- The skill emphasizes committing to a design direction, even if it has flaws – timid designs are discouraged.
- It's crucial to consider accessibility requirements (WCAG) when designing and implementing color palettes and typography.
- The skill focuses on frontend UI design; it is not intended for broader development tasks.
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.