skills.rest
mitsuhiko
mitsuhikoCOMMUNITY
Explore all skills by this author →
Website𝕏@mitsuhikoGitHub

frontend-design

Translates design briefs into frontend interfaces using HTML/CSS/JS, React, or Vue with reusable design systems.

2.8k|212|Updated Nov 2, 2025
Search Tags:#design#accessibility#React#frontend#UI#CSS#responsive
One-click install
npx skills add https://github.com/mitsuhiko/agent-stuff --skill frontend-design-mitsuhiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mitsuhiko/agent-stuff/tree/main/skills/frontend-design
Command: npx skills add https://github.com/mitsuhiko/agent-stuff --skill frontend-design-mitsuhiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill translates design concepts into production-ready frontend implementations, bridging the gap between design thinking and executable UI.

Core Features & Use Cases

  • Cohesive aesthetic direction: defines and applies a single, bold visual style across pages and components.
  • Working, accessible code: delivers HTML/CSS/JS or framework-based components that run out of the box with responsive behavior and proper semantics.
  • Design-to-code workflow: converts briefs into high-fidelity interfaces using a defined design system, typography, color tokens, and layout strategies.
  • Deliverables ready for production: provides files and component boundaries that can be integrated into a project with minimal setup.

Quick Start

Provide a design brief and constraints, then request a complete frontend implementation that follows the defined aesthetic direction.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate a design brief into production-ready frontend code?▼

To translate a design brief into production-ready frontend code, provide your design concepts and constraints to receive executable UI implementations with cohesive aesthetics, accessible semantics, and responsive layouts.

Can I generate React components with a reusable design system from a UI concept?▼

Yes, you can generate React components with a reusable design system from a UI concept. The process outputs framework-based components utilizing CSS variables and modern frontend practices for immediate integration.

What is the best way to build a responsive web dashboard with accessible HTML and CSS?▼

The best way to build a responsive web dashboard with accessible HTML and CSS involves applying a defined design system with typography and color tokens, ensuring proper semantics and out-of-the-box responsive behavior.

Does this frontend design approach work for both Vue and React interfaces?▼

Yes, this frontend design approach works for both Vue and React interfaces. It translates design briefs into production-ready components across HTML/CSS/JS, React, and Vue, applying a single bold aesthetic direction.

Why does my generated frontend interface lack a cohesive visual style across pages?▼

Your generated frontend interface may lack a cohesive visual style if a single, bold aesthetic direction and a defined design system with CSS variables are not applied consistently across all pages and components.

Do I need to define CSS variables and typography tokens before generating frontend components?▼

You do not need to manually define CSS variables and typography tokens before generating frontend components. The process establishes a reusable design system with color tokens and layout strategies directly from your brief.

Related Skills

Explore More Design & Creative Skills→
ShopHeckShopHeck
1

impeccable

Generate production-ready frontend interfaces with bold aesthetic and accessibility standards.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced