skills.rest
iredrion-img
iredrion-imgCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement frontend interfaces with design tokens and responsive layouts.

Updated Jan 19, 2026
Search Tags:#typography#a11y#react#css#ui-design#frontend-design#component-building
One-click install
npx skills add https://github.com/iredrion-img/kh-rnd-wms --skill frontend-design-iredrion-img
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/iredrion-img/kh-rnd-wms/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/iredrion-img/kh-rnd-wms --skill frontend-design-iredrion-img

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to create consistently; this skill guides purposeful design direction and implementable frontend patterns.

Core Features & Use Cases

  • Define a bold aesthetic direction and translate it into UI components, pages, dashboards, or entire apps.
  • Provide practical guidance on typography, color, motion, and layout to ensure cohesive, high-quality UI across frameworks (React, Vue, HTML/CSS).
  • Use case: a startup needs a unique dashboard UI that feels premium and cohesive across marketing pages and admin tools.

Quick Start

Define a bold aesthetic direction and implement production-grade frontend components that reflect that vision.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build distinctive frontend interfaces with consistent UI design?▼

Build distinctive frontend interfaces by defining a bold aesthetic direction and translating it into cohesive, production-grade components using design tokens, accessible typography, and responsive layout guidance.

Can I use this to create a React dashboard with accessible typography?▼

Yes, you can create a React dashboard with accessible typography; the skill provides practical guidance on typography, color, motion, and layout to ensure high-quality, cohesive UI across React, Vue, or vanilla HTML/CSS.

What's the best way to establish a cohesive aesthetic direction for an entire app?▼

The best way to establish a cohesive aesthetic direction for an entire app is to define a bold visual vision and apply production-grade workflows with design tokens and cohesive theming across all marketing pages and admin tools.

Does this frontend design approach work with vanilla HTML and CSS?▼

Yes, this frontend design approach works with vanilla HTML and CSS, as well as React and Vue, applying design tokens, accessible typography, and responsive layout guidance to deliver production-grade interfaces.

How do I translate a design vision into production-grade frontend components?▼

Translate your design vision into production-grade frontend components by applying purposeful design direction with implementable patterns, using design tokens and responsive layout guidance to ensure cohesive, high-quality UI.

Related Skills

Explore More Design & Creative Skills→
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
qodex-aiqodex-ai
39

web-interface-architect

Design unique web interfaces with HTML, CSS, and JavaScript.

Official
Advanced