skills.rest
iyaki
iyakiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Design production-grade frontend interfaces from user requirements.

Updated Sep 25, 2025
Search Tags:#design#frontend#react#css#aesthetics#ui-components
One-click install
npx skills add https://github.com/iyaki/opencode-base-template --skill frontend-design-iyaki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/iyaki/opencode-base-template/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/iyaki/opencode-base-template --skill frontend-design-iyaki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to translate requirements into visually distinctive, production-ready frontend interfaces that balance aesthetic quality with real-world practicality.

Core Features & Use Cases

  • Aesthetic direction and design system: define bold, cohesive visual direction that can be implemented across components, pages, and campaigns.
  • Working code output: generate ready-to-integrate HTML/CSS/JS, React/Vue components, or UI patterns that align with the chosen aesthetic.
  • Accessibility and polish: ensure typography, color contrast, motion, and responsive behavior meet accessibility and quality standards.

Quick Start

Provide a production-grade frontend component or page guided by the specified 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 generate production-grade React UI components with a cohesive design system?▼

To generate production-grade React UI components, this Skill applies an intentional design system covering typography, color, and motion to output ready-to-integrate code with cohesive aesthetic direction and accessibility compliance.

Can I use this to build frontend interfaces with vanilla HTML and CSS instead of a framework?▼

Yes, you can build frontend interfaces with vanilla HTML and CSS. The Skill generates working code across React, Vue, or vanilla HTML/CSS, ensuring cross-framework compatibility while maintaining the specified visual direction.

What's the best way to translate design requirements into a distinctive web UI?▼

The best way to translate requirements into a distinctive web UI is by defining a bold visual direction first. The Skill then outputs ready-to-integrate UI patterns, pages, and components that align with that chosen aesthetic.

Does this frontend design Skill ensure accessibility and color contrast for web UI development?▼

Yes, this frontend design Skill ensures accessibility for web UI development. It validates typography, color contrast, motion, and responsive behavior to meet accessibility and quality standards across all generated interfaces.

How do I create a dashboard UI with a consistent visual design system?▼

To create a dashboard UI with a consistent visual design system, provide your requirements and desired aesthetic direction. The Skill outputs production-grade components and pages with cohesive typography and color systems ready for integration.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
spuneiarturspuneiartur
1

frontend-design

Translate aesthetic direction into responsive HTML/CSS/JS or React components.

Community
Advanced
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
sero-labssero-labs
19

sero-dashboard-ui

Builds Sero dashboard widgets with shared React components and semantic design tokens.

Official
Intermediate