skills.rest
Takeaki0817
Takeaki0817COMMUNITY
Explore all skills by this author →
Website𝕏@dev_takeaki0817GitHub

frontend-design

Convert frontend requirements into reusable React, Vue, or vanilla components.

Updated Dec 16, 2025
One-click install
npx skills add https://github.com/Takeaki0817/hibioru --skill frontend-design-takeaki0817
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Takeaki0817/hibioru/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Takeaki0817/hibioru --skill frontend-design-takeaki0817

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers translate vague frontend requirements into distinctive, production-grade interfaces, speeding up the design-to-code workflow.

Core Features & Use Cases

  • Establish a bold design direction and cohesive design system.
  • Generate reusable frontend components, pages, and apps across React, Vue, or vanilla stacks, with accessible defaults.
  • Ensure typography, color systems, spacing, and responsive behavior for high-quality UI deliverables.
  • Use case: When given a UI brief, rapidly produce a polished component library and a set of example pages that adhere to the project’s aesthetic direction.

Quick Start

Generate a polished React button component named PrimaryButton with a bold color, accessible focus states, and responsive sizing.

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 React components from a UI brief?▼

To generate production-grade React components from a UI brief, you translate requirements into distinctive interfaces with accessible defaults, cohesive typography, and responsive behavior. This ensures rapid delivery of polished component libraries and example pages.

Can I build a cohesive design system for Vue or Svelte applications?▼

Yes, you can build a cohesive design system for Vue or Svelte applications. The process translates requirements into reusable components with established typography, color systems, and spacing to ensure high-quality UI deliverables across various stacks.

What is the best way to ensure accessibility when creating frontend UI?▼

The best way to ensure accessibility when creating frontend UI is to apply accessible defaults during component generation. This includes handling focus states, responsive sizing, and functional requirements for cohesive aesthetics across React, Vue, Svelte, or vanilla stacks.

Does this approach work for vanilla JavaScript stacks or only frameworks?▼

This approach works for both vanilla JavaScript stacks and frameworks. It translates frontend requirements into distinctive, production-grade interfaces across React, Vue, Svelte, or vanilla stacks, handling design-system integration and responsive behavior.

How do I speed up the design-to-code workflow for frontend pages?▼

To speed up the design-to-code workflow for frontend pages, translate vague frontend requirements into polished component libraries and example pages. This method rapidly produces cohesive aesthetics, reusable components, and accessible defaults.

Related Skills

3iQ-Corp3iQ-Corp

frontend-design

Generate production-grade frontend interfaces from a specified aesthetic direction.

Official
Advanced
alexandephiliaalexandephilia

frontend-design

Creates responsive frontend UI components with Tailwind CSS across React, Vue, Svelte, or vanilla HTML/CSS.

Community
Intermediate
tech-with-sethtech-with-seth
4

react-router-framework-mode

Build full-stack React applications with React Router framework mode.

Official
Advanced
abzhawabzhaw

frontend-design

Design frontend interfaces with aesthetic direction and code-ready HTML/CSS/JS output.

Community
Advanced