skills.rest
Jonathan0823
Jonathan0823COMMUNITY
Explore all skills by this author →
𝕏@GuinnJo1GitHub

frontend-design

Translate design direction into React, Vue, HTML/CSS, or Next.js frontend code.

7|Updated Feb 5, 2026
Search Tags:#design#accessibility#React#frontend#components#UI#aesthetics
One-click install
npx skills add https://github.com/Jonathan0823/opencode-config --skill frontend-design-jonathan0823
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Jonathan0823/opencode-config/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Jonathan0823/opencode-config --skill frontend-design-jonathan0823

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides designers and developers in delivering distinctive, production-grade frontend interfaces with strong aesthetic direction, ensuring interfaces avoid generic AI aesthetics and translate design concepts into polished code.

Core Features & Use Cases

  • Frontend Design Guidance: Establish a bold, cohesive aesthetic and translate it into production-grade components, layouts, and UI patterns.
  • Code-to-Design Implementation: Convert design direction into working HTML/CSS/JS, React, Vue, or Next.js code with attention to typography, color, motion, and accessibility.
  • Use Case: When asked to build a dashboard page or component gallery, apply this skill to produce a unique, ready-to-run frontend implementation that matches a specified aesthetic direction.

Quick Start

Provide a distinctive frontend design direction and implement a working prototype (HTML/CSS/JS, React, Vue, or other).

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 direction into production-ready frontend code?▼

To translate design direction into production-ready frontend code, provide a distinctive aesthetic specification and the Skill generates working components, pages, or dashboards. It ensures typography, color systems, motion, and accessibility align with your specified visual direction.

How do I avoid generic AI aesthetics when building React components?▼

To avoid generic AI aesthetics when building React components, apply a defined design-token discipline and aesthetic direction. This approach enforces cohesive typography and color systems to deliver distinctive, production-grade UI artifacts rather than default templates.

Can I use this to build a dashboard with Next.js and Vue?▼

Yes, you can use this to build a dashboard with Next.js and Vue. It supports generating production-ready frontend interfaces across frameworks like React, Vue, HTML/CSS, and Next.js while maintaining responsive behavior and accessibility standards.

What is the best way to ensure accessibility standards in frontend UI artifacts?▼

The best way to ensure accessibility standards in frontend UI artifacts is to apply design-token discipline during component construction. This Skill automatically aligns UI patterns, responsive behavior, and motion with defined accessibility standards.

Does this approach work for converting HTML CSS mockups into a component gallery?▼

Yes, this approach works for converting HTML CSS mockups into a component gallery. It translates design concepts into polished code, generating a unique, ready-to-run frontend implementation that matches your specified aesthetic direction.

Related Skills

Explore More Design & Creative Skills→
bketelsenbketelsen
1

frontend-design

Generate distinctive frontend interfaces with intentional typography, color, motion, and composition.

Community
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
gizixgizix
2

query-patterns

Implement TanStack Query data-fetching patterns for React and TypeScript applications.

Community
Intermediate
tan-yong-shengtan-yong-sheng
1

gstack-design-html

Convert design mockups into self-contained HTML/CSS with responsive layouts.

Community
Advanced