skills.rest
yoshihiko555
yoshihiko555COMMUNITY
Explore all skills by this author →
Website𝕏@yoshihiko5555GitHub

frontend-design

Design and implement frontend interfaces with HTML, CSS, JavaScript, and modern frameworks.

Updated Jan 13, 2026
Search Tags:#design#ui#frontend#components#aesthetics#web-design
One-click install
npx skills add https://github.com/yoshihiko555/dotfiles --skill frontend-design-yoshihiko555
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yoshihiko555/dotfiles/tree/main/shared/skills/codex-only/frontend-design
Command: npx skills add https://github.com/yoshihiko555/dotfiles --skill frontend-design-yoshihiko555

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deliver distinctive, production-grade frontend interfaces that align with a bold design direction, moving beyond generic AI aesthetics.

Core Features & Use Cases

  • Aesthetic direction: Define a unique visual concept (typography, color, motion) for web interfaces.
  • Production-ready code: Generate HTML/CSS/JS or framework components (React/Vue) that are ready to integrate.
  • Comprehensive guidelines: Provide design best practices for typography, spacing, accessibility, and responsive layouts.

Quick Start

Create a production-grade frontend design with a distinctive aesthetic direction for a given project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade frontend interfaces with a distinctive aesthetic direction?▼

Production-grade frontend interfaces are generated by applying a bold aesthetic direction to web components, pages, or dashboards. This ensures a cohesive visual language, responsive behavior, accessibility, and polished typography for HTML, CSS, JavaScript, and modern frameworks.

Can I use this to create framework-specific components for React or Vue applications?▼

Yes, you can create framework-specific components for React or Vue applications. The process generates production-ready HTML, CSS, and JavaScript code tailored for modern web frameworks, ensuring the interfaces are ready for immediate integration.

What's the best way to establish a cohesive visual language for web applications?▼

The best way to establish a cohesive visual language is by defining a unique visual concept encompassing typography, color, and motion. This approach provides comprehensive design best practices for spacing, accessibility, and responsive layouts.

Does this approach move beyond generic AI aesthetics for web design?▼

Yes, this approach moves beyond generic AI aesthetics by delivering distinctive, production-grade frontend interfaces. It aligns web components with a bold design direction to ensure the final UI stands apart from standard automated layouts.

How to design accessible and responsive dashboards using HTML and CSS?▼

Accessible and responsive dashboards are designed by generating production-ready HTML and CSS code guided by comprehensive best practices. This ensures polished typography, responsive behavior, and accessibility standards are met across the interface.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
tomasbassotomasbasso

frontend-design

Translates design briefs into production-grade frontend interfaces and components.

Community
Advanced
J03Fr0stJ03Fr0st

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced